How Do I Create a Variation that Redirects to Another Page Based on Certain Logic?

🚀 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
});