Integrating A/B testing (Google Analytics)

In this tutorial, you will learn how you can easily link your content to experiments by creating a custom selector for Google Analytics Experiments. With the selector, you define what content represents which variant in an experiment and leverage this information to run A/B testing on the live website.

Premium feature

Custom elements require a Professional plan or higher.

Table of contents

    What are Google Analytics Experiments?

    Google Analytics is a tool to measure the performance of your website or application. See Using Google Analytics with Kentico Kontent to learn how to set up Google Analytics on your website. You need to have Google Analytics set up in order to successfully run and measure experiments.

    Google Analytics Experiments is a part of the Google Analytics application that allows you to define, execute, and evaluate A/B tests on your website. For more details, visit the Google Analytics documentation.

    Google Analytics logo

    Linking content to experiments

    By linking content to experiments, you can easily introduce A/B testing for your content.

    In this tutorial, you will:

    • Define an experiment within Google Analytics Experiments.
    • Extend a Kentico Kontent content type with a Google Analytics Experiments selector.
    • Enable Google Analytics API
    • Get context parameters for the selector from Google Analytics.
    • Define variants of a page and link individual variants to experiment variants.
    • Update your website to display variant data based on the experiment context from Google Analytics.

    After performing these steps, you will be able to provide A/B testing capabilities to your marketing team and optimize your website experience.

    Step 1: Define an experiment within Google Analytics

    Before you can apply an experiment to your content, you need to define the experiment and its variants in Google Analytics. Because the data for individual variants of the page will be retrieved from Kentico Kontent, and not via direct modification of the page, you need to follow the guide for client side experiments handled in a browser.

    1. In Google Analytics, navigate to Behavior and then to Experiments.
    2. Create a new experiment.
      • Enter an Experiment name, for example,  Home page A/B test.
      • Choose an Objective, such as Pageviews (or another metric that you want to track with the experiment).
      • Click Next Step.
    3. Define your experiment variants.
      • First variant:
        • URL 0.com (The URL doesn't matter in our case. It just needs to be a valid URL as described in client side experiments)
        • Name for the page – Original
      • Second variant:
        • URL – 1.com
        • Name for the page – Try Premium (or any other description of your variant)
      • Click Next step or create more variants.
    4. Skip the section Setting up your experiment code by clicking Next step. We will handle that part in our website code later in this article.
    5. Under Review and Start, click Start experiment.

    Note that you can set up your experiment and Save for later if you do not want to begin the experiment right away. 

    Step 2: Add the Google Analytics Experiments selector to your Kentico Kontent content type

    In this step, we will extend the Home content type in our sample app with the Audiences selector.

    1. In Kentico Kontent, choose Content models from the app menu.
    2. Open the Home content type.
    3. Add a Custom element.
      • Title – A/B Testing
      • Hosted code URLhttps://kentico.github.io/custom-element-samples/GoogleAnalyticsExperiments/experiment-selector.html
      • Parameterssee the code sample below
    4. Save the content type.

    Because the sample Google Analytics Experiments selector is general and can be used for any Google Analytics project, you need to connect the selector to your project by providing additional configuration. The selector uses the Google Analytics management API and needs several configuration values to narrow the selector scope to the right project and set of experiments.

    Use the following JSON configuration as your Parameters and replace the values, such as <YOUR PROJECT ID>, with the values from your Google Analytics project. If you're unsure what they are, see how to retrieve them in Step 3.

    • JSON
    { "clientId": "<YOUR GOOGLE CLIENT ID>", "accountId": "<YOUR GOOGLE ACCOUNT ID>", "webPropertyId": "<YOUR GOOGLE WEB PROPERTY ID>", "profileId": "<YOUR GOOGLE PROFILE ID>" }
    { "clientId": "<YOUR GOOGLE CLIENT ID>", "accountId": "<YOUR GOOGLE ACCOUNT ID>", "webPropertyId": "<YOUR GOOGLE WEB PROPERTY ID>", "profileId": "<YOUR GOOGLE PROFILE ID>" }

    Feel free to use the credentials from our sample account to test the example.

    • JSON
    { "clientId": "1001658292129-8v0hj6v5d3k6mqfj9ehji21qb01ql50j.apps.googleusercontent.com", "accountId": "135228370", "webPropertyId": "UA-135228370-1", "profileId": "190562962" }
    { "clientId": "1001658292129-8v0hj6v5d3k6mqfj9ehji21qb01ql50j.apps.googleusercontent.com", "accountId": "135228370", "webPropertyId": "UA-135228370-1", "profileId": "190562962" }

    These parameters point the selector to the right data. The user still needs to authenticate with Google through its standard authentication dialog and have access to Google Analytics with read permission to experiments in order to use the experiment selector.

    Step 3: Enable the Google Analytics API

    The Google Analytics Experiments selector needs the Google Analytics API to retrieve the list of experiments and their variants.

    In the Google Cloud Console, navigate to APIs and Services and then to Library.

    Search for Analytics API and select it.

    The screen will indicate whether the Analytics API is enabled or not. If not enabled, click Enable. It may take a couple of moments for the API to enable.

    If the API is already enabled, you do not need to do anything.

    Note that if you need to troubleshoot while setting up the extension, you can try the API endpoint with your configuration in the Google API Explorer.

    Step 4: Get context parameters from Google Analytics

    In order to set up the Google Analytics Experiments selector, you need to get certain parameters from Google Analytics to narrow down the selector scope.

    Google Analytics Client ID

    The following steps depend on the domain you entered in the custom element. If you host the custom element on your own server, use your domain instead of the kentico.github.io domain.

    In Google Cloud Console, navigate to APIs and Services and then to Credentials.

    First, you need to configure the consent screen to comply with Google's Privacy Policy regarding the GDPR and other similar regulations.

    Open the OAuth consent screen tab and configure:

    1. Application name – Kentico Kontent Experiment selector
    2. Scopes for Google APIs ../auth/analytics.readonly
    3. Authorized domains – kentico.github.io 
    4. Save the consent screen.

    If you only evaluate or develop locally, the steps described above may be enough. However, if you want to use a public URL for the custom element, you may need to have your consent screen verified by Google by clicking Submit for verification. If you are not able to configure the above properties, or the consent screen settings state that it should be verified, configure the following steps below in addition to the steps above. 

    1. Application homepage link https://kentico.github.io/custom-element-samples/ (You can enter your own domain. It must be the same as the domain you entered in the custom element.)
    2. Application Privacy Policy linkhttps://kentico.github.io/custom-element-samples/ (You can enter your Privacy Policy page. The domain must be the same domain that you entered in the custom element domain.)
    3. Click Submit for verification and mention the purpose for which you are using the experiment selector.

    Note that it may take a few days for Google to process the verification.

    After you have configured the consent screen, you can proceed to creating credentials for the integration.

    1. Open the Credentials tab.
    2. Create new credentials for the OAuth client ID.
      • Application type – Web application
      • Name – Kentico Kontent Experiment selector
      • Authorized JavaScript origins https://kentico.github.io (You can enter your own domain. It must be the same as the domain you entered in the custom element.)
    3. Click Create.

    Use the Client ID from your newly created credentials for <YOUR GOOGLE CLIENT ID>.

    Google Account ID, Web Property ID, and Profile ID

    The easiest way to find the remaining IDs needed for the Google Analytics Experiments selector is the view selection dialog which appears when you click on the current view name in Google Analytics.

    Use the ID listed under Analytics Accounts for YOUR GOOGLE ACCOUNT ID.

    Use the ID listed under Properties & Apps for YOUR GOOGLE WEB PROPERTY ID.

    Use the ID listed under Views for YOUR GOOGLE WEB PROFILE ID.

    Step 5: Define your variants in Kentico Kontent

    Now that you have extended the content type, you can assign individual content items to the experiment and its variants.

    1. In Kentico Kontent, open Content & Assets from the app menu.
    2. Filter your content types to only the Home type.
    3. Open the Home page content item for editing.
    4. Rename the Home page content item to Home page (Original).
    5. Select the Home page A/B test experiment in the experiment selector.
    6. Select the Original variant in the experiment selector.

    Your Original variant is now defined. In order to provide additional variants, you need to copy the content item and then modify the copy.

    1. In the Home page content item, click More actions and then select Duplicate.
    2. Rename the newly created Home page (Original) (copy) duplicate to Home page (Try Premium).
    3. In the experiment selector, select the Try Premium variant. (You don't need to select the correct experiment as it's already selected for you)
    4. Remove the existing item from the Hero unit element.
    5. Click Add existing items in the Hero unit element.
    6. Filter your content types to only the Hero unit type.
    7. Add an existing item named Home page promotion to the Hero unit element.

    You can change other content on the home page as well if you want to test a larger set of changes, but it is generally advised to test one change at a time to be able to tell the impact of each change and learn more about visitors' behavior.

    The original variant and its copy are completely independent content items. You can find both in your content inventory and further modify them.

    Customizing the selector value format

    Note that the experiment selector used in the previous steps is a sample to demonstrate the possibilities. Feel free to adjust it to your needs and visual requirements or build your own.

    You can find the source code of the experiment selector in a GitHub repository.

    The compiled version used in the above example is in the Custom Element Samples repository.

    The selector stores the following value format in JSON, which it also uses to display the selected experiment and variant upon first load.

    • JSON
    [ "YI5uxeAkRZ-0E1-7oQ5FXg/2", { "experiment": { "id": "YI5uxeAkRZ-0E1-7oQ5FXg", "key": "190562962-3", "name": "Home page A/B test" }, "variant": { "id": "2", "name": "Try Premium" } } ]
    [ "YI5uxeAkRZ-0E1-7oQ5FXg/2", { "experiment": { "id": "YI5uxeAkRZ-0E1-7oQ5FXg", "key": "190562962-3", "name": "Home page A/B test" }, "variant": { "id": "2", "name": "Try Premium" } } ]

    You can use any of those values in both the admin UI and your site. Should you need to extend the fieldset, you can do so simply by customizing the custom element code.

    Notice the first item in the value, which contains a combination of the experiment ID and variant ID, which can be used to filter by this element by a prefix of the value as explained here.

    Step 6: Get the variant index from Google Analytics

    In order to access and maintain the chosen variant from Google Analytics, you need to load the experiment code and call cxApi.chooseVariation(). This method returns the index of the variant that has been chosen for the given client. This will match the variant ID saved by the experiment selector. It also persists the chosen variant so that the given visitor is always presented with the same content.

    The full details of this process together with additional information regarding the live site implementation are available in client side experiments.

    Normally, you would place the code from the Setting up your experiment code section within the experiment configuration statically on the page. But because our sample is a dynamic React website, and may host multiple experiments while still being a single physical page, we need to load this code dynamically.

    See sample code showing how you can implement communication with Google Analytics compatible with React in your website. Most of this code is the above experiment code just rewritten to a plain and async form of loading.

    This code loads the related Google Analytics scripts and provides the index of the chosen variant. As an abstraction, it gives you the async function getVariation(experimentId, experimentKey) method, which returns the index of the chosen variant for the given running experiment. The experiment ID is available in the value saved by the experiment selector.

    Step 7: Load and display the chosen variant on the live site

    The process of detecting the A/B test and loading the correct variant is the following:

    1. Load the first available content item of the Home type. It can be any of the available variants.
    2. Check if it has an experiment selected.
      • If it does, see if the content item is part of an experiment.
    3. If an experiment is selected, retrieve the current variant ID (in our case, with the async getVariation method).
    4. If the variant ID matches the currently loaded variant, keep that content item.
    5. If the variant ID doesn't match, query Kentico Kontent loud for the content item of the Home type with the correct combination of experiment and variant ID in the custom element.

    See complete sample code showing how you can implement A/B testing based on Google Analytics Experiments for your website.

    If you did not start the experiment when you created it in Step 1, be sure to start it before testing.

    Simulate multiple visitors by using multiple browsers, using an anonymous browser window, or deleting cookies between visits. Observe how various variants are served to various visitors by opening the home page multiple times.

    The individual variants differ in the banner image, its text, and its call to action (CTA).

    After you deploy this code and receive traffic on your website, you can observe the metrics in Google Analytics and decide on your next steps.

    When you are done with the A/B testing, you can simply leave the winning variant in the inventory, unassign it from the experiment, and delete the remaining variants.

    What's next?

    In this article, you learned how to link your content to experiments and their variants in order to provide A/B testing on your website.

    The sample experiment selector provides a baseline you can use and further adjust to your needs. Other online marketing solutions may have different endpoints and contracts, but the selector code is easy enough to adjust for other systems.

    You can use a similar approach and build integrations with other online marketing solutions.