Google Analytics

Content Experiments Without Redirects (Browser-only implementation)

Pete Frisella, Google Analytics Developer Advocate – June 2013

This document describes how to run a Content Experiment without redirects and handle all variation serving in the browser (client-side).

  1. Introduction
  2. Overview
  3.  
  4. Define the Experiment
  5. Configure the Experiment
  1. Implement the Experiment
    1. Prepare the Original Page
    2. Choose a Variation
    3. Show the Variation
    4. Send Experiment Values to Google Analytics
  2.  
  3. Publish and Run the Experiment
  4.  
  5. Tips and Considerations
More

Introduction

The original Content Experiments JavaScript snippet made testing easy to implement. To keep things simple and consistent for all publishers, the snippet causes a page redirect which, however brief, can take away from the user experience in certain cases. With the Content Experiments API, testing changes to content without redirects is possible and easy to implement.

This guide uses a simple implementation example to show you how to run an experiment without redirects. This is accomplished by modifying the page in-place, using JavaScript.

For additional details on how experiments work see the Experiments Feature Reference.

Overview

The main steps to running a client-side experiment without redirects are:

  1. Define the experiment that you want to run.
  2. Configure the experiment and objectives in Google Analytics.
  3. Implement the experiment variations using HTML, CSS, and JavaScript.
  4. Publish changes and Run the Experiment.

The example in this doc will describe how to setup an experiment to test changes to an image, heading text, button color, and button text.

Define the Experiment

The first step in any experiment is to define the original page, the variations to test, and any other relevant parameters. This example experiment will test changes to the banner image, sub-heading, and button to determine whether a particular variation outperforms the original version. The objective or goal in this example is simply to get the user to click on the button and continue to the next page.

The original page and variations are:

Now that the variations have been defined, the next step is to to configure the experiment in Google Analytics.

Configure the Experiment and Objective in Google Analytics

Once you've defined the experiment and variations you'd like to test, configure the experiment using the Google Analytics web interface or Management API. For this example, the web interface is used. The steps to configure the experiment are:

  1. Sign-in to the Google Analytics web interface and select the view (profile) in which you want to create the experiment.
  2. Click the Reporting tab
  3. Expand Content section, then click Experiments.
  4. If this is your first experiment, click START EXPERIMENTING.
    If you have already created other experiments, click Create experiment above the list of current experiments.
  5. Choose an experiment objective:

    Select or create a goal as the experiment objective. For this example scenario we want to maximize the number of users that click on the button that links to the sf-goal.html page. To measure this "conversion", a URL Destination goal is used.

    Setting the experiment objective in Google Analytics
    Setting the experiment objective using the Google Analytics web interface.

    For details on using goals see Set up and edit Goals (Help Center). Once you've chosen an experiment objective, click Next Step to continue.

  6. Configure your experiment:

    For this example scenario, variations will be shown to the user by modifying the page using JavaScript and not by redirecting them to a different variation page. A name and URL is required for each variation but you can use any value you want for the URL of the variation since it is not applicable for this type of implementation.

    Setting the experiment variations in Google Analytics
    Setting the experiment variations. The URL is required but not applicable or used for this type of implementation.

    Once you've configured the experiment, click Next Step to continue.

  7. Setting up your experiment code:

    Since we'll be modifying the page and showing variations using JavaScript, the experiment code provided by the web interface will not be used. Instead, get the Experiment ID which will be used in the next step to Implement the Experiment. You can find the experiment ID by clicking on the Manually insert the code button.

    Getting the Experiment ID from the web interface.
    The Experiment ID is the only information needed to continue and implement the experiment. The JavaScript snippet is not used.

    Once you have the Experiment ID, click Next Step to continue.

  8. Review and start:

    Click Start Experiment or alternatively you can start the experiment after you've completed the implementation of the variations. If you receive a validation error, click Yes to ignore and continue.

    Dialog box indicating there were validation errors. Ignore and
        click Yes to continue.
    Validation errors can be safely ignored since URLs are not required for this implementation.

For additional details and instructions on configuring an experiment see Run an Experiment (Help Center).

Once you've configured an experiment and have an Experiment ID, the next step is to implement the JavaScript that will modify the original page and show experiment variations to users.

Implement the Experiment

After you get the Experiment ID, the next step is to make any required changes to the HTML and CSS of the original page and add some logic using JavaScript.

To implement the experiment:

Prepare the Original Page

Before implementing the JavaScript to show the variations, first prepare the HTML and make any necessary CSS changes for the original page.

