DEV Community

Berkay
Berkay

Posted on • Originally published at raufsamestone.com

Multivariate testing (MVT) with Google Optimize and Next.js for UX analytics

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/link_optimize_rjj7x3.png

Then go to your Google Tag Manager account. Create a new tag, and select Google Optimize. Just paste your Optimize Container ID.

https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/gtm_optimize_r2okbc.png

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.

https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/create_mtr_cd6obn.png

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.

Optimize parameters 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.

Google Optimize query param checks

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.

Google Optimize MVT variants

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.

Google optimize personalization

Live test

Launch your Nextjs app

yarn dev
Enter fullscreen mode Exit fullscreen mode

Go to http://localhost:3000/?mvt=true

If your experiments work with success, you should see variants A1 to B0 on your landing page.

https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/variant_2_zcedur.png

After a few session changes, you will see that it goes to variant A1 to B1.

https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/variant_1_mn0mnd.png


Thanks for reading. 👋 Don't forget to subscribe me on Medium or Dev.to


Check the resources from Google Optimize here

Top comments (0)