Javascript files execution

There are different methods and levels to adding JavaScript code on AB Tasty. Select one of these depending on the JavaScript code you need to execute. 

The various JavaScript codes are executed by the tag in the following order:

1. Account JavaScript
2. Campaign JavaScript
3. Variation JavaScript

Specific rule for Element JavaScript: the code is executed once the element is loaded on the page, meaning that this execution can happen at any time, even never.

Where and when do these javascript files run?

• Account JavaScript: on all pages on which the tag is set, after the DOM ready (depends of preferences set-up in the settings)
• Campaign JavaScript: on all the pages where the targeting is valid, on all variations, after the DOM ready (depends on your choices in the editors)
• Variation JavaScript: on all the pages where the targeting is valid, when the visitor is assigned to the variation, after the DOM ready (depends on your choices in the editors)
• Element Javascript: on all the pages where the targeting is valid, when the visitor is assigned to the variation and at the moment the element appears on the page.

Where to configure these JavaScript files?

Account JavaScript

Please refer to this how-to article to follow the steps to implement account JavaScript.

The AB Tasty tag enables you to inject JavaScript code into your website. 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.

You can select to run this JavaScript as soon as the tag is ready 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 your script might need elements on the page that won't be yet loaded on the page when executed. Once done, don't forget to save. 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.

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 and code editor.

Please refer to this how-to article to follow the steps to implement campaign JavaScript.

Use cases

Using Campaign JavaScript is useful to code directly the events you need to track on your campaign, and that are not configurable via the Action Tracking options in the visual editor.

• Custom tracking (scroll on the page, video fully viewed, etc.)
• Action tracking on an element which is not loaded on DOM ready
• etc.

For more information about campaign JavaScript file execution and options, see this specific article.

Variation JavaScript

Variation JavaScript is executed in a single variation of a campaign. You can do this in two different environments: visual editor and code editor.

Please refer to this how-to article to follow the steps to implement Variation JavaScript.

Use cases

This kind of JavaScript code should not be used to track events at all. It's useful to code your modifications instead of using the wysiwyg capabilities. But it's totally compatible with other modifications in wysiwyg and the usage of widgets. 

Element Javascript

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

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 once the element exists.

Please refer to this how-to article to follow the steps to implement Element JavaScript.

Use cases

This kind of JavaScript code should not be used to track events at all. It's useful to code your modifications instead of using the wysiwyg capabilities. But it's totally compatible with other modifications in wysiwyg and the usage of widgets.