In the server-side UX tests, your code should perform all the tasks that Optimize does in the client-side trial. For example, your code targets audiences and consistently delivers the appropriate variant for each user. You only use the Optimize interface to create experiments, set goals, create variables, and view reports.
More details about Google Optimize Server-side here
In this guide, you will learn how to implement a Google Optimize MVT (Multivariate Test) in your server-side app like Next.js and send your data to Google Analytics 4.
Pre-requirements
- Google Analytics 4
- Google Tag Manager
- Google Optimize
- Your Next.js app
Add Google Tag Manager to your Next.js app
Open your terminal add to create a new next.js app with NPX.
npx create-next-app
If you have already a next.js app, you can create a new file called _document.js and add your GTM scripts to <Head> and <body> components.
More details about the custom documents are here.
// _document.js
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
const GTMID = "GTM-XXXX" // I recommend using .env for this variable.
return (
<Html>
<Head>
<script
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${GTMID}');`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
<noscript
dangerouslySetInnerHTML={{
__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTMID}" height="0" width="0" style="display: none; visibility: hidden;" />`,
}}
/>
</body>
</Html>
);
}
Connect your Google Optimize account to GTM and GA4
Go to Google Optimize, and click Container settings. Link your GA4 property from the measurement section.
And then copy your Optimize Container ID.
Then go to your Google Tag Manager account. Create a new tag, and select Google Optimize. Just paste your Optimize Container ID.
Creating new MVT
Go to your Google Optimize account, and create a new experience
Add your editor page URL
If you are working on your local machine, you can just write simply localhost:3000/ or whatever your host and port name.
Google Optimize editor page URL is trail slash sensitive, so I recommend adding the slashes.
And choose your experience type as Multivariate test.
Audience targeting
You can target your audience with specific variables like URL query parameter, cookie, JS, and more.
In this workshop, we’ll use URL parameters. Add a new Query Key, like mvt.
And you should give a specified parameter that queries like true. And also don’t forget to check your rule, if it's not working you can debug your target variable, before publishing.
Deploy your experiments
Before deployment, check changed sections. To edit your sections, which is Editor Page, you have to use Chrome and Google Optimize extension.
Also, you should check your multivariate combination details in the top section like A1 to B0 or A1 to B1.
And if you don't want separated variants in your experiments, create personalization for that. More details about personalization in here.
Live test
Launch your Nextjs app
yarn dev
Go to http://localhost:3000/?mvt=true
If your experiments work with success, you should see variants A1 to B0 on your landing page.
After a few session changes, you will see that it goes to variant A1 to B1.
Thanks for reading. 👋 Don't forget to subscribe me on Medium or Dev.to
Check the resources from Google Optimize here
Top comments (0)