DOM ready principles
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.
Campaign Javascript and DOM ready
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 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.
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 article.
Configuring Campaign JavaScript Execution
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).
At the Account’s Level (anytime)
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.
At a Campaign Level (for a specific campaign)
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.