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

 

image11.png

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 image1.png, then Account Management, 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.

 

 

image7.jpg

 

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.


image9.png

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.

 

image5.png

 

A modal window opens where you can insert JavaScript code:

 

image8.png

 

Once done, don't forget to save.

 

Code Editor

 

To add JavaScript code to a whole campaign, click on Campaign JavaScript below the variations list.

 

image12.jpg

 

This brings up the JavaScript tab. You can paste or edit JavaScript code to be executed at campaign level.


image4.png

 

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.


image1.png

 

This opens a modal where you can insert JavaScript code.


image6.png

 

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.


image12.jpg

 

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.


image3.png

 

A modal window opens with a selector already specified.


image2.png

 

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?

/