Campaign JavaScript Execution

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. 

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.

Configuring Campaign JS Execution

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. 

At the Account’s Level

Custom JS execution can be configured at the account’s level, for all upcoming campaigns linked to the user account.

To configure the custom JS execution for upcoming campaigns, follow the steps below:

1. In the Account settings, click Account Management.

2. In the menu, click Settings and then click Advanced Settings.

3. Click JavaScript execution.

4. 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.

At a Campaign Level

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:

1. From the Campaign dashboard, open the Visual editor page or the Code editor page.
2. From the menu bar, open the Campaign JavaScript editor.
3. On the JavaScript editor page, uncheck the Wait for DOM-ready to execute JavaScript option.
   
   
   
   
   
   
4. Click Save.