Testing different aspects of your website is important, that's why we here at Prismic have made this process easy for you to set up. 

A/B testing with Google Analytics is supported out of the box with every Prismic repository with Experiments. Just follow this guide to learn how to create an experiment.

Note: that you need to be administrator for your repository to access this feature.

 

1. Set up Google Analytics account

The first thing that you will need to do is sign up for Google analytics. There you can follow the instructions to get set up on their side.

Once this is set up you will need to copy the tracking code that they provide and add this to every page of your project. This is done in different ways depending on the development technology that you're using. If you aren't a developer, you will need help from your dev team for this.
 

2. Connect your Google Analytics account to Prismic

In your Prismic repository's settings (the ⚙️ icon in the bottom-left corner of the your repo), go to the 'Experiments' section and click 'Sign in' to connect your G.A. account to Prismic.

Then you will select the website you want to be analyzed from the dropdown list of websites that you have set up in your Google Analytics account.

Once this is done you can move on to the next step.
 

3. Create a new Experiment

Navigate to the 'Experiments' section in the side menu of your repository, this is the icon with the 'Plus' and 'Minus' symbols.

Here you can create your new experiment and give it a name.

 

4. Make the variations for your experiment

Once you've created your experiment you will need to make a variation in one of your documents. Navigate to the desired document, make and save your change(s), then when you publish choose 'Publish it during an experiment variation'.

Then you can you create new a variation or choose from one that already exists. 

By default if you don't add something in the 'Base' selection it will use the live version of the site.
 

5. Set experiment objective

If you go back to the 'Experiments' section can now see the different variations illustrated on the right hand side and you can compare them against each other.

You can now run this variation and select the objective that you want to track from the list of Bounces, Pageviews, Session Duration, Transactions, or Transaction Revenue.

If the statistic you want to track is not on the list, you can create your own custom objective from your Google Analytics account. Once configured, it will appear in the dropdown list for you to select. You can see how to create a custom objective here

Once you've done this you will be presented with the screen where you can track the data based on this objective and the variations.

Note: In your JSON response there will now be a new field 'Experiments' with the ID and Ref of the two variations. Also an 'experiment' will be created in your google analytics account.
 

6. Include the experiments snippet your HTML code

This next part can be a little tricky so take your time. The following code should be present in all pages. The exact way to add this to every page will depend on the framework that you're using. If you aren't a developer, then you will need help from your dev team to add this to your website. 

<script>
  window.prismic = { endpoint: '{your-api-endpoint}' };
  window.googleId = '{googleId}';
</script>
<script>
  {code from google analytics}
</script>
<script src="//static.cdn.prismic.io/prismic.min.js"></script>
<script>prismic.startExperiment(window.googleId);</script>

Once you have added this snippet to your pages you will need to replace anything inside the curly brackets with your own information. Replace {googleId} by the GoogleId of the current experiment & replace {your-api-endpoint} by your API's endpoint.
 

7. Getting the Experiment's GoogleID

The googleId is a property of the Experiment object that can be retrieved from 'experiments' in the API endpoint response. So you will need to retrieve this and set it as a variable from each API request of your website and pass this variable to the above script.
 

8. Generate Access token

Next navigate again to your repo settings, ⚙️. Then to the 'API & Security' section.

In this section under 'Repository security' go to the 'Generate an Access Token' section and enter the 'Application name' and 'Callback URL'. 

This will generate the 'Access Token', make sure you add a token for 'Access to master + releases' and finally add this token when retrieving the API object as explained in the developer documentation.

 

9. Getting the experiment ref

If you're using one of our dev kits, then you can skip this step. If you aren't, then you will need to make sure to query your content using the experiment ref if there is one. Here is some example code for how to retrieve the experiment ref with Javascript.

 

All Done

That's it, congratulations! If you have followed these steps correctly then you have now successfully set up your first Experiment using Prismic & Google Analytics. You will now be able to track the statistics of your test in your Prismic dashboard, well done. 😄 

It might take a couple of days before the experiment has enough data to display the progress. So that if you don't see anything appear right away, don't worry.

Note: You should know in Prismic you can only run one experiment at a time, but with as many variations as you need.

Did this answer your question?