- Optimizely X Web Experimentation
- Optimizely X Web Personalization
This article WILL HELP YOU:
- Test two landing pages, homepages, or any other pages against each other
- Set up redirect experiments (split URL tests), 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, or split tests, 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.
- Use redirects if your variation code exceeds 200 lines
- Check Redirect with live query parameters included to keep the parameter attached in the variation
- Check Allow Additional Redirects to prevent Optimizely from blocking subsequent redirects
- Use an event to track clicks on the redirected variation
What to watch out for
Do you have two landing pages to compare? Or two separate versions of a page? You can create "split URL" experiments that redirect a visitor to a different URL as a different variation. In Optimizely, redirect experiments help you to easily test whole pages against each other.
When you're testing a major redesign or dramatic change, you may have two entirely separate versions of a page to compare. For example, you may have two different landing pages or homepages with different URLs. Testing whole pages against each other is a great way to perform deep experimentation.
Redirect experiments work a little differently from other Optimizely experiments. In this article, we'll walk you through each stage of setting up a redirect: setting up Pages, creating the experiment, setting up the redirect variation, and adding events as metrics.
1. Set up Pages
When creating your redirect experiments, it's important to first set up the two Optimizely pages within your Optimizely account. These pages tell Optimizely where to run campaigns and experiments on your site. The reason you need to create the pages first is so that you can ensure that your metrics are tracked across both pages in your experiment.
For example, suppose you run a retail site, Attic & Button, and you want to test one homepage against a new version of that homepage. Your new version of the homepage is hosted on a different URL and has updated branded images as well as new content. You want your visitors to click on the CTA on the homepage that takes them to the relevant product pages, where visitor will learn more about the products displayed on the homepage. The metric you want to track is clicks on the CTA on the homepage to those product pages.
You will need to create two Optimizely pages:
The original, where the experiment will run
A hybrid page that will target both the original and the redirect page with the same metric
To create your "original" Optimizely page, set up a Page by targeting the single page. This page will be where your visitors land (potentially to be redirected) and the only page included in the experiment.
After adding your first page, create a hybrid page with a slight modification. This page is for tracking metrics only and will not be included in the experiment. You will need to target both your original page ("atticandbutton.us/homepage") and the redirect URL ("atticandbutton.us/v2").
For Page Type, select A set of URLs:
After you create both pages in Optimizely, set up a new event on the hybrid page by navigating to the Events tab and create a new click event.
It is important to run redirect experiments and track metrics that apply to both the original and the redirect pages. We recommend running a redirect experiment on pages with similar actions to ensure the impact is tracked correctly.
2. Create a new experiment
Redirect variations follow the same six steps you use normally use to build an experiment, with a few differences. You'll set up the basic experiment as usual. You can change any of the components you add later, if you like.
Navigate to Create New... > A/B Test to start the experiment flow.
Add a Page to tell Optimizely where the experiment will run. For redirects, the URL usually points to your original homepage or landing page.
Add the Audience who will see your experiment.
Add the metrics you'll use to measure success - this is the event created on the hybrid page.
Adjust the traffic allocation and distribution between your variations, if you like. The Original is your existing page and Variation #1 is the new page you're comparing it to.
Click Create Experiment.
Make sure to include your Optimizely snippet in the code for both the original page and the page to which you are redirecting in your variation. If it's not on the new page, your visitors may not all be tracked.
Experiments that redirect to a different domain may experience tracking issues for those redirected visitors. Learn more about cross-domain tracking.
3. Set up a redirect variation
Next, you'll set up a variation that redirects to your second homepage or landing page.
Under Manage Experiment > Variations, click Variation #1, where you'll set up the redirect from your homepage to the new URL.
Under Create Options, select Redirect:
If you select URL, pass in a full URL or relative path where you'd like to redirect visitors.
To continue our example, since you're testing two versions of your homepage, enter the URL for the second version of your homepage here (the same URL that you added as a new page earlier).
Based on your traffic allocation, visitors will be bucketed randomly into one of the URLs that you enter.
If you select Code, define a function that returns a URL string where you'd like to redirect visitors:
When you load a redirect page, you won't be able to edit it with the Editor. You'll see a prompt that prevents you from editing the page.
Change or delete a variation's redirect URL
To change a variation's redirect URL, navigate to Manage Experiment > Variations and click the variation you want to change. Then, click the arrow next to the redirect to open the panel where you can change or delete the redirect.
4. Add metrics
You'll use events to track how visitors behave in the experiment. To track events in a redirect experiment that cover the original page as well as the URL you redirect visitors to, you'll need to track events on the hybrid page using the click event you created in Step 1.
After you create the click event on the hybrid page, make sure that the selectors for the buttons on both URLs are included. For example, let's say you want to track a Shop Now button in the original ("atticandbutton.us/homepage") and the redirect URL ("atticandbutton.us/v2"). You will need to do the following for both URLs:
Open both URLs in your browser.
Right-click the button element and select Inspect Element. A console will pop up, and the element will be highlighted on the page.
Right-click the highlighted element and select Copy > Copy selector.
Paste this selector into the Selector field of the click event.
Make sure that all of the selectors for the elements you want to track in this event are present for both URLs.
Now that the event is set up on the hybrid page, you can add it as a metric.
Navigate to the experiment.
Under Manage Experiment, select Metrics to set your goals for this experiment.
Click metrics to add them.
After you set up your experiment, double-check that each component is set up correctly. QA to make sure the experiment it looks and works the way you want.
Congratulations! Your experiment is now live to the world.
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.
Unblock Optmizely's redirect. By default, when you set a redirect, Optimizely blocks other redirects for 5 seconds so that you will not cause an infinite loop of redirects. Click to learn about unblocking the redirect.
Client typically have three main concerns with redirects
- 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?
- We use window.location.replace. This is called immediately after the bucketing decision.
- Origin page will not load and no additional requests will be made on the original page after this location.replace is called.
- In Chrome, in-flight XHR requests are cancelled by the browser when location.replace is called
- How can we ensure mobile visitors don't have a poor experience?
- You can do a QA cookie-gated experiment, and evaluate performance by using Chrome dev tools (using throttling and device emulation)
- Will the user be able to click the Back Button in their browser to go back to the origin page?
- No. We use window.location.replace(), so the back button will not bring the user back to the original homepage.
- Having the Snippet as high in the head as possible is vital
- Having any asynchronous components for this experiment will delay the redirect from happening. This includes asynchronous audience conditions (ie, geotargeting) and conditional page activation that does polling or some other async operation.
- 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.
Clients typically 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 actually the pre-redirect page URL, which is not very useful. In some cases, the client may want to report that the true referrer was the document.referrer of the pre-redirect page.
They can use our getRedirectInfo method (docs) to capture the original referrer if they'd like to pass it to their third-party analytics systems:
var redirectInfo = window.optimizely.get('state')
var realReferrer = redirectInfo.referrer;
Messaging to customers concerned about redirects
- We have had high-profile clients run long-standing, high-trafficked redirect experiments - even on their homepage!
- They did not observe any adverse effects to their SEO
- They did not observe material impact to their bounce rate.
- These are anecdotal, but it's worth mentioning that a highly risk-averse company trusted us to handle a Homepage redirect
- Please do not mention "State Farm" (NDA)
- SEO impact is out Optimizely Web client's control - it's largely dependent on how various engines index dynamic content, and there is no consistent documentation out there to accurately characterize SEO impacts of client-side redirects.