Google Optimize導入とA/Bテスト実施のポイント

フロントエンジニアの苅部です。

medibaシステム本部では一部サービスのA/BテストをGoogle Optimize(以下Optimize)で実施しております。
先日Optimizeの一般利用が可能になったようですので、これから初めてA/Bテストを実施する方に向けて、使用感を共有できたらと思います。

Optimizeの特徴

1. 無償版でも十分使える

無償版でもほとんどの機能が利用できるため、予算のないプロジェクトでもすぐに実践的なA/Bテストが開始できます。
実際にOptimizeを使ってA/Bテストを運用していますが、無償版で機能が制限されているというよりも、有償版にすることでGoogle Analyticsのオーディエンスデータを活用できる という印象を受けました。

ツールが評価できない段階で数十万円/月の予算を確保するのはなかなか難しいと思うので、いったん無償版で小さく始められる事は大きいと思います。

今のところ、ヒット数の制限もありません。(2017年5月現在)　　

・Optimize vs. Optimize 360 - Optimize Help
・Optimize - Free Beta Hit Limit - The Google Advertiser Community

2. 表示遅延を最小限に抑えられる

JavaScriptを使って非同期的なA/Bテストを実施する場合には、表示速度へのマイナス影響を考慮する必要があります。

サードパーティーのJavaScriptを同期的に読み込む場合 DNSLookup, 3wayHandshake, Responseの流れが完了するまではレンダーツリーの構築をブロッキングすることになります。つまり描画がネットワークのレイテンシに左右されるため、RTTの長いモバイルネットワークでは顕著に体感速度に影響がでます。
この点で、Optimizeでは以下のような配慮がされています。

- 非同期読み込み
JavaScriptを非同期に読み込み、テストデータの返却 or タイムアウトでHTMLの透過を解除する処理になるため、レンダーツリー構築への影響を最小限に抑えます。

- TCPコネクションの節約
Google Analyticsのプラグインのため、google-analytics.comと同一のTCPコネクションでテスト内容も返却することになります。

- JavaScriptの最適化
JavaScriptのレスポンスは動的生成されるため、返却される内容が最適化されています。
例えばテスト対象外のユーザーには、テストデータをレスポンスに含めることはないのでオーバーヘッドが最小限に抑えられています。

A/Bテストツールの体感速度へのマイナス影響を考えると、クリティカルレンダリングパスやネットワークでのボトルネックを減らせる事はメリットが大きいと思います。

実際に他のプラットフォームの同期Scriptと比較してみたところ、SpeedIndex値の中央値で10%ほどの差が確認できました。
(パフォーマンス計測ではwebpagetestを利用)

・オプティマイズとページの読み込み速度 - Optimize ヘルプ
・クリティカル レンダリング パスのパフォーマンスを分析する | Web | Google Developers

3. Google Analyticsの延長で利用できる

- 汎用性や将来の拡張性

Google Analyticsを使いこなしている人は多く、Google Analyticsの延長で使えるOptimizeは、学習コストやコミュニケーションの面でメリットがあると感じています。

インターフェイスは他のGoogle製品とも統一されているため、慣れた操作感で扱いやすいです。
そして今後はDataStudioとの接続など、他のGoogle製品との連携も期待できるのではないでしょうか。

- 実装の手軽さ

すでにGoogle Analyticsを利用している場合には新たなJS読み込みをしなくても、以下のような形でプラグインの指定を1行追加して任意でJavaScriptのスニペットを追加するだけでOptimizeと連携できます。

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-NNNNNNNN-N', 'auto');
  // 以下のrequireの1行を追加する
  ga('require', 'GTM-NNNNNN');
  // ------------------------
  ga('send', 'pageview');
</script>

- イーコマース連携

Google Analytics側でイーコマース機能を使っている場合には追加設定なくコンバージョン連携できます。

テスト作成画面でのゴール設定では、TransactionとRevenueが選択できるようになります。

そしてレポート画面では個々のテスト結果をトランザクション・収益ベースで比較できます。

Google Analyticsとは異なりOptimizeではコンバージョンに統計モデルを利用していて、95%信頼区間・50%信頼区間・中央値が表示されます。
信頼区間は、どのくらいの確率でどのくらいの効果が見込まれるかが判断できるため、P値を使って帰無仮説を却下する検定方法よりも得られる情報が多いと思います。

A/Bテストの成果として重視されるのはクリック数が増加したことよりも[KPIに貢献できたかどうか]だと思っています。
そういう意味で、コンバージョンとしてトランザクション数や収益額を用いることで、より本質的なA/Bテストが可能になるのではないでしょうか。

※ 備考
・トランザクションをコンバージョンとして実施するテストで統計的に有意な差を出すためには、相当数のコンバージョンか、明らかに大きな差のあるテストを実施する必要があると思われます。

・オプティマイズレポートとアナリティクスレポートの違い - Optimize ヘルプ

- オーディエンスデータを利用したターゲティング(Optimize360)

