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.
💡 Good to know
The AB Tasty campaign configuration interface enables you to specify, at the account level or at the campaign level, whether the JavaScript should be executed on or before DOM-Ready. Refer to this article to declare your preferences.
How to configure JavaScript at the Account Level
Configuration
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.
📎 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.
How to configure JavaScript at a Campaign Level
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.
Visual Editor
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.
Code Editor
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.
How to configure JavaScript at the Variation level
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.
Visual 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.
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.
How to set-up 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.
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.