A/Bテストとは?

A/Bテストとは、異なるパターンのクリエイティブを準備し、それぞれのパターンごとのユーザーの反応を比較することで、どのパターンのクリエイティブが最適であるかを導くための手段です。A/Bテストというと一般的にAパターンとBパターンの2つの比較、と思ってしまいがちですが、パターン数が増えても同じスキームで実施することができることがほとんどです。

似たキーワードとして多変量テストというものがあります。A/Bテストでは変更を加える箇所を1箇所だけに絞っているのに対して、多変量テストでは変更を加える箇所も複数許容します。たとえば、バナーにおいて「3パターンの配色」「CTAボタンのテキストを4パターン」「キャッチコピーのメッセージを2パターン」の組合せをテストするイメージです。この例では最終的な組合せは24パターンでてくるため、より多くのトラフィックを得ないと結果を判断できないため、なかなか実施するのは難しいかと思います。

Google Analyticsのウェブテスト機能のメリット

数パターンを出し分けてそれぞれのパターンごとのコンバージョンを比較するだけであれば、自分で実装できる、と思っている方も多くいると思います。実際、単純にパターンを出し分けてコンバージョンを比較するだけであれば、

  1. 過去に同じA/Bテストを実施したユーザーであれば、そのときのパターンがどっちなのかを取得する
  2. まだA/Bテストを実施していないユーザーであれば、新規にパターンを割り振る
  3. 1または2のステップで割り振られたパターンに対して適切なページを表示する

というフローをプログラムで実装すれば終わりです。2のステップで新規ユーザーに対する割り振りを完全なランダムにしてしまうのであれば、非常に単純に実装できてしまいます。

しかし、ステップ2で完全にランダムに割り振ってしまうと、「すでにテスト中の段階で、パターン1のほうが高い成果を出している」ことがわかっているにもかかわらず、「パターン1とパターン2の表示頻度が均等になってしまう」という事態が発生します。新しくパターンを割り振るときに、「パターン1のほうが高い成果を出している」ことがわかっているのであれば、「パターン1に割り振る比率を高める」ことで、テスト期間中の機会損失を抑えることができます。

この機会損失を抑えるために、新規のユーザーに対して最適なパターンを算出する方法として、多腕バンディット テストという考え方があります(多腕バンディット テストについては、「Google アナリティクス公式ヘルプ - 多腕バンディット テスト」をご覧ください)。多腕バンディットテストの考え方で新規ユーザーに対するパターンの割り振りを決めることで、A/Bテスト中であっても、現時点で成果の出ているパターンを多く割り振ることで、機会損失を最小限に抑えることができます。この多腕バンディットですが、実装には様々なアルゴリズムが存在し、それぞれ性能に優劣があったり、メリット/デメリットがあるのですが、どのアルゴリズムにしても、自分で実装するとなると手間がかかってしまいます。しかし、Google Analyticsのウェブテスト機能では、デフォルトでこの多腕バンディットテストに対応しています。

この多腕バンディットに対応していること、かつ無料で実施できることこそがGoogle Analyticsのウェブテスト機能を利用する最大のメリットと言えます。

多腕バンディットに関する参考サイト

パーツ単位のテストの簡単な実施方法

メリットがあることは分かってもらえたと思いますが、このウェブテストを実施しようと思ってヘルプや他のブログ記事などを探すと、

  • 実施したいパターン分のWebページを複製しなければいけない
  • オリジナルのページにはウェブテストのタグを設置する必要がある(タグマネージャーでは設置できない)
  • 検索エンジンからクローキングと見なされないようにコンテンツの趣旨を変えてはいけない
  • それぞれのWebページ間で検索エンジンから重複コンテンツと見なされないような設定を行う必要がある
  • テスト完了後、不要になったページを削除するためのリダイレクト処理

と面倒そうなことがたくさん書かれており、実施に戸惑っている方も多いと思います。さらに、実施したいパターン分のWebページを複製するとなると、ECサイトのカート投入ボタンのA/Bテストを実施する、など到底できないのではないか?となってしまいます。

でも、ここで紹介する方法を使えば、「パーツ単位の単純なテスト」であれば上記の面倒なことを全てクリアしてGoogle Analyticsのウェブテスト機能を活用することができるようになります。

今回は、このブログで実際に行っているウェブテストの内容を元に紹介します。

このブログで行っているウェブテスト

このブログでは2015年06月13日以降、全ページにおいてウェブテストを実施しています。ウェブテストの実施内容は、「記事コンテンツ内のフォントと行間のサイズ変更」です。

手順紹介

ステップ1:JavaScriptにて、テストパターンを実装する

今回の方法では、ウェブテストのパターンを作成するために、別のページは作成せず、JavaScriptにて、各テストパターンを出し分けます。そのために、各テストパターンを表示するためのJavaScriptを実装する必要が有ります。今回の場合は、デフォルトのパターンの他に、「コンテンツのフォントサイズと行間のサイズを大きくした」パターンが必要になります。JavaScriptで実装すると、

function () {
  jQuery('p').css({ 'font-size': '15px', 'line-height': '27px' });
}

のコードを実行することで、フォントサイズと行間を大きくしたパターンに変更することができます。このあたりは、どのように書けば、テストしたいパターンを作成できるか難しいですが、近くにいるプログラマーの方などに相談してみるとよいと思います。

