A/B testing using Layer0 Edge Split Testing with Google Optimize Server Side framework

Rishi Raj Jain/Thursday, August 12 2021

This guide describes how to configure A/B Testing with Layer0 and Google Optimize Server Side Experiment & deploy your Next SPA to Layer0. Clone the repo nextjs-layer0-google-server-side-experiment-2 to get the entire setup.

Set up Google Analytics (Universal Analytics)

Follow Google's official guide for creating Analytics for a website (Universal Analytics)

Set up Google Optimize

1. To get started, login to your google optimize, and click on

Create account
.

2. Input an

account name
, and click on
Next

3. Input a

Container name
, and click on
Create

4. To start creating an experience, Input an

experience name
, the url of website to A/B Test upon, and click on
Create
(By default
A/B test
is selected as the experience type)

5. Scroll down, and click on

Link to Analytics
to link the created Google Analytics property.

6. Select the Google Analytics property you want to link with, and click on

Link

7. Make a note of the

Experiment ID

8. Before we run an server-side experiment, we need to create a variant, so click on

Add variant

9. Input the desired

Variant name
(can be anything as the data reported is not matched with the Variant names, but their indices [which by default starts with
0
])

10. After you've add the variant, scroll down and delete the URL rule, pre-populated by Google for you.

11. Click on

Add URL rule
to start creating your own experiment rule

12. Select

equals
as the matching URL rule, and
SERVER_SIDE
as the value for it. Click on
Add
to save the changes.

13. Select the primary objective before you can run the server-side experiment.

14. Click on

Start
to initiate experiment run.

15. Ignore the

Installation not checked
, as we're posting data to Google Analytics by custom snippet as mentioned in the blog below.

Set up Layer0

  1. Follow this guide for deploying a Next.js project with Layer0.

  2. Now, we want to create two deployment environments, and configure A/B split test with Layer0 Console. So, let's start by creating two environments,  

    default
     (initiated by default) and 
    preview
    . To create an environment, click on
    New Environment

  1. Type in your name
    environment name
    , and click on
    CREATE

NOTE: After you're done creating the

preview
environment, deploy the A/B testing versions (one on default, and the other on preview environment) of your website to Layer0.

Configuring A/B Testing with Layer0

This section will walk you through the steps of configuring A/B testing with Layer0.

1. To do so, open the desired environment (here

default
) to A/B Test on, and click on
EDIT

2. Scroll down to

Split Testing
, and click on
Add RULE

3. Click on

ADD DESTINATION
and assign the desired percentages for your A/B test to both the environments (
current
and
preview
). Optionally, you may add further criterion for configuring the A/B test. Then, click on
APPLY
to save the changes.

4. Click on

ACTIVATE

5. Click on

YES, REDPLOY MY SITE NOW
to deploy your changes!

Now you're all set up with A/B Testing on your website. Open the web url assigned to the Layer0 environment on different clients to experience the A/B testing.

Set up Next.js

This section will walk you through how to configure your Next.js

_app.js
to report A/B Testing metrics to Google Analytics (which reflects automatically in Google Optimize)

Set up Next.js to Report A/B Testing Metrics to Google Analytics

To report the A/B testing metrics, we make use of 

layer0_destination
 cookie sent by Layer0 while serving your app. (Make sure that you've successfully configured A/B Testing on Layer0). These steps assume that you've two environments: 
default
 (initiated by default) and 
preview
.

Run the following command inside your project:

npm install js-cookie

and edit _app.js as follows:

// File: _app.js

import { useEffect } from 'react'
import Cookies from 'js-cookie'

const GA_TRACKING_ID= '' // Your GA TRACKING ID here
const experimentID= ''  // Your experiment ID here

function addAnalytics(i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
}

// Get variant based on layer0_destination cookie
function getVariant(destination) {
    // Create your own environments' map here
    let variantMap = {
    default: 0, // variant codes are indexed from 0 and so on, 0 being for the original
    __layer0__env__preview: 1, // first variant (an environment named `preview`)
    }
    return variantMap[destination]
}

function MyApp({ Component, pageProps }) {

    useEffect(() => {
    // Get the variant index
    let variant = getVariant(Cookies.get('layer0_destination'))
    // Report it to Google Analytics
    addAnalytics(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga')
    ga('create', GA_TRACKING_ID, 'auto')
    ga('set', 'exp', `${experimentID}.${variant}`)
    ga('send', 'pageview')
    }, []);

    return <Component {...pageProps} />
}

Conclusion

In this tutorial, we learned how to initiate A/B Testing with Google Optimize, configure A/B testing on Layer0, and integrate the analytics with google optimize, Next.js and Layer0 to start serving and visualizing the server-side experiment.

Write a comment

Email will remain confidential.