JavaScript in 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

If you need more information about how to configure JavaScript files into AB Tasty, please refer to the following articles:

• Javascript files execution

• Campaign JavaScript Execution

• How to configure JavaScript

Account JavaScript

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.

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

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.

Context

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…).

Good to know 💡

The code a user can set up on his account JavaScript is a different feature. 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.

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.

Good to know 💡

The Element feature available in the visual editor 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.