LoginSignup
10
4

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-08

概要

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のインストール診断をすると、アンチフリッカースニペットを埋め込む様推奨されますが、特に問題はありません。
アンチフリッカースニペット.png

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

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にします。
アクティベーションイベント.png

デバックする

パターンを追加したら、正常に動作するかデバックします。
デバック.png
エラーが出なければ完了です。
デバック結果.png

10
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
4