How Do I Create a Variation that Redirects to Another Page Based on Certain Logic?
Smart Redirects in A/B Testing Without Losing Data or Breaking Tracking
🚀 THIS ARTICLE WILL HELP YOU:
- Understand Redirect Logic
- Adding Variation Code or Variation Custom Javascript
- Passing Convert Cookie Data for cross-domain tracking.
- Prevent Sample Ratio Mismatch (SRM) issues
🔄 Understand Redirect Logic
Sometimes you might need to make your A/B experiment's variations redirect to another page based on some logic. Of course, you could just start writing your JS code that redirects to the new page but the problem is just half solved.
Doing that will result in your variation not recording any stats since it redirects before allowing for the stats to be stored.
To fix that, we introduced a JS function that you can use to redirect to another page, without losing the ability to also store stats for that specific variation:
convert.redirect("URL_here");
So, instead of using for example:
document.location.href="http://www.mysite.com/my_variation_page.html"
Use the following, instead:
convert.redirect("http://www.mysite.com/my_variation_page.html");
🗒️ Note: The above code has to be used only inside the "Custom Javascript" section inside the visual editor:
If you need to transfer the query parameters, then you need to use this:
function redirectToNewUrlWithParam() {
// Get the current URL
var currentUrl = window.location.href;
// Check if the URL already has query parameters
if (currentUrl.includes('?')) {
// If yes, append the new parameter with an ampersand
currentUrl += '&ft=04nf23r';
} else {
// If no, append the new parameter with a question mark
currentUrl += '?ft=04nf23r';
}
// Redirect to the new URL
convert.redirect(currentUrl);
}
redirectToNewUrlWithParam();
🛠️ Adding Variation Code or Variation Custom Javascript
If you need to also change the styling of the variation pages where you are redirecting your visitors, you will need to create a deploy for each of the variation URLs where you are redirecting them, and implement the changes on the deploy.
⚠️ Important: Do not include the variation changes on the same experiment where you used the convert.redirect()
instruction, as this will lead to invalid experiment data.
🍪 Passing Convert Cookie Data for cross-domain tracking.
Same Top-Level Domain (Subdomain Redirects)
When redirecting between subdomains of the same top-level domain (e.g., from www.example.com to shop.example.com), cookies are automatically shared. You don't need to take any special actions for cookie transfer:
// Simple redirect between subdomains
convert.redirect("https://shop.example.com/page.html");
Different Domains (Cross-Domain Redirects)
When redirecting between different domains, you need to use the cross_domain
parameter to ensure proper tracking along the Universal Redirect Handler that is at the end of this article:
// Cross-domain redirect with cookie transfer
convert.redirect("https://other-domain.com/page.html", {cross_domain: true});
You can also maintain the URL parameters from the original page along the Universal Redirect Handler that is at the end of this article:
// Cross-domain redirect with cookie transfer and parameter maintenance
convert.redirect("https://other-domain.com/page.html", {
cross_domain: true,
maintain_parameters: true
});
⚠️ Preventing Sample Ratio Mismatch (SRM) Issues
Sample Ratio Mismatch can occur when implementing redirect experiments, especially if cookie data is handled improperly. To minimize SRM risk:
-
Consider using Split URL experiments instead of JavaScript redirects when possible
-
Avoid manually appending tracking cookies to URLs as this can cause duplicate counting
-
Use Convert's built-in redirect functionality with appropriate parameters
-
Verify your implementation with proper QA testing before launching
Universal Redirect Handler
For complex redirect scenarios, consider using this more robust handler:
/**
* Universal Convert redirect handler with intelligent cross-domain detection
* @param {string} targetUrl - The destination URL for the redirect
* @param {Object} options - Optional configuration settings
*/
function handleConvertRedirect(targetUrl, options = {}) {
// Default options
const settings = {
forceCrossDomain: false,
maintainParameters: true,
delay: 0,
...options
};
// Get current and target domains
const getCurrentDomain = url => {
try {
return new URL(url).hostname.split('.').slice(-2).join('.');
} catch (e) {
return '';
}
};
const currentDomain = getCurrentDomain(window.location.href);
const targetDomain = getCurrentDomain(targetUrl);
// Determine if cross-domain is needed
const needsCrossDomain = settings.forceCrossDomain ||
(currentDomain !== targetDomain &&
currentDomain !== '' &&
targetDomain !== '');
// Configure redirect options
const redirectOptions = {
maintain_parameters: settings.maintainParameters
};
// Add cross_domain if needed
if (needsCrossDomain) {
redirectOptions.cross_domain = true;
}
// Execute the redirect with optional delay
if (settings.delay > 0) {
setTimeout(() => {
convert.redirect(targetUrl, redirectOptions);
}, settings.delay);
} else {
convert.redirect(targetUrl, redirectOptions);
}
}
Example usage:
// Basic redirect between pages
handleConvertRedirect("https://example.com/new-page.html");
// Cross-domain redirect
handleConvertRedirect("https://other-domain.com/page.html");
// Advanced configuration
handleConvertRedirect("https://example.com/page.html", {
maintainParameters: true,
delay: 100
});