
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](https://developers.google.com/optimize/devguides/experiments?technology=ga4)

<hr/>

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.

```jsx
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](https://nextjs.org/docs/advanced-features/custom-document).

```jsx
// _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.**

![https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/link_optimize_rjj7x3.png](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](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/](http://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](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](https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/query_parameter_mvt_bfsoih.png)

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](https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/query_parameter_check_url_pe2jjg.png)

## 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](https://res.cloudinary.com/raufsamestone/image/upload/v1647441336/blog-contents/optimize-ssr/variants.png)

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.](https://support.google.com/optimize/answer/9112930?hl=en&ref_topic=11608623)

![Google optimize personalization](https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/create_personalization_bnm8wi.png)

## Live test

Launch your Nextjs app 

```jsx
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.

![https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/variant_2_zcedur.png](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](https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/variant_1_mn0mnd.png)
  
<hr/>

Thanks for reading. 👋 Don't forget to subscribe me on [Medium](https://raufsamestone.medium.com/subscribe) or [Dev.to](https://dev.to/raufsamestone) 
  
<hr/>

Check the resources from Google Optimize [here](https://support.google.com/optimize/answer/6370723)
