Table of Contents
- Optimizely Web Experimentation
- Optimizely Performance Edge
- 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
- Leave Allow Additional Redirects unchecked to prevent subsequent redirects
- Use an event to track clicks on the redirected variation
What to watch out for
- Make sure your URL targeting does not capture the redirect URLs
- The Optimizely snippet must be on the original and the redirected page
In Optimizely, you can set up redirect experiments (also called split URL tests), 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 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're 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.
Under Manage Experiment > Variations, select the variation (not the original).
Under Create Options, select Redirect.
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.
If you select Code, define a function that returns a URL string where you want to redirect visitors.
You cannot edit the redirect URL with the Visual Editor. Instead, you see this prompt:
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'll 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.
To create the hybrid page, include both the experiment URL and the redirect URL in the URL match conditions section.
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.
Open the URL in your browser.
Right-click the button element and select Inspect. 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. You can add multiple selectors by separating them with commas.
Select metrics and audiences for your experiment
When a visitor is bucketed into an Optimizely Web 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 of this, and 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.
Optionally add an audience.
Optionally adjust the traffic allocation and distribution between your variations. The original variation is the original URL; the next variation is the URL that visitors are being redirected to.
Take care when choosing to use 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 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.
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 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.
- 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.
- 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 cancelled 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 go back to the origin page?
- No because of window.location.replace(), so Back cannot 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 like to pass it to their third-party analytics systems:
var redirectInfo = window.optimizely.get('state') .getRedirectInfo();
var realReferrer = redirectInfo.referrer;