How to add JavaScript code on AB Tasty?

There are different ways & levels to add JavaScript code on AB Tasty. Select one depending on the scope you want the JavaScript code to be executed. Most of the time, you can add it via two different editors: the visual editor & the code editor.

1. Account JavaScript
2. Campaign JavaScript
   1. Visual Editor
   2. Code Editor
3. Variation Javascript
   1. Visual Editor
   2. Code Editor
4. Element JavaScript
   1. Visual Editor
   2. Code Editor

The various JavaScript codes are executed in the following order:

1. First, Variation JavaScript (which includes Element JavaScript)
2. Then, Campaign JavaScript
3. Finally, Account JavaScript

Account JavaScript

Sometimes, you may need to add a JavaScript snippet on all the pages where the AB Tasty tag is present.

It can be for different reasons: to use it as an analytics catalyser, to add a custom script to be executed on all pages, to connect with third-party tools, to add a quick patch... 

In order to do so, you have to access to the Settings.

Once in the settings, click on "Account JavaScript" in the left sidebar menu.

Then, you can paste and edit your JavaScript code.

Please, don't include the <script> and </script> tags.

You can decide to execute this JavaScript at "DOM-ready". Otherwise, it will be executed as soon as the tag is executable.

What we call "DOM-ready" is when the event "DOMContentLoaded" is fired (when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading).

Discover more about Window: DOMContentLoaded

Once done, don't forget to save.

Once saved, it will create a version of that JavaScript code. The different versions are displayed just below the editing area.

Every single version is rollbackable by selecting it.

---

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 it two different environments:

Visual Editor

In order to add JavaScript code to a whole campaign, you have to click on "Campaign JavaScript" in the right sidebar.

A modal opens and lets you insert JavaScript code:

Once done, don't forget to save.

Code Editor

In order to add JavaScript code to a whole campaign, you have to click on "Campaign JavaScript" below the variations' list.

Once clicked, the JavaScript tab is enabled for you to paste/edit JavaScript code and execute it at campaign level.

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

---

Variation JavaScript

Visual Editor

In order to add JavaScript code to a variation only, click "Variation Javascript" from the Variation's dropdown menu

A modal opens and lets you insert JavaScript code:

Once done, don't forget to save.

Code Editor

This is one of the main purposes & features of the Code Editor: let you insert JavaScript code. IF you haven't already, we invite you to read this article about the Code Editor.

Once you've accessed the Code Editor, by default, the enabled tab is the CSS tab.

In order to switch to the JavaScript Tab, click on "JavaScript".

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

---

Element Javascript

Sometimes, you want to wait for a specific element to exist on the page before you execute your JavaScript, that’s where this Element JS shines.

A JavaScript code can also be triggered when an element is present in the DOM. This means that it can execute the JavaScript code related to that element before DOM-ready (before "Window: DOMContentLoaded"). This can come very handy in specific cases.

This JavaScript code will be executed at the same moment than the Variation JavaScript but will only be fired if the selector is pointing to an element present in the DOM.

In short, you can use an "Element JavaScript" to execute all the JavaScript code of a variation but execute it only if an element exists.

Visual Editor

In order to use the Element JavaScript feature, select an element with a click and select "Element JavaScript" in the contextual menu.

It opens a modal with an already specified selector.

Add your JavaScript code.

Don't forget to save.

Code Editor

In the Code Editor, you will have to specify the element on which you want the snippet to be triggered directly in the code.

---

Nota bene

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