ステップ2:Google Analytics上でウェブテストの設定を行う

Google Analytics側の設定内容は、他のいろいろな記事に書かれているものとほぼ同じになるので、まずは他の記事や公式ヘルプを参考に設定してみてください。その上で、今回の方法で、「オリジナルのページ」や「パターン1」「パターン2」などのURLを指定する部分に困ってしまいますが、ここに記載するURLは何でも構いません。とりあえずテスト対象のページの正しいURLを「オリジナルのページ」に設定した上で、「パターン1」や「パターン2」には、適当にURLを変更したものを設定してください(オリジナルのページやパターンの間で重複すると登録できないので注意)。「ページ名」については、何でもよいですが、ウェブテストのレポートにも表示されるので、テストするパターン間での違いが分かりやすい名前にするのがよいと思います。

また、設定が完了すると、テスト用のトラッキングコードが出力され、ウェブページ上に設置するように言われますが、ここはこの時点では行わなくて大丈夫です。次以降のステップで行います。

ステップ3:ウェブテストのタグを設置する

ウェブテストのタグを設置しますが、ここでは、Google Analyticsのウェブテスト画面から出力されたタグは使いません。代わりに、下記のようなタグを作成します。タグの実行条件はステップ4でまとめてお話しますので、タグの準備だけこのステップでは行います。

<script src="//www.google-analytics.com/cx/api.js?experiment=ここにウェブテストのIDを入力"></script>
<script type="text/javascript">
  var variations = [
    function () {
      // オリジナル・パターンが選ばれたときに実行するべき処理をここに書く
    },
    function () {
      // パターン1が選ばれたときに実行するべき処理をここに書く
    },
    function () {
      // パターン2が選ばれたときに実行するべき処理をここに書く
    }
  ];

  // cxApi.chooseVariation() で、どのパターンが選ばれたかが返される。
  // 下の1行で、その選ばれたパターンに対応する関数を実行している。
  variations[ cxApi.chooseVariation() ]();
  dataLayer.push({'event': 'ABTestSetupCompleted'});
</script>

ステップ4:各タグの読み込み条件を変更する

上記ステップ3で設置したタグは、テストを実行するページにて実行されるようにトリガーを適切に設定します。そして、Google Analyticsのページビュータグは上記のタグが呼ばれたあとに実行する必要が有ります。上記のタグの最後に、イベント変数に「ABTestSetupCompleted」を設定しているので、Google Analyticsタグの実行条件は、イベント「ABTestSetupCompleted」のトリガーを作成し、それに設定する必要が有ります。ただし、ここで注意が必要なのは、ABテストを実施しないページでは、「ABTestSetupCompleted」イベントが実行されないが、Google Analyticsのページビュータグは実行する必要がある点です。少し設定は複雑になりますが、下記3種のトリガーを作成して、各ルールを調整するのがいいかと思います。

  • ページビュートリガー1:条件はA/Bテストを実施するとき
  • ページビュートリガー2:条件はA/Bテストを実施しないとき
  • カスタムイベントトリガー3:条件は、ABTestSetupCompleted

これであれば、ステップ3で実装したタグは、ページビュートリガー1で実行し、Google Analyticsのページビュータグは、ページビュートリガー2またはカスタムイベントトリガー3で実行するようにすれば問題なく動作すると思います。

ステップ5:動作テストを実施する

Google Analyticsの画面で、ウェブテストの設定を完了し、ウェブテストを開始します。このとき、「テストコードが見つかりません」というメッセージが表示されるかもしれませんが、無視して進めて大丈夫です。

次に、Googleタグマネージャーでコンテナをプレビューモードに設定し、動作を確認します。A/Bテストを実施するページを開き、Google Tag Assistantなどでチェックして、「Experiment ID」(xid)と「Experiment Variant」(xvar)が設定され、Google Analyticsのページビュータグが送信されているかを確認してください。また、A/Bテストを実施しないページでは「Experiment ID」(xid)と「Experiment Variant」(xvar)が設定されずGoogle Analyticsのページビュータグが送信されていることを確認してください。
A/Bテストのパターンをチェックしたい場合は、Cookieを消して、ページを開きなおしてみてください。

ステップ6:タグの公開とデータのチェック

問題なくタグが設定されていることが確認できたら、タグを公開し、A/Bテストの実行を開始します。また、タグの公開後3〜4時間ほど経過したら、再度Google Analyticsのウェブテストの画面をチェックして、問題なくデータが溜まっていることを確認するとよいと思います。

まとめ

今まで、Google Analyticsのウェブテストを使いたかったが、タグマネージャーから設定することができないため、設定が面倒だ、と思っていた方は多いと思います。今回の方法は、少し難しい部分もありますが、慣れてしまえば比較的簡単に実装することができます。

さらに今回の方法の最大のメリットは、サイトのナビゲーションであったり、通販サイトの購入ボタンの色/文言など、サイト内の多くの箇所で使われている共通パーツに対するA/Bテストが可能になる点です。今までの方法であるページ単位のA/Bテストだとセッション数が少なくてテストできなかったような箇所でもこの方法で、全ページに対して同じテストを実施できるようになります。

ぜひ、Google Analyticsのウェブテスト機能を使って、サイトの最適化実施を。