SPA(Gatsby)を使い、Google OptimizeでA/Bテストをする方法

2019/12/09

概要

SPAはネイティブアプリと遜色ない体験設計が出来ますが、非同期通信の特性上Google OptimizeでA/Bテストをするには、特殊なやり方が必要になります。
やり方さえわかれば簡単なのですが、日本語でまとめられたドキュメントがなかったので、自分で作ることにしました。

GTM(Google Tag Manager)を使ってOptimizeを配信するやり方は、Google公式から非推奨となっているので、直接コードを埋め込みます。

Gatsbyをインストールする

npm install -g gatsby-cli

Gatsbyでサイトを作る

gatsby new [site name] https://github.com/gatsbyjs/gatsby-starter-default

Google Optimizeの準備をする

オプティマイズスニペットを、gatsby-ssr.jsに記載して、Google Optimizeを使う準備をします。
Gatsbyならプラグインがありますが、Optimizeから警告が出たので、直接コードを埋め込みます。

import React from 'react';

export const onRenderBody = ({ setHeadComponents }) => {
  if (process.env.NODE_ENV === `production`) {
    setHeadComponents([
      // オプティマイズスニペット
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-........."></script>,
      <script
        dangerouslySetInnerHTML={{
          __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'UA-.........', { 'optimize_id': 'GTM-.........'});
          `
        }}
      />
    ])
  }
}

後述のカスタムイベントのタイミングでテストを開始する場合、アンチフリッカースニペットは必要ありません。
Optimizeのインストール診断をすると、アンチフリッカースニペットを埋め込む様推奨されますが、特に問題はありません。

スニペット

テストの有効化のタイミングを変更する

SPAの場合、デフォルトの設定であるページ読み込み時のままテストを行うと、ページ読み込み時に一瞬テスト結果が反映され、その後JSでテスト結果が上書きされてしまいます。
そうなると、Optimize上では50/50ですが、実際はオリジナルのデザインの描画が増えます。上書きされた場合でも、変更したBパターンとして記録されるので、数値に誤差が出ます。

また、SPAは遷移が発生しないので、ページ読み込み時のままの設定だと、遷移した際テスト結果が反映されません。

それでは困るので、有効化のタイミングをカスタムイベント発火後に設定します。

カスタムイベントを埋め込む

dataLayer.push({'event': 'optimize.activate'});

上記のコードを、テストを行いたいページに埋め込みます。

import React, { useEffect } from "react";

const IndexPage = ({ location }) => {
   useEffect(() => {
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push({'event': 'optimize.activate'});
   }, [location.pathname])
   return (
     <div>...</div>
   )
}
export default IndexPage;

Google Optimize側の設定

エクスペリエンスを作成したら、テストの有効化のタイミングをoptimize.activeにします。

イベント

デバックする

パターンを追加したら、正常に動作するかデバックします。

デバッグ

エラーが出なければ完了です。

end

お問い合わせはこちら