概要
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
にします。