Skip to main content
menu_icon.png

Everything you need to switch from Optimizely Classic to X in one place: See the Optimizely X Web Transition Guide.

x
Optimizely Knowledge Base

A/B test a site redesign with redirect URL mapping in Optimizely Classic

THIS ARTICLE WILL HELP YOU:
  • Test two site designs against each other (e.g. your existing desktop site vs. your new responsive site)
  • Map existing pages to different URLs on your new site and create fallbacks in case a page doesn't exist on the new site
  • Show your team and management the impact that your redesign has on key metrics
  • Mitigate the risk that your new site might underperform and identify pages that need your attention

This article is semi-private because it contains custom code for redirect mapping.

With Optimizely's Editor, you can easily compare two versions of a page that live on separate URLs, such as two landing pages. In Optimizely, this is called a redirect experiment. But what if you're testing a sitewide redesign and want to compare many different pages on your original site to corresponding pages on the new site?

This article covers how to build a redirect experiment that maps multiple URLs from an existing site to a new site.

Existing site: www.optimizely.com New site: beta.optimizely.com

With your redesign, the URL structure has changed to:

Existing Site New Site
www.optimizely.com beta.optimizely.com
www.optimizely.com/resources/customer-stories beta.optimizely.com/happy-customers
www.optimizely.com/unimportant-page - doesn't exist on new site -

Here's how you can set this up in Optimizely, step by step.

What's the best way to test a site redesign? Check out this article on the strategy of testing through a site redesign.

1. Create an experiment with site-wide targeting

  1. First, create a new experiment by loading your homepage into the Editor.

  2. Target the experiment to run site-wide on your existing site with URL Targeting.

    Click Options, then select URL Targeting.



    Enter the domain name (in our example, this is the www.optimizely.com site) and set the Match Type to Substring match.

    URL Targeting with Substring Match

2. Insert redirect logic into Project JavaScript

  1. Click Home to open your Optimizely Homepage in a new tab.

  2. Navigate to the Settings tab and select JavaScript.

  3. Paste the following sample code into the Project JavaScript field.

window.optimizelyRedirect = {
  url_mappings: [],
  getMappedUrl: function(originurl) {
    // Check if user is navigating to this page from the same domain (to avoid switching sites mid-session)
    if (document.referrer.indexOf(window.location.hostname) <= 0){
      return false;
    }
    // Check one by one if url has mapping and return url, else return false
    for (var i = 0; i < window.optimizelyRedirect.url_mappings.length; i++) {
      if (RegExp(window.optimizelyRedirect.url_mappings[i].origin).test(originurl)) {
        return window.optimizelyRedirect.url_mappings[i].destination;
      }
    }
    return false;
  },
  redirectToMappedUrl: function(originurl) {

    var destinationurl = optimizelyRedirect.getMappedUrl(originurl);

    if (destinationurl) {
      // Default Optimizely redirect code
      var _optly = {
        redir: document.createElement("a")
      };
      _optly.redir.href = destinationurl;
      _optly.cur = window.location.search;
      if (_optly.cur) {
        _optly.redir.search = _optly.redir.search ? _optly.cur + "&" + _optly.redir.search.slice(1) : _optly.cur;
      }
      window.location.replace(_optly.redir.href);
    }

  }
}

optimizelyRedirect.url_mappings.push({
  "origin": "www.optimizely.com/?(\\?.*)?$",
  "destination": "https://beta.optimizely.com/"
}, {
  "origin": "www.optimizely.com/resources/customer-stories",
  "destination": "https://beta.optimizely.com/happy-customers"
}, {
  "origin": "www.optimizely.com/.*",
  "destination": "https://beta.optimizely.com/"
});

3. Adapt the URL mapping rules in Project JavaScript

  1. In the code you pasted, you'll find mapping rules with origin and destination URLs.

    Modify these to the URLs to map your own original and new sites. Optimizely's redirect logic will evaluate these rules sequentially. As soon as one matches, Optimizely will include the visitor in the experiment and redirect them to the corresponding URL.

    optimizelyRedirect.url_mappings.push({
      "origin": "www.optimizely.com/?(\\?.*)?$",
      "destination": "https://beta.optimizely.com/"
    }, {
      "origin": "www.optimizely.com/resources/customer-stories",
      "destination": "https://beta.optimizely.com/happy-customers"
    }


    You can use full origin URLs or regular expressions.

  2. For best results, strive to include all visitors to your original site in the experiment, even if there's no corresponding page on the new site.

    Consider adding one last catch-all mapping rule at the end of the code that redirects visitors to the homepage of your new site, if the page the visitor landed on has no corresponding page on your new site.

    In the code above, this looks like:

    {
      "origin": "www.optimizely.com/.*",
      "destination": "https://beta.optimizely.com/"
    });

4. Create an Audience that targets only visitors who land on a page with mapping

Next, target your experiment so only visitors who land directly on a page that's mapped for a redirect enter the experiment. A visitor who lands on an unmapped page and then navigates to a mapped page won't be included, since seeing your new site mid-session may affect your visitor's experience.

  1. In the Editor, create a new Audience

  2. Drag and drop a Custom JavaScript condition from the panel on the right.

    Paste the following code into the text field of this condition:

optimizelyRedirect.getMappedUrl(window.location.href) !== false

5. Add redirect code to variation JavaScript

Finally, add the redirect code to your variation.

In the variation, click <edit code> to open the Code Editor.

Paste the following code: 

/* _optimizely_redirect=http://example.com/?this_url_loads_in_the_optimizely_editor */
optimizelyRedirect.redirectToMappedUrl(window.location.href);

That's it! You've created a test that compares the different versions of your site, across multiple pages.