こんにちは。Googleアナリティクスラブのカグア!です。
Googleアナリティクスのウェブテストって、URL単位じゃないとできないから使いづらいなあ、と思っている方はいませんか?
なんと公式ページに、ページ内のボタンやテキストなど、オブジェクト単位でA/Bテストする方法が書いてありましたので、ご紹介します。
実際試しましたけど、実装もすごい簡単でしたよ。
追記:2017年2月8日 GTM実装しているのならば、Googleオプティマイズとの組み合わせが、もはや最強かもしれません。
>>Googleオプティマイズを使えたのでざっくり解説!時代はGGOP
関連記事
>>A/Bテストの失敗事例、テストすること自体が有効という思い込み
この記事の目次
GoogleアナリティクスのA/Bテストとは
正式にはウェブテストという名称です。Googleアナリティクスのレポート内の行動>ウェブテスト にあります。
ランディングページなど、ページ単位でA/Bテストテストするぶんには、「テストを作成」からすぐに始められます。
ウェブテストの始め方(設定)
あらかじめ、オリジナルのページを用意します。そして、ページ内容を変えた検証したいデザインのページを、別のURLで用意します。
1.行動>ウェブテスト「テストを作成」
「テストを作成」とクリックし、実行の詳細を設定します。あらかじめ目標設定(登録完了など)をしておくと効率的です。
2.URLの入力
次の設定で、通常はオリジナルページのURLと、テストパターンのURLを入れるのですが、ここは何でも良いです。公式ヘルプには、1.com ,2.com ,3.com なんて書いてあります。ようはテストしたいパターンの個数はちゃんと合わせてねってことみたい。
3.テストIDを発行してスタート
「手動でコードを挿入」としますとjavascriptコードが表示されます。ただ、これは使いません。その下のテストIDだけ、コピっておきましょう。
最後に、「テストを開始」させておいてください。これで準備は完了です。まずは、箱をつくっておく、という感じです。
設定のよりこまかな意味はこちらが詳しいです。
>>Google AnalyticsでABテストをやってみる | Tips Note
テストしたいページにコードを貼る
あとは、テストしたいページ内にjavascriptのコードを貼り付けます。
ページ内A/Bテストの仕組み
A/Bテストしたいページに、通常のGoogleアナリティクスのトラッキングコードとは別に、本文内に上図のように2つコードを追加します。
1.ウェブテストのパターン発生用javascript
2.パターンを差し替える用のjQueryとJS
GoogleアナリティクスのA/Bテスト用JSは、Variationの変数を吐き出してくれる役割となります。
コードの実装
コードは、オリジナルの上部にはりつけるJSと、それより下に貼り付けるJSとにわかれます。
<script src="//www.google-analytics.com/cx/api.js?experiment=ウェブテストID"></script> <script>var chosenVariation = cxApi.chooseVariation();</script>
jQueryはロードされていれば不要かとも思いますがいちおう。
<script src="jquery.min.js"></script> <script> var pageVariations = [ function() {}, function() { document.getElementById('banner').src='パターンA画像URL'; }]; $(document).ready( pageVariations[chosenVariation] ); </script>
0のときは何もしないので{}です。1のときは、パターンAの画像差し替えますので、あらかじめオリジナル画像のIMGタグにはid=”banner”としておきます。
切り替わるとき若干元画像がちらつくことがありますが、気になる場合はヘッダー部分などで、あらかじめ画像をキャッシュ先読みしておくと良い感じです。
詳しくは公式ヘルプにてどうぞ。
A/Bテスト結果はこんな感じ
A/Bテストの結果です。ふつうのウェブテストと同じようにレポートされました。
ただ、画像の場合、WordPressで画像表示を遅らせるプラグインを入れていたり、キャッシュ系をいれてたりすると、もしかしたら、差し替わらないかもしれません。
ただ、タイミングなどもっとシビアかなあと思ったのですが、ふつうにコンソールにも出せたので、イベント変数とかいろいろ入れられるんじゃないかと思います。
あとは結果が出て、たとえばオリジナルよりもパターンAのほうがコンバージョンしてたら、ウェブテスト機能で差し替えるのはストップして、実際にハードコーディングして、差し替えておくのが良いでしょう。
ウェブテスト機能が自動調整してくれるのですが、都度jQueryで差し替える仕組みなので、スッキリさせたほうが良いかなと。
まとめ~A/Bテストの留意点
というわけで、Googleアナリティクスのウェブテスト機能でも、ようはGoogleアナリティクスが吐き出してるテストパターン値をチェックすれば、多変量解析っぽいページ内A/Bテストができる、ということでした。
ただ、その読み方は注意が必要だったり、ある程度ゴールに近いところでないと精度が微妙だったりと、運用には気をつけましょう。シンプルなのをたくさん回すのが一番かと思います。
というわけで、以下参考になりそうなエントリーです。他にもありましたら、ぜひお教えください。
困ったときの評価基準。
>>アナグラム株式会社 | そのABテストの判断は本当に正しいのか?
リアルでも細かくセグメントして試せるという。
>>日本郵便がひそかにやっていたサービスが熱い!DMのリーチ確率が上がる画期的なサービスとは? – 働き者ブログ
Googleタグマネージャで実施する。
>>GoogleAnalytics – 訪問別ページ数を改善させるA/Bテストを実施する方法 – Qiita
キャッチプラス言葉というベタが一番という。
>>≡ ←ハンバーガーメニューのデザインでクリック率は違う(2014年のA/Bテストの結果から)
仮説検証の時間、スマホだと1週間。
>>クックパッド流UIの作り方 – takeshi nagayama’s blog
事例まとめ。
>>簡単なA/Bテストでランディングページの売上を倍増させる6つの方法
リブセンスの鉄板事例。すべてのWeb担当者は読みたい。1日に2~3テスト回す。
>>登録数2倍にしてと言われた時の正しい対処法
A/Bテストの教科書 | 野口 竜司
しかし野口さん、こんな本も書いてたのですかー、書いてるなあ。
・ ・ ・ ・ ・
>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です