初心者でも出来る！Googleアナリティクス「A/Bテスト」設定マニュアル

2013/11/25

最近よく耳にする「ABテスト」。なんとなく分かっていても「本当に効果があるの？」とか「実際にやるとしたら面倒なんじゃないの？」なんて言って避けてはいませんか？

今回は簡単な設定で驚きの効果をもたらすABテストのやり方と設定方法について解説いたします。ディレクター＆ウェブ担当者の皆様、必見です。

■目次

ページレイアウトの改善をABテストでスピーディに

ボタンラベルをA/BテストしてCTR向上！

フォームの項目数を減らしてみたらCVRは向上する？

複数パターンのバナーから最もCTRが高いものを選ぶ

ページレイアウトの改善をABテストでスピーディに

設定難易度：

使える度：

サイトを運営していると誰もが考える「競合のあのレイアウトいいよなぁ…ウチでやったら…」という思いつき。
せっかくなので試してみましょう。Googleアナリティクスなら簡単です。

実例紹介：レイアウト改善
ECサイトにおいて、商品詳細ページのレイアウトをどう変更するべきか？という課題に対し、積極的にABテストを行いCTRの10%向上という大きな成果を上げた事例。
>>アイテムページのレイアウト変更で、CTR10%アップ

実際の設定方法

標準レポートの「行動＞ウェブテスト」を選択し、以下の項目をセットしていきましょう。

オリジナルページ（元になるページ）のURL
テスト名称（例：20131125_商品詳細ABテスト）
テスト目的（コンバージョン設定してある目標を選択）
テスト対象トラフィック（デフォルトは100％なので任意で）
パターンの登録（何個でも登録できます）

設定が完了すると以下のような感じでタグが作成されます。

このタグをオリジナル＆テスト用ページの<head>開始タグの直後に貼り付ければ完成。

あとは表示するHTMLの内容をGoogle側が勝手に(ユーザーごと)に切り替えてくれるので、レポートが上がってくるまでしばし待つだけ。

どっちのページがよりコンバージョンに最適か？が非常に明確にわかるようになりますよ。

参照：
・アイテムページのレイアウト変更で、CTR10%アップ
・料金を記載するとコンバージョン率アップ？

ボタンラベルをA/BテストしてCTR向上！

設定難易度：

使える度：

問い合わせボタンや購入ボタン、メルマガ登録ボタンなど、サイト内にあれこれ存在するボタン、「このボタンラベルで本当に良いんだっけ？」を調べるときにもABテストが有効です。

実例紹介：ボタンラベル変更
メルマガ購読ボタンにおいて、「購読する」なのか「受信する」なのかというラベルの選定をABテストで試してみたら2.5倍近い成果を上げたよ！という驚きの事例。
>>【ABテスト】メルマガ購読ボタンの文言変更:242.8％改善

実際の設定方法

この事例では「Optimizely」という有料ABテストツールを使っていますが、無料でもなんとかなります。そう Googleアナリティクスならね。

まずはjQuery（1.x系でも2.x系でもOK）をダウンロードしてアップ
続いて「easyAB.js」をダウンロードしてきてアップ

ボタン表示エリアに以下のHTMLを挿入（旧GA.js）

<button class="btn btn-success btn-large"
          id="purchase-button"
          onclick="_gaq.push(['_trackEvent',
              'Purchase actions',
              'Purchase']);">
    <span class="book-adjective">ボタンラベルA</span>
  </button>

ユニバーサルアナリティクスの場合はこっちを挿入

<button class="btn btn-success btn-large"
          id="purchase-button"
          onclick="ga('send', 'event', 'Purchase actions', 'Purchase');">
    <span class="book-adjective">ボタンラベルA</span>
  </button>

JSで変更する箇所を指定し、変更するボタンラベルテキストを設定

/* set an Analytics custom var on the slot 1 */
$('.book-adjective').easyab({
  'slot': 1
  'name': 'gs-book-adjective',
  'alternatives': [{
    'alternative': 'ボタンラベルB'
  }]
});
 
/* set an Analytics custom var on the slot 2 */
$('#purchase-button').easyab({
  'slot': 2
  'name': 'gs-purchase-button',
  'alternatives': [{
    'alternative':
      function($this) {
        $this
          .removeClass('btn-success')
          .addClass('btn-primary');
      }
  }]
});

設定が完了すると以下のような感じでGoogleアナリティクスの「行動＞イベント」から該当ボタンのどっちが押されているか確認できます。

テスト対象トラフィックはデフォルト50％となり。設定したページのURLに「#!dev」を追加してリロードするとボタンの切り替えテストが可能です。

フォームの項目数を減らしてみたらCVRは向上する？

設定難易度：

使える度：

フォームは短いほうがいい。それは分かっていても、いざフォームの項目を削ろうとすると中々勇気がいるものです。「減らしたらどうなるんだろう？」もABテストでこっそり試しておきましょう。

実例紹介：フォーム項目削減
フォームの項目を実際に4つ減らしてみたら実際のCVRはどのくらい上がるのか？を試した事例。結論からいうと、CVRが「+3.4％」も向上したんだとか。
>>フォーム項目を4つ消したら、CVRはどれだけ上がる？

