Googleアナリティクス活用:ページ内A/Bテストをする方法

ウェブテスト2

こんにちは。Googleアナリティクスラブのカグア!です。

Googleアナリティクスのウェブテストって、URL単位じゃないとできないから使いづらいなあ、と思っている方はいませんか?

なんと公式ページに、ページ内のボタンやテキストなど、オブジェクト単位でA/Bテストする方法が書いてありましたので、ご紹介します。

実際試しましたけど、実装もすごい簡単でしたよ。

追記:2017年2月8日 GTM実装しているのならば、Googleオプティマイズとの組み合わせが、もはや最強かもしれません。
>>Googleオプティマイズを使えたのでざっくり解説!時代はGGOP

関連記事
>>A/Bテストの失敗事例、テストすること自体が有効という思い込み

GoogleアナリティクスのA/Bテストとは

テストを作成

正式にはウェブテストという名称です。Googleアナリティクスのレポート内の行動>ウェブテスト にあります。

ランディングページなど、ページ単位でA/Bテストテストするぶんには、「テストを作成」からすぐに始められます。

ウェブテストの始め方(設定)

あらかじめ、オリジナルのページを用意します。そして、ページ内容を変えた検証したいデザインのページを、別のURLで用意します。

1.行動>ウェブテスト「テストを作成」

「テストを作成」とクリックし、実行の詳細を設定します。あらかじめ目標設定(登録完了など)をしておくと効率的です。
ウェブテスト2

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”としておきます。

切り替わるとき若干元画像がちらつくことがありますが、気になる場合はヘッダー部分などで、あらかじめ画像をキャッシュ先読みしておくと良い感じです。

詳しくは公式ヘルプにてどうぞ。

>>Content Experiments Without Redirects (Browser-only implementation)   |   Analytics Feature-Specific Resources|Google Developers

A/Bテスト結果はこんな感じ

ウェブテスト

A/Bテストの結果です。ふつうのウェブテストと同じようにレポートされました。

ただ、画像の場合、WordPressで画像表示を遅らせるプラグインを入れていたり、キャッシュ系をいれてたりすると、もしかしたら、差し替わらないかもしれません。

>>Lazy Load(画像の遅延読み込み)を実装する方法

ただ、タイミングなどもっとシビアかなあと思ったのですが、ふつうにコンソールにも出せたので、イベント変数とかいろいろ入れられるんじゃないかと思います。
コンソールにも出た

あとは結果が出て、たとえばオリジナルよりもパターン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テストの教科書 | 野口 竜司

A/Bテストの教科書 | 野口 竜司 | 本 | Amazon.co.jp
Amazonで詳しく見る

しかし野口さん、こんな本も書いてたのですかー、書いてるなあ。

・ ・ ・ ・ ・

>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

WordPressプラグインも作ってるところ。