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

概要

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-.........'});
         `
       }}
     />
   ])
 }
}

追記（2019/12/8）

後述のカスタムイベントのタイミングでテストを開始する場合、アンチフリッカースニペットは必要ないみたいです。
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にします。

デバックする

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

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