For our example scenario, the banner image, sub-heading, and button elements will be modified to show four different variations. Therefore, each of those elements have an ID attribute. Also, one of the variations shows a different button color which is styled using CSS, so a new class is defined in the stylesheet for this particular variation.

Once any necessary changes have been made to the original page and CSS, the JavaScript can be implemented to handle the logic of modifying the page for a chosen variation.

Choose a Variation

When a user lands on the original page of the experiment you need to check if they have previously been exposed to the experiment. Next, determine if they are or should be included in the experiment. Finally, decide whether to show them the original or a variation. All of these decisions can be handled by Google Analytics when you use the Content Experiments JavaScript API client.

The JavaScript API client makes it easy to determine what to do for new and returning users exposed to the experiment. Simply load the client and specify the Experiment ID that you obtained when configuring the experiment. Then use the chooseVariation method which will return a number that represents the index of the chosen variation, where 0 is the original variation. The index value returned corresponds to the list of variations configured for the experiment.

The JavaScript code to choose a variation for an experiment looks like:

<!-- Load the Content Experiment JavaScript API client for the experiment -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script>

<script>
  // Ask Google Analytics which variation to show the user.
  var chosenVariation = cxApi.chooseVariation();
</script>

Once the choice has been made for the user you can procceed to show the original page or the chosen variation.

Show the Variation

After the choice of which variation to show the user has been made, you then you need to make changes to the page using JavaScript to modify the DOM and CSS of the page.

The code below uses a view and controller approach to choose and show a variation. The view code is an array where the index corresponds to a function that will modify the page. The controller selects the correct view for the chosen variation and executes it.

Also, we want to make sure that the DOM is loaded before attempting to modify the page. The JQuery JavaScript library is used to simplify this for cross-browser compatability.

For this example, the code looks like the following:

<!-- Load the JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
  function() {},  // Original: Do nothing. This will render the default HTML.
  function() {    // Variation 1: Banner Image
    document.getElementById('banner').src = 'bay-bridge.jpg';
  },
  function() {    // Variation 2: Sub-heading Text
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
  },
  function() {    // Variation 3: Button Text
    document.getElementById('button').innerHTML = 'Learn more';
  },
  function() {    // Variation 4: Button Color
    document.getElementById('button').className = 'button button-blue';
  }
];

// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(
  // Execute the chosen view
  pageVariations[chosenVariation]
);
</script>

Now that that the JavaScript for each variation has been implemented, the next step is to ensure that experiment values are propertly sent to Google Analytics for each visit to the experiment.

Send Experiment Values to Google Analytics

When a user is exposed to an experiment and the appropriate variation (or original) is shown you need to make sure experiment data is sent to Google Analytics. Experiment data is sent to Google Analytics as parameters attached to other hits, like pageviews, events, or ecommerce transactions. Therefore the variation needs to be chosen before a tracking call is made in order for that value to be sent to Google Analytics.

The easiest way to do this is to place the default tracking code for either ga.js or analytics.js after the JavaScript that loads the Content Experiments JavaScript client and calls the chooseVariation method. This way the experiment values will be set by the chooseVariation method and will get sent by the pageview hit that is part of the default tracking code for Google Analytics.

If you can't guarantee the library load order or that a hit will be sent after the the chooseVariation method is called, then you can send another hit to Google Analytics (for example a non-interaction event) to make sure the values are sent. The steps for this case would be to load the Content Experiments JavaScript client, call the chooseVariation method, and then make a tracking call to Google Analytics.

Publish and Run the Experiment

Once you've configured the experiment and have implemented the JavaScript on the original page you, the next step is to ensure that the experiment is running and make the changes live.

With this implementation, users exposed to and included in the experiment will see variations without any redirects.

After the experiment has ended you can make changes to the HTML and CSS of the original page and remove any experiment related JavaScript from the page.

Tips and Considerations

  • After the experiment ends, users will be shown the original page, and not a variation.
  • Google Analytics Experiments are not limited to testing of simply content and styling. It's possible to test anything client side such as algorithms, loading external libraries from different CDNs, adding/removing delays, etc. You are only limited by what is possible using JavaScript.
  • Predefined metrics such as time on site, pageviews, revenue, etc. can be used for experiment objectives instead of pre-configured goals.
  • Experiments can be created, updated, and deleted programmatically using the Management API. This is useful if you want to fully automate experiments. See the Experiments Feature Reference and Management API.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.