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
Follow this guide for deploying a Next.js project with Layer0.
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
- 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.
