Adding Javascript on AB Tasty

There are different methods and levels to adding JavaScript code on AB Tasty. Select one depending on the scope you need from the JavaScript code. In most cases, you can add JavaScript code in both the visual editor and the code editor.

The various JavaScript codes are executed in the following order:

  1. Account JavaScript
  2. Campaign JavaScript
  3. Element JavaScript 


Account JavaScript

The AB Tasty tag enables you to inject JavaScript code into your website. This code can be used to track conversions or to send data to AB Tasty. The aim is to obtain additional information on a test.

At times, you may need to add a JavaScript snippet on all the pages where the AB Tasty tag is present. This could be for different reasons, such as to use it as an analytics catalyst, to add a custom script to be executed on all pages, to connect with third-party tools, or to add a quick patch. 

This code is applied to all pages where the AB Tasty tag is present. To add JavaScript code, follow these steps: 

  1. Click , then Account, then Account JavaScript
  2. Enter the code to be executed in the input window
  3. Click Save

Heads up ⚡

Do not include the opening <script> and closing </script> tags. By default, this code will run once document.ready is initialized in JQuery.

You can select to run this JavaScript as soon as the tag is executable or only when the DOM is ready. This means the code will not run until the Document Object Model has been constructed completely, with the initial HTML document loaded and parsed (though without waiting for stylesheets, images, and subframes to finish loading). 

This option is recommended because DOM loading is often a prerequisite for JavaScript to run properly. Once done, don't forget to save.


📎 Note: Discover more about Window: DOMContentLoaded


Code History

Each time you click Save, the code and its creation date are saved.

Once saved, a version of that JavaScript code will be created. Different versions are displayed just below the editing area. It’s possible to roll back each version by selecting it.

If necessary, you can reuse a previous version. To do this, simply copy the content of the saved code and paste it into the input window.

Heads up

The code will be executed on all pages where the AB Tasty tag is present. All the conditions and restrictions need to be set up manually by developers in the code.


Use cases

Using global code is useful if you want to track certain events systematically in all your future campaigns, for example:

  • Custom tracking (scroll on a specific page, video fully viewed, etc.)
  • Global tracking
  • Flag visitors with specific information: cookies, storage variables, etc. (to filter a report or target a new campaign, for example)
  • Targeting campaigns by events (to start campaigns manually)
  • Transaction tag implementation


Campaign JavaScript

You can also scope your JavaScript code to one single campaign (it will be executed on all variations and sub-tests of this campaign, including the original version). You can do this in two different environments:


Visual Editor

To add JavaScript code to an entire campaign, click on Campaign JavaScript in the right sidebar.

A modal window opens where you can insert JavaScript code:

Once done, don't forget to save.


Code Editor

To add JavaScript code to a whole campaign, go to the JS - Campaign tab.

From here, you can paste or edit JavaScript code to be executed at campaign level.

Once done, don't forget to click the Save step.


Variation JavaScript

Visual Editor

To add JavaScript code to one variation only, click Variation Javascript from the Variation dropdown menu.


This opens a modal where you can insert JavaScript code.

Once done, don't forget to save.


Code Editor

One of the main features of the Code Editor is that it lets you insert JavaScript code. Take a look at this article about the Code Editor, if you haven’t already done so. Once you've accessed the Code Editor, the CSS tab opens by default.

To switch to the JavaScript tab, click JavaScript. Once done, don't forget to click the Save step.

Element Javascript

You may not want to wait for a specific element to exist on the page before you execute your JavaScript. That’s where Element JS shines.

A JavaScript code can also be triggered when an element is present in the DOM. This means the JavaScript code related to that element will run before DOM-ready (before Window: DOMContentLoaded). In this case, the JavaScript code will be executed at the same time as the variation JavaScript but will only be triggered if the selector is pointing to an element present in the DOM.

In this way, you can use Element JavaScript to execute all the JavaScript code of a variation, but only if a specified element exists.


Visual Editor

To use the Element JavaScript feature, select an element by clicking on it, then select Element JavaScript in the contextual menu.

A modal window opens with a selector already specified.

Add your JavaScript code and don't forget to save.


Code Editor

In the Code Editor, you need to specify directly in the code which element will trigger the snippet.


Heads up⚡

Campaign JavaScript, Variation JavaScript, and Element JavaScript are all executed in the Visual Editor. Account JavaScript is not executed in the Visual Editor.

Was this article helpful?