Next.jsでGoogle Optmizeを使いABテストを実施する方法

Next.jsでGoogle Optmizeを利用できるようにしたかったのですが、想定以上に困ったので、Next.jsでGoogle Optmizeを使えるようにする方法を紹介します。

Next.jsではプリレンダリングという便利な機能があり、これがあることでHTMLが事前に生成され、次の画面に遷移する際もページのロードなしにページ遷移が可能になります。

これはストレスなくページ遷移ができるので、UXの観点からは良いのですが、これがあるために、ページ遷移自体が認識されなくOptmizeでABテストが実行できなくなったりします。そのため、GAのような設定やOptimizeなどの外部ツールを使う場合は注意が必要です。

それでは、Next.jsでのOptmizeの実装方法を紹介します。実は簡単で3ステップで導入できます。

Next.jsでのGoogle Optmizeの設定方法

Next.jsにGoogle Analyticsを導入する方法でも紹介したやり方とほぼ同じやり方で、GAとOptmizeを設定します。 configで設定する際にoptimize_idも設定するのを忘れないでください。

const GoogleAnalyticsWithOptimize = ({ trackingId, optimizeId }) => {
  const trackingURL = ''
  return (
    <>
      <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} />

      <script
        dangerouslySetInnerHTML={{
          __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${trackingId}', {'optimize_id': '${optimizeId}'});
          `,
        }}
      />
    </>
  )
}

export default function App({children}) {
 const uaTrackingId = 'UA-xxxxxxx-x'
 const optimizeId='OPT-xxxxxx'
  return (
    <>
      <Head>
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        {process.env.NODE_ENV == 'production' && <GoogleAnalyticsWithOptimize trackingId={uaTrackingId} optimizeId={optimizeId}/>}
      </Head>
      <body>
       {children}
      </body>
    </>
  )
}

GAとOptmizeの設定

Headに入れたら、対象となるページでuseEffectを使い、 dataLayerにeventを送り、このイベントを基にOptimizeでの設定を行います。

テストする対象ページでの設定

Next.jsではプリレンダリングによりページ遷移が認識されなく、 Optmizeで通常の設定だとうまくいきません。

そこでuseEffectを使いdataLayerでoptimize.activateというイベントを発火させそれをテストする際に使うようにします。具体的には下記のようにして、イベントを発火させてください。イベントの値は違う値にしても大丈夫です。

さっきのコードに以下のようなものを追加してください。

import { useRouter } from "next/router";
import { useEffect } from "react";
const GoogleAnalyticsWithOptimize = ({ trackingId, optimizeId }) => {
  const trackingURL = ''
  return (
    <>
      <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} />

      <script
        dangerouslySetInnerHTML={{
          __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${trackingId}', {'optimize_id': '${optimizeId}'});
          `,
        }}
      />
    </>
  )
}

export default function App({children}) {
  const router = useRouter()
 const uaTrackingId = 'UA-xxxxxxx-x'
 const optimizeId='OPT-xxxxxx'

  useEffect(() => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: "optimize.activate" });
  }, [router.pathName]);


  return (
    <>
      <Head>
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        {process.env.NODE_ENV == 'production' && <GoogleAnalyticsWithOptimize trackingId={uaTrackingId} optimizeId={optimizeId}/>}
      </Head>
      <body>
       {children}
      </body>
    </>
  )
}

Google Optimizeでの設定

最後に、Google Optmizeでは一番下にある、アクティベーションイベントのところを変更し、

下記のようにカスタムイベントを選択し、アクティベーション条件をページの読み込みから、カスタムイベントのoptimize.activateが発火されたらに変更します。

これで発火ができるようになります！デバッグする際は、プレビューのところにあるデバッグを選択して、実際に動くかどうかを確認してみてください。

参考: General problems with Google Optimize in React / Next.js

参考 Whats the trick to adding Google Optimize? #18991