Test two URLs in Optimizely Web Experimentation or Optimizely Performance Edge using a redirect experiment

  • Updated
Relevant products:
  • Optimizely Web Experimentation
  • Optimizely Performance Edge
This topic shows how to:
  • Test two landing pages, homepages, or any other pages against each other
  • Set up redirect experiments, which redirect visitors from one URL to another
  • Ensure that you can track events on both your original and redirect pages

Redirects at a glance

Redirect experiments allow you to compare two separate URLs as variations in an A/B test. For example, you might create a redirect experiment that compares two versions of a landing page.

Tips

  • Use redirects if your variation code exceeds 200 lines
  • Check Redirect with live query parameters included to keep the parameter attached in the variation
  • Leave Allow Additional Redirects unchecked to prevent subsequent redirects
  • Use an event to track clicks on the redirected variation

What to watch out for

You can set up redirect experiments, which redirect visitors from one URL to another.

This is useful when comparing landing pages, or multiple versions of a site page that have different URLs. Testing whole pages against each other is a proven way to perform deep experimentation.

In this article, you will walk through each stage of setting up a redirect experiment: setting up the experiment targeting, settings up the metrics, and creating the redirect variations.

Optimizely Performance Edge is a lightweight experimentation product that delivers significantly faster performance than previous versions of Optimizely. It does this by relying on a streamlined "microsnippet" which limits the range of available features.

Optimizely Performance Edge and Optimizely Web Experimentation handle redirect experiments the same way, so all information contained in this article applies to experiments created with either version of Optimizely.

Create an experiment and set up the targeting

When you begin the process of setting up your redirect experiment, you have three options:

  • You can use an existing page

  • You can create a new page

  • You can create a new experiment that targets the original URL you are redirecting visitors from. For example, if the experiment redirects from https://atticandbutton.us/homepage to https://atticandbutton.us/new-homepage, then the original URL is https://atticandbutton.us/homepage.

Choose the option that makes the most sense for your redirect experiment, and continue to step 2.

Make sure not to include the redirect destination URL in the URL match conditions. Expand the Test URL(s) tray to verify that the redirect URL is not included in the match conditions. 

 

Add the redirect to your variation 

Create a variation change to redirect visitors to the redirect URL.

  1. Under Manage Experiment > Variations, select the variation (not the original).

    variation-2.png

  2. Click Create.

    create.png

  3. Under Create Options, select Redirect.

    redirecturl.png

You have two options for setting up your redirect: via the URL or with custom code. If you select URL, paste in either the complete URL or the relative path where you want visitors to be redirected to.

url.png

If you select Code, define a function that returns a URL string where you want to redirect visitors.

code.png

You cannot edit the redirect URL with the Visual Editor. Instead, you see this prompt:

redirected.png

Set up a page to track events across all URLs 

If you want to track how an event performs on both the experiment URL and the redirect URL, you will create a page that includes both in the URL match conditions. In this article, we will refer to this as the hybrid page.

  • Make sure you do not include this page in the experiment's targeting. 
  • The hybrid page can be excluded from the snippet if you have turned on the Page Trimming feature. To ensure that the page is not excluded, please override the page trimming via the advanced section in page setup. See Set up a page in Optimizely Web Experimentation.

  1. To create the hybrid page, include both the experiment URL and the redirect URL in the URL match conditions section.

  2. Add a new event to the hybrid page.

Create a click event

Sometimes an element on the experiment URL has a different selector than the equivalent element on the redirect URL. If you need to target these multiple selectors in a single click event, repeat these steps for both URLs. 

  1. Open the URL in your browser. 

  2. Right-click the button element and select Inspect. A console will pop up, and the element will be highlighted on the page.

  3. Right-click the highlighted element and select Copy > Copy selector.

    copy-selector.png

  4. Paste this selector into the Selector field of the click event. You can add multiple selectors by separating them with commas.

    selector.png

  5. Click Save.

Select metrics and audiences for your experiment 

When a visitor is bucketed into an Optimizely Web Experimentation variation with a redirect change, Optimizely prioritizes executing that change to ensure there is as little delay as possible before a visitor can reach and load the new destination page.

As a result, redirects can cause race conditions with the typical event tracking for pageview events on the origin page. Because doing so does not generally provide a strategically significant metric for redirect experiments, using origin page views as a metric for your redirect tests is not recommended.

  1. Add the click events you created in step 3 above as metrics in the experiment.

  2. Optionally add an audience.

  3. Optionally adjust the traffic allocation and distribution between your variations. The original variation is the original URL; the next variation is the URL visitors are redirected to.

Take care when using asynchronous conditions to target redirects, such as geotargeting, list attributes, and some third-party analytics integrations. When you use asynchronous conditions to target a redirect, the initiation of the redirect may be delayed. During the delay, you may see other experiments activate or events tracked on the page that visitors are being redirect from. If you defined a metric based on those events, you may see those visitor actions reflected on your Results page.

The Optimizely Experimentation snippet must be implemented on all pages where the experiment runs and where events are tracked. Make sure the snippet is included on both the original URL and the redirect URL. Otherwise, some visitors and events may not be tracked.

Experiments that redirect to a different domain may experience tracking issues for those redirected visitors. Learn more about cross-domain tracking.

Test and publish your experiment 

Congratulations! You set up a redirect experiment. Test the experiment and publish it live to your visitors.

You can verify that your setup is correct by going to the API Names tab in your redirect experiment. 

Best practices

  • Indicate the canonical link. To improve SEO link and ranking signals, the redirected page should indicate that the original page is the preferred (canonical) destination. Add a <link> element with the rel="canonical" attribute into the <head> section of the redirected page. Check out this Google Support Doc for more information.

  • Exclude the redirect URL. To avoid redirects on the redirect URL itself, make sure to exclude the redirect URL via the page targeting settings.

  • Unblock the redirect. By default, when you set a redirect, Optimizely Experimentation blocks other redirects for 5 seconds so that you will not cause an infinite loop of redirects. Click to learn about unblocking the redirect.

Having the Snippet as high in the <head> tag as possible is vital

Having any asynchronous components for this experiment will delay the redirect from happening. This includes asynchronous audience conditions (for example, geotargeting) and conditional page activation that does polling or some other async operation.

Performance questions

  • Will visitors see a flicker of images/old page loading prior to being redirected?
    • No, Optimizely redirects will hide the body of the original page using CSS, so there will be no flashing/flickering
  • How does the redirect work?
    • Optimizely uses window.location.replace. This is called immediately after the bucketing decision.
    • The origin page will not load, and no additional requests are made on the original page after this location.replace is called.
    • In Chrome, in-flight XHR requests are canceled by the browser when location.replace is called
  • How can we ensure mobile visitors do not have a poor experience?
    • You can do a test cookie-gated experiment and evaluate performance by using Chrome dev tools (using throttling and device emulation)
  • Can the user click Back in their browser to return to the origin page?
    • No, because of window.location.replace(), so Back cannot bring the user back to the original homepage.

SEO 

Optimizely Web Experimentation is a JavaScript tool, so it cannot inherently prevent Bots from indexing variations on your site for SEO purposes. However, we can provide some recommendations on how to minimize this best.

Search engines have their own methods and proprietary algorithms for indexing pages on the web. Google and other search engines handle the indexing of dynamic JavaScript content in various ways. Since Optimizely powers experimentation via dynamic JavaScript, any SEO implications of using Optimizely would fall under Google’s rules and methodology of indexing dynamic JavaScript content. To best prevent SEO engines from indexing the variant version of the page, we recommend you take the following measures:

  • Canonical <link> tag. You should add a link tag to the head of your page, which tells Google that the canonical version of the page lives at a different URL. We provide some details on that here.
  • Robots.txt entry. Search engines that respect this convention will skip over URLs that follow the disallow directive - Robots documentation here.

Analytics

If you have client-side analytics tools in place and want to make sure that the data being transmitted to those systems is useful. On the post-redirect (variant) page, the document.referrer is the pre-redirect page URL, which is not very useful. Sometimes, you may want to report that the true referrer was the document.referrer of the pre-redirect page.

You can use the getRedirectInfo method to capture the original referrer to pass it to your third-party analytics systems:

var redirectInfo = window.optimizely.get('state')  .getRedirectInfo();

var realReferrer = redirectInfo.referrer;