Target experiment based on a custom Javascript condition that evaluates true at a later stage
Important Update: Guidance on Targeting Experiments and Firing Goals Using JavaScript Conditions
| Author | George F. Crew |
IN THIS ARTICLE YOU WILL:
This update provides essential information regarding the use of JavaScript conditions for dynamically targeting experiments and firing goals within Convert Experiments.
Key Applications
JavaScript expressions evaluating to "true" can be utilized in the following areas:
-
Advanced Goal Setup: To trigger a goal.
-
Experiment Locations: To run an experiment on specific pages.
-
Experiment Audience: To target a particular group of visitors.
🚨 Critical Note on JavaScript Definition
Any JavaScript used in these expressions must be defined before the main Convert Experiments tracking code to ensure proper evaluation. The JavaScript expression will be evaluated into the global window context.
Deprecation Notice for convert.recheck() related functions
Previously, the convert.recheck() function was provided to evaluate conditions every 50ms for 2 minutes, addressing scenarios where variables might not be declared when the Convert script executes. Please be aware that convert_recheck_experience() and convert_recheck_experiment() have been deprecated. Users should refer to the specific deprecation notice for these functions for further details and alternative approaches.
Important Update: Deprecation of convert_recheck_experience() and convert_recheck_experiment()
We are deprecating the tokens convert_recheck_experience() and/or convert_recheck_experiment() in favor of the more powerful and flexible Dynamic Location Triggers.
To make sure that your tracking scripts continue to work correctly and to take advantage of new features, customers should now use a location trigger of type callback. This approach allows you to wait for specific conditions (like an element being present or a data layer property updating) before an experiment activates.
Recommended Solutions: Dynamic Location Triggers
Here are two common scenarios and the recommended JavaScript code to replace the deprecated "recheck" tokens.
1. Wait for an Element to be Present on the Page
This method ensures your experiment only activates after a specific HTML element has loaded, preventing visual flickering or errors caused by trying to interact with non-existent elements.
Location Callback JS
Place this code in the Location Callback section of your experiment:
if (options.isActive) return; // Prevent re-activation
window.waitFor("ELEMENT_SELECTOR").then((element) = > {
if (element) {
activate(); // Activate the experiment once the element is found
}
});
Project Global JS (Required Function)
You must declare the following function in your Project Global JS to make window.waitFor() available across your entire project:
window.waitFor = (selector, {
scope = document,
nextRetry = 100, // ms [cite: 31]
maxRetries = 50, // [cite: 32]
} = {}) = > {
let retries = 0; // [cite: 35]
const check = (resolve) = > {
const result = scope ?.querySelector ?.(selector); // [cite: 37]
if (result) {
resolve(result); // Element found, resolve with the element [cite: 38]
} else if (retries < maxRetries) { // [cite: 39]
retries++; // [cite: 40]
setTimeout(() = > check(resolve),
nextRetry); // Try again after delay [cite: 41]
} else {
resolve(); // Max retries reached, resolve without the element [cite: 48,
// 49]
}
};
return new Promise((resolve) = > check(resolve)); // [cite: 51, 52]
};
2. Wait for a Data Layer Property
This method is useful when you need to wait for a specific property or state to be present in your website's data layer (e.g., confirming a user is logged in, or a product ID is available).
Location Callback JS
Place this code in the Location Callback section of your experiment:
if (options.isActive) return; // Prevent re-activation [cite: 55]
window.waitForDataLayer("KEY", "VALUE").then((element) = > { // [cite: 56]
if (element) { // [cite: 57]
activate(); // Activate the experiment once the data layer condition is met
// [cite: 60]
}
});
Project Global JS (Required Function)
You must declare the following function in your Project Global JS to make window.waitForDataLayer() available across your entire project:
window.waitForDataLayer = (key, // [cite: 64]
value, // [cite: 65]
{
nextRetry = 100, // ms [cite: 67]
maxRetries = 50, // [cite: 68]
} = {}) = > {
let retries = 0; // [cite: 71]
const check = (resolve) = > {
// Find the layer object where the specified key matches the value [cite:
// 73]
const result = window ?.dataLayer ?.find((layer) = > layer[key] == value);
if (result) {
resolve(
result); // Data found, resolve with the layer object [cite: 74, 75]
} else if (retries < maxRetries) { // [cite: 76]
retries++; // [cite: 77]
setTimeout(() = > check(resolve),
nextRetry); // Try again after delay [cite: 78]
} else {
resolve(); // Max retries reached, resolve without the layer object
// [cite: 80, 83]
}
};
return new Promise((resolve) = > check(resolve)); // [cite: 84]
};