Googleアナリティクスでページ内のA/Bテストをする方法
こんにちは。Googleアナリティクスラブのカグア！です。
Googleアナリティクスのウェブテストって、URL単位じゃないとできないから使いづらいなあ、と思っている方はいませんか？
なんと公式ページに、ページ内のボタンやテキストなど、オブジェクト単位で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テストの判断は本当に正しいのか？
リアルでも細かくセグメントして試せるという。
＞＞日本郵便がひそかにやっていたサービスが熱い！ＤＭのリーチ確率が上がる画期的なサービスとは？ – 働き者ブログ
Googleタグマネージャで実施する。
＞＞GoogleAnalytics – 訪問別ページ数を改善させるA/Bテストを実施する方法 – Qiita
キャッチプラス言葉というベタが一番という。
＞＞≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
仮説検証の時間、スマホだと1週間。
＞＞クックパッド流UIの作り方 – takeshi nagayama’s blog
事例まとめ。
＞＞簡単なA/Bテストでランディングページの売上を倍増させる6つの方法
リブセンスの鉄板事例。すべてのWeb担当者は読みたい。1日に2～3テスト回す。
＞＞登録数2倍にしてと言われた時の正しい対処法
部長、その勘はズレてます! 「A/Bテスト」最強のウェブマーケティングツールで会社の意思決定が変わる: ダン シロカー, ピート クーメン, 栗木 さつき: 本