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:
Account JavaScript
Campaign JavaScript
Element JavaScript
If you need more information about how to configure JavaScript files into AB Tasty, please refer to the following articles:
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.
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)
In order to fine-tune when your custom JavaScript is executed within your campaigns, you have the option to choose between two options: when the DOM is ready or before.
When a webpage is loaded, the browser goes through the process of reading the code and creating a representation of the page called the Document Object Model (DOM). The DOM-ready point is when the browser has finished this process and the page is fully loaded and ready to be interacted with.
It makes sure that the page is ready to be used and that all elements can be accessed before the code is executed.
This option can be set up on a campaign level or globally in your account. By default, the JavaScript code is set to execute when the DOM is ready, but if you have controls in place and you want to avoid flickering, you can choose to execute the code before the DOM is ready. This feature is available for you to use and you can access it in your advanced setting in the "Javascript Execution" subsection.
By default, the custom campaign JavaScript (JS) will be executed when the DOM is ready. This is because the custom JS may interact with elements of the DOM that may not be present before the document fully loads. It is safer to execute the JS only when there is the highest chance of reaching the targeted element, otherwise, the campaign may not be displayed. However, this can result in a potential and avoidable delay in the application of the campaign. Since the controls for checking the presence of a DOM element can be fully developed within the custom JavaScript, AB Tasty allows you to change the default JS execution behavior for one campaign or for all upcoming campaigns. This enables the execution of the custom JavaScript before the DOM is ready.
Heads up ⚡️
Configuring the execution of the campaign JavaScript before DOM-Ready does not mean that the JavaScript will systematically be executed before DOM-Ready. Indeed, there are many reasons why the AB Tasty tag should be executed after DOM-Ready (bad implementation, network problems, asynchronous targeting…).
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 . 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.
Transaction tag implementation
The AB Tasty generic tag enables to execute different types of JavaScript files on the website.
To learn more about of these kinds of JavaScript files, please refer to the following article.
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:
Account JavaScript
Campaign JavaScript
Element JavaScript
In this article we will focus on how to configure these 3 types of JavaScript files.
This code is applied to all pages where the AB Tasty tag is present. To add JavaScript code, follow these steps:
Click Settings > Account > Account JavaScript
Enter the code to be executed in the input window
Click Save
The newly configured behavior will apply immediately to all upcoming campaigns. Existing campaigns associated with the account will not be affected by this configuration.
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 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.
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.
The JavaScript code at a campaign level will be executed each time a campaign is triggered, meaning on original version + all variations/ scenarios ; it's useful for trackers for instance.
To add JavaScript code to an entire campaign:
Click on Campaign JavaScript in the right sidebar in the visual editor of your campaign
A modal window opens where you can insert JavaScript code:
Click Save.
To add JavaScript code to a whole campaign:
Go to the JS - Campaign tab in the code editor of your campaign (3rd tab of the right)
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.
The JavaScript code at a variation/ scenario level will be executed each time a variation/ scenario is triggered, meaning only on the selected variation. Do not use to set-up trackers because trackers should be fired at the campaign level. It's useful to code specific modifications as an alternative to the usage of widgets or wysiwyg editor.
To add JavaScript code to one variation only in the editor of your campaign, on the variation:
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.
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 , 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.
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 . 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.
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.
In the Code Editor, you need to specify directly in the code which element will trigger the snippet.
Campaign JavaScript, Variation JavaScript, and Element JavaScript are all executed in the Visual Editor. Account JavaScript is not executed in the Visual Editor.
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:
Account JavaScript
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)
Where to configure these JavaScript files?
Please refer to this 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
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.
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)
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 to follow the steps to implement campaign JavaScript.
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 .
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 to follow the steps to implement Variation JavaScript.
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.
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 . 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 to follow the steps to implement Element JavaScript.
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.
Transaction tag implementation
Type
Where in the application
Account JavaScript
Campaign JavaScript
Campaign JS in the visual Editor Campaign JS in the code Editor
Variation JavaScript
Variation JS in the visual Editor Variation JS in the code Editor
Element Javascript
Element JS in the visual Editor
In order to fine-tune when your custom JavaScript is executed within your campaigns, you have the option to choose between two options: when the DOM is ready or before.
When a webpage is loaded, the browser goes through the process of reading the code and creating a representation of the page called the Document Object Model (DOM). The DOM-ready point is when the browser has finished this process and the page is fully loaded and ready to be interacted with.
It makes sure that the page is ready to be used and that all elements can be accessed before the code is executed.
This option can be set up:
on a campaign level
or globally in your account.
By default, the JavaScript code is set to execute when the DOM is ready, but if you have controls in place and you want to avoid flickering, you can choose to execute the code before the DOM is ready. This feature is available for you to use and you can access it in your advanced setting in the "Javascript Execution" subsection.
By default, the custom campaign JavaScript (JS) will be executed when the DOM is ready. This is because the custom JS may interact with elements of the DOM that may not be present before the document fully loads.
It is safer to execute the JS only when there is the highest chance of reaching the targeted element, otherwise, the campaign may not be displayed.
However, this can result in a potential and avoidable delay in the application of the campaign. Since the controls for checking the presence of a DOM element can be fully developed within the custom JavaScript, AB Tasty allows you to change the default JS execution behavior for one campaign or for all upcoming campaigns. This enables the execution of the custom JavaScript before the DOM is ready.
Configuring the execution of the campaign JavaScript before DOM-Ready does not mean that the JavaScript will systematically be executed before DOM-Ready. Indeed, there are many reasons why the AB Tasty tag may be executed after DOM-Ready (bad implementation, network problems, asynchronous targeting…).
The code a user can set up on his account JavaScript is a . In this case, AB Tasty already has a setting to decide whether the JavaScript should be executed before DOM-ready or not. Both features are not linked.
The Element JS option is available in the visual editor and enables a user to add JavaScript to a specific element. In this case, the AB Tasty tag will add a watcher on the concerned element in order to wait for the element to be loaded before executing the JavaScript, without waiting for DOM-ready. More information in this .
We enable you to specify whether the JavaScript should be executed on or before DOM-Ready, at the account's level (anytime) or at the campaign level (for a specific campaign).
Custom JS execution can be configured at the account’s level, for all upcoming campaigns of the account.
To configure the custom JS execution for upcoming campaigns, follow the steps below:
In the Settings click Advanced Settings.
Click JavaScript execution.
On the Campaign JavaScript Execution page, disable the Wait for DOM-ready to execute JavaScript option if you want the custom JavaScript to be executed before DOM-ready.
The newly configured behavior will apply immediately to all upcoming campaigns.
Existing campaigns associated with the account will not be affected by this configuration.
Custom JS execution can be configured at a campaign’s level in the visual editor or in the code editor. This way, the default behavior of the execution of the campaign's JavaScript will not be affected.
To configure the custom JS execution at a campaign’s level, follow the steps below:
From the Campaign dashboard, open the Visual editor page or the Code editor page.
From the menu bar, open the Campaign JavaScript editor.
On the JavaScript editor page, uncheck the Wait for DOM-ready to execute JavaScript option.
Click Save.
