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).
For additional details on how experiments work see the Experiments Feature Reference.
The main steps to running a client-side experiment without redirects are:
- Define the experiment that you want to run.
- Configure the experiment and objectives in Google Analytics.
- 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 visitor 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:
- Sign-in to the Google Analytics web interface and select the view (profile) in which you want to create the experiment.
- Click the Reporting tab
- Expand Content section, then click Experiments.
- If this is your first experiment, click
If you have already created other experiments, click Create experiment above the list of current experiments.
- Choose an experiment objective:
Select or create a goal as the experiment objective. For this example scenario we want to maximize the number of visitors that click on the button that links to the
sf-goal.htmlpage. To measure this "conversion", a URL Destination goal is used.
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.
- Configure your experiment:
Once you've configured the experiment, click Next Step to continue.
- Setting up your experiment code:
Once you have the Experiment ID, click Next Step to continue.
- 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.
For additional details and instructions on configuring an experiment see Run an Experiment (Help Center).
Implement the Experiment
To implement the experiment:
- Prepare the Original Page.
Prepare 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.
Choose a Variation
returning visitors 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
Once the choice has been made for the visitor you can procceed to show the original page or the chosen variation.
Show the Variation
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.
For this example, the code looks like the following:
Send Experiment Values to Google Analytics
When a visitor 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
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
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
method, and then make a tracking call to Google Analytics.
Publish and Run the Experiment
With this implementation, visitors exposed to and included in the experiment will see variations without any redirects.
Tips and Considerations
- After the experiment ends, visitors will be shown the original page, and not a variation.
- 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.