有償版(Optimize360)に限定されますが、Google Analytics上でユーザーリストを作成して、そのユーザーリストを対象にターゲティングする事ができます。
例えば、

  • 特定の商品カテゴリをよく見ている人
  • コンバージョンの回数が[N]の人
  • コンバージョンへの近さが[N]の人（セッションの品質）

といったセグメントをGoogle Analyticsで作成することで、ユーザーごとに最適なバリエーションでテストできるようになります。

[どのバリエーションに割り振られたか]といった値も自動的にディメンションに入りますので、バリエーションごとでセグメントを分けて深く分析できる ようになります。

つまりOptimize360とGoogle Analyics360を連携させることで、A/Bテストでのターゲティングと、レポーティングでのセグメンテーションをセットで考える事ができるようになります。

ツール導入やA/Bテスト運用のポイント

1. デザインの反映はフロントエンジニアで

A/Bテストプラットフォームを利用する事のメリットに[スピード感]があると思いますが、デザイン反映にあたってはCSS/JavaScriptへの理解・動的な値/非同期処理への配慮、また実機での確実なテスト確認が求められます。
そのためデザイン実装はフロントエンジニアが行い、スピード感と共に安全性を担保する必要があります。

誰でも簡単に編集できるという事は、誰でも簡単に壊せるということでもありますので、細心の注意を払って作業した方がいいと思います。

2. A/Aテストを実施する

テスト対象のページにおいては一度、[同じデザインパターンを複数]用意して2週間程度A/Aテストを実施することをオススメします。

例えばテスト対象が想定していない偏り方をすることもあると思いますし、ツールの問題で有意差が正しく判定できないかもしれません。

そのため、A/Aテストを実施して数値がどの程度の期間で平均に回帰していくか、数値の誤差がどの程度想定されるかを事前に把握できると良いと思います。

3. OptimizeはTagManagerからは配信しない

TagManager経由でOptimize利用することも可能ですが、表示遅延の問題があるためGoogleは推奨していないようです。

例えばTagManager経由でanalytics.jsを配信する場合、

  • 1) TagManagerへリクエスト
  • 2) TagManagerからanalytics.jsのタグが返却
  • 3) analytics.jsをリクエスト

といった流れで1)〜2)がレイテンシとなり、描画に関わるOptimizeが遅延することで表示遅延につながります。

そのためTagManagerを経由せず、可能な限り早い段階(headタグ付近)でanaltyics.jsの記述を書いた方がよさそうです。

・Serve Optimize via Google Tag Manager - Optimize Help

4. オリジナルデザインの描画に注意する

A/Bテストのデータは非同期で渡されるため、レスポンスが遅延すると先にオリジナルのデザインが反映される事があります。
これを避けるため、Optimizeでは以下のようなPageHidingSnippetが用意されています。

<style scoped="scoped">.async-hide { opacity: 0 !important} </style><script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-XXXXXX':true});</script>

このSnippetによってテスト返却されるまで or タイムアウトになるまではhtmlタグの透過度が100%となり、オリジナルの描画を防ぐ事ができます。

※プログレッシブな描画ではなくなるめ、体感速度は若干落ちるかもしれません。

5. ツールの理解を深める

Googleやリセラーと契約せず、無償版で利用する場合は自身で問題を解決するしかありません。 また社内からの問い合わせも集中してしまいますので、本格的に進める場合にはOptimizeやGoogle Analyticsの深い理解が必要になると思います。

Googleだけあってヘルプやフォーラムが充実していますので、大抵の問題は自身で解決する事はできると思います。

OptimizeにはFeedBack機能もあるので、万が一問題が発生した場合にはこれを使ってスクリーンショット付きで報告するのも良いと思います。

6. データ分析力を身につける

A/Bテストでは[勝ち/負け]といった言葉が使われる事がありますが、A/Bテストの結果はあくまで統計的な確率であり[100%の勝ち or 100%の負け]ではないと思っています。
ミスリードを防いだり説明責任を果たすためにも、基礎的な統計やデータ分析を理解して、ツールが出した数値を鵜呑みにせず、最終的に人が判断できる状態が望ましいと思います。

私自身はというと、Optimize・Google Analytics・有意差検定の説明はできますが、ベイズ統計の概要だったりOptimizeの統計モデルを把握できていないので、ざっくりでも理解していきたいなと。。

実際に導入・運用まで進めてみた感想

テストの運用までこぎ着けても、A/Bテストで成果を出すには多くの知見(技術/ノウハウ/文化)が必要だと感じています。

A/Bテストの実施を検討する場合にはツールありきではなく、KPIと目的を明確にして、そのために何が必要か考えてからツール選定すると良いと思います。
A/Bテスト自体は目的ではなく手段であって、KPIへ繋がる成果を出すことが目的ですし、グロースハックの文化を熟成していくことも大事です。

ただ細かい事を考えていても何も始まらないので、7割いけると思ったら、ツール先行でまずは走り出してしまうのがいいと思っています。

A/Bテストには[ツール導入/理解][データ分析力][成果]の3つの壁があると思っていて、1つめの壁は確実にOptimizeに優位性があると思います。

そしてGoogle Analyticsと連携できる無償のツールというところで、今A/Bテストを始めるならOptimizeをオススメしたいです。