実際の設定方法

この事例で使っているツールはイマイチよくわかりませんが、このテストもGoogleアナリティクスで実現可能です。しかも割と簡単です。

項目数が少ないバージョンのフォームを別ファイルで作る
（通常版：form/input.php なら、form/input_short.php など）
Googleアナリティクスの「Webテスト」で通常フォームURLとテストフォームURLを登録
テスト目的（コンバージョン設定してある目標）を選択
テスト対象トラフィックを50％程度に指定

これで設定完了。フォームなど影響範囲の大きなテストの場合、対象トラフィック数を全体の半分くらいに設定しておいた方がケガが少なくて済みます。

複数パターンのバナーから最もCTRが高いものを選ぶ

設定難易度：

使える度：

ECに限らず、多くのサイト運営者を悩ます「どっちのバナーにしようかなー」問題。実際に試してみてユーザーに聞けばいいじゃない！というわけで王道ですがこの項目も押さえておきます。

実例紹介：バナー文言変更
資料請求への誘導バナーにおいて、バナーのデザインをABテストして変更した結果…なんと資料ダウンロード数が4倍に跳ね上がったという事例。羨ましいですね。

>>【ABテスト事例】バナー内文言の変更で資料ダウロード数4倍

実際の設定方法

実例として紹介しているページではどんなツールを使ったのかは言及がありませんが、画像バナーの切り替え調査くらいなら直接JSで書いてしまっても大丈夫です。

まずは試したいバナーを用意する

バナー掲出位置にJSを設置（旧ga.jsの場合）

<script>
jmp = new Array();
img = new Array();
ga = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "バナー0のリンク先";
jmp[1] = "バナー1のリンク先";
jmp[2] = "バナー2のリンク先";
jmp[3] = "バナー3のリンク先";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "バナー0の画像パス";
img[1] = "バナー1の画像パス";
img[2] = "バナー2の画像パス";
img[3] = "バナー3の画像パス";
// イベントトラッキング(数字はそれぞれのバナーと対応)
ga[0] = ' onClick="javascript: _gaq.push([\'_trackEvent\', \'banner_test\',\'click\', \'banner0\'])"';
ga[1] = ' onClick="javascript: _gaq.push([\'_trackEvent\', \'banner_test\',\'click\', \'banner1\'])"';
ga[2] = ' onClick="javascript: _gaq.push([\'_trackEvent\', \'banner_test\',\'click\', \'banner2\'])"';
ga[3] = ' onClick="javascript: _gaq.push([\'_trackEvent\', \'banner_test\',\'click\', \'banner3\'])"';
n = Math.floor(Math.random()*jmp.length);
document.write('<a href="'+jmp[n]+'" target="_blank"' + ' rel="nofollow"' + ga[n] + '>');
document.write('<img src="' + img[n] + '" border="0" />');
document.write('</a>');
</script>

Universal Analyticsの場合以下をバナー掲出位置に設置

<script>
jmp = new Array();
img = new Array();
ga = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "バナー0のリンク先";
jmp[1] = "バナー1のリンク先";
jmp[2] = "バナー2のリンク先";
jmp[3] = "バナー3のリンク先";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "バナー0の画像パス";
img[1] = "バナー1の画像パス";
img[2] = "バナー2の画像パス";
img[3] = "バナー3の画像パス";
// イベントトラッキング(数字はそれぞれのバナーと対応)
ga[0] = ' onClick="javascript: ga(\'send\', \'event\', \'banner_test\', \'click\', \'banner0\')"';
ga[1] = ' onClick="javascript: ga(\'send\', \'event\', \'banner_test\', \'click\', \'banner1\')"';
ga[2] = ' onClick="javascript: ga(\'send\', \'event\', \'banner_test\', \'click\', \'banner2\')"';
ga[3] = ' onClick="javascript: ga(\'send\', \'event\', \'banner_test\', \'click\', \'banner3\')"';
n = Math.floor(Math.random()*jmp.length);
document.write('<a href="'+jmp[n]+'" target="_blank"' + ' rel="nofollow"' + ga[n] + '>');
document.write('<img src="' + img[n] + '" border="0" />');
document.write('</a>');
</script>

これで設定完了です。あとは計測がスタートされれば、各バナーの実績がGoogleアナリティクスの「行動＞上位のイベント」などのレポートで確認できます。

参考事例ページのABテスト事例として掲載されているバナーと、現在ページフッターで使われているバナーがまた違うというのが面白いですね。

まとめと解説

最近追加されたGoogleアナリティクスのウェブテスト機能は、確かに簡単だしレポートも分かりやすい。のですが、どうしてもその仕様上「複数のページを試す」という事に特化してしまっています。

別にそれが悪いというわけでは無いのですが、他にもテストの方法っていくつかあるよ。という内容でした。

パーツ単位でA/Bパターンを試す場合、あるいはラベル一つのパターンを考える場合など。時と場合によってテストの手法を選んで行けるよう、まずは興味を持った所から試してみてはいかがでしょうか？

（編集/執筆：中村健太）