最近よく耳にする「ABテスト」。なんとなく分かっていても「本当に効果があるの?」とか「実際にやるとしたら面倒なんじゃないの?」なんて言って避けてはいませんか?
今回は簡単な設定で驚きの効果をもたらすABテストのやり方と設定方法について解説いたします。ディレクター&ウェブ担当者の皆様、必見です。
■目次
- ページレイアウトの改善をABテストでスピーディに
- ボタンラベルをA/BテストしてCTR向上!
- フォームの項目数を減らしてみたらCVRは向上する?
- 複数パターンのバナーから最もCTRが高いものを選ぶ
実例紹介:レイアウト改善
ECサイトにおいて、商品詳細ページのレイアウトをどう変更するべきか?という課題に対し、積極的にABテストを行いCTRの10%向上という大きな成果を上げた事例。
>>アイテムページのレイアウト変更で、CTR10%アップ
実例紹介:ボタンラベル変更
メルマガ購読ボタンにおいて、「購読する」なのか「受信する」なのかというラベルの選定をABテストで試してみたら2.5倍近い成果を上げたよ!という驚きの事例。
>>【ABテスト】メルマガ購読ボタンの文言変更:242.8%改善
<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>
/* 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'); } }] });
実例紹介:フォーム項目削減
フォームの項目を実際に4つ減らしてみたら実際のCVRはどのくらい上がるのか?を試した事例。結論からいうと、CVRが「+3.4%」も向上したんだとか。
>>フォーム項目を4つ消したら、CVRはどれだけ上がる?
実例紹介:バナー文言変更
資料請求への誘導バナーにおいて、バナーのデザインをABテストして変更した結果…なんと資料ダウンロード数が4倍に跳ね上がったという事例。羨ましいですね。
>>【ABテスト事例】バナー内文言の変更で資料ダウロード数4倍
<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>
<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>