イベント トラッキングを使用した Google アナリティクスでの A/B テスト

Rostyslav Mykhajliw TrueSocialMetrics.com の創設者 ~ 3 分

ご存じのように、デフォルトでは、Google アナリティクスの実験機能は別のページでのみ機能し、広告キャンペーンを開始するときにうまく機能します。したがって、宛先 URL を制御できます。しかし、検索、参照、ソーシャル メディアへの投稿など、トラフィック ソースを制御できない場合はどうすればよいでしょうか。それが主な問題です。しかし、それには簡単な解決策があります。ソリューションには以下が必要です:

• jquery
• jquery.cookie

テストを始めましょう

/ インデックスページにはデフォルトで画像が表示されていますが、訪問者の 50% をビデオに置き換え、それぞれの場合のサインアップ率を測定したいと考えています。 Cookie に割り当てを保存する A/B テスト用の単純な js を作成しました。

関数割り当て(名前、セル) {
    cell = $.cookie('ab-testing-' + name);
    if (セル) セルを返します。
    // 割り当てる
    ランド = Math.random();
    if (rand<0.5) {
        セル = セル[0];
    } それ以外 {
        セル = セル[1];
    }
    $.cookie('ab-testing-' + name, cell, { 有効期限: 90, パス: '/' });
    セルを返します。
}

このコードは、ユーザーの 50% をランダムにテスト セルに割り当て、割り当てを Cookie に保存し、割り当てセル名を返します。 最初のパラメーターは「テスト名」、2 番目のパラメーターはセル名リストです。

使用事例：

割り当て('ImageVsVideo', ['画像', 'ビデオ']); // 画像または動画

50% のケースでページ上の画像を動画に置き換えるには、要素に一意の識別子を追加する必要があります。 名前を付けました: ab-testing-ImageVsVideo。

これで、ロジックを置き換える準備が整いました。結果として vimeo.com にビデオをアップロードしました。変換後、次のエクスポート コードを取得しました。

<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>

私は html5 コードを好みました (ただし、必要に応じて、いつでも前に戻って従来の Flash オブジェクトを使用できます)。

ロジックは単純です。セル名が「Video」に等しい場合、指定されたプレーヤー HTML コードで要素 ID「ab-testing-ImageVsVideo」を更新します。

$(関数(){
    cell = allocation('ImageVsVideo', ['Image', 'Video']);
    if (cell=='ビデオ') {
        html = '<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
        $('#ab-testing-ImageVsVideo').html(html);
    }
});

すべてがうまく機能していますが、目標を追跡できていません。どのテスト バリエーションが勝つかはどうすればわかりますか?

Google アナリティクスには、イベント トラッキングと呼ばれる優れた機能があります。主に、ボタンの押下や一部の ajax アクション追跡など、ページ上のユーザー アクションを追跡するために使用されます。 ただし、テストのセル割り当てを追跡するために使用します。 必須の引数は 2 つあります。カテゴリとアクションです。この場合、すべての a/b テストの「AB-Testing」カテゴリです。 およびアクション "ImageVsVideo-Image" (または ImageVsVideo-Video) を識別子として使用します。 ページの作業スクリプト。

<script type="text/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'ImageVsVideo-' + allocation('ImageVsVideo', ['Image', 'Video'])]);

ランディング ページのソース コードでサンプルを見つけることができます。簡単に使用できるように、割り当て関数もファイル ab-testing.js に入れています。

Google アナリティクス レポートは次のステップです

当初の目標は「サインアップ率」を高めることでしたが、 経済的成果、一般的なコンバージョン率、目標の達成。 そのため、次の指標を選択しました。

• ユニークビジター
• サインアップ (Goal11 Completions)
• サインアップ (Goal11 コンバージョン率)
• 訪問ごとの目標値
• 目標コンバージョン率
• ゴール完了

また、「新規」訪問者と「リピーター」訪問者を分けるのも良いことです。なぜなら、「サインアップ」について話しているときは、ほとんどの場合、新規ユーザーを気にかけているからです。カスタム レポートに移動して、新しい「A/B テスト」を作成しましょう
!しかし、まだ「画像」または「動画」の違いのない完全な訪問リストがあるため、2 つのカスタム セグメントを作成する必要があります。 [アドバンス セグメント] に移動し、[新しいカスタム セグメント] - [画像] を作成します。 検索メトリック「Event Action」に「ImageVsVideo-Image」が含まれています。
「イベント アクション」が「ImageVsVideo-Video」に等しい「ビデオ」セグメントに対して同じことを繰り返します"。

最後に、「画像」と「ビデオ」の両方のセグメントを適用すると、次のように表示されます。

その結果、動画のコンバージョン率は 13% に対して画像の場合は 10% となり、経済的価値は高くなりますが、目標のコンバージョン率は少し低くなります。したがって、より多くの統計が必要です。セカンダリ ディメンションの「トラフィック タイプ」を選択してみましょう。
ダイレクトトラフィックの結果はほぼ同じですが、検索トラフィックの「サインアップ率」と経済価値ははるかに高くなります.しかし、別の見方をすれば、既存ユーザーのコンバージョンは低下しています。すでに当社のウェブサイトにアクセスしたことがある人にとって、「迅速な対応」がより重要であることがわかります。そのため、検索エンジンから来る新規クライアントに「ビデオ」を表示することは理にかなっています。

リンク

• Event Tracking Guide

2013 年 5 月 7 日からの更新

同じページの複数テストのサポートを追加して、「割り当てコード」を更新しました。たとえば、現在のブログ ページでは、2 つのテストがあります。ソースモードでページを開くと、それらが見つかります。

• 2 番目のテストは、"How-it-works" または "Singup" ページへのリンクを含むフォームの下のメッセージです。

完全なコードはここにあります。download 最新バージョンを使用することもできます (特殊な非同期 js loader を使用していることを思い出してください。使用しない場合は、head.ready(function(){ を $( document).ready(function(){.

関数割り当てTestCell（名前、セル）{
    cell = $.cookie('ab-testing-' + name);
    if (セル) セルを返します。
    // 割り当てる
    ランド = Math.random();
    開始 = 0;
    デルタ = 1/cells.length;
    セル = セル[0];
    for (i=0;i<cells.length;i++) {
        if (i*delta<=rand && rand<(i+1)*delta) {
            セル = セル[i];
            壊す;
        }
    }
    $.cookie('ab-testing-' + name, cell, { 有効期限: 90, パス: '/' });
    セルを返します。
}
$(document).ready(function(){
    var AbTestting = {};
    $('.ab-testing').each(関数(インデックス, 要素) {
        test = $(element).attr('data-ab-testing-test');
        cell = $(element).attr('data-ab-testing-cell');
        if (!(AbTestting[test] instanceof Array)) {
            AbTesting[テスト] = [];
        }
        AbTestting[テスト].push(セル);
    });
    // 割り当て
    for (AbTestting でのテスト) {
        割り当て=割り当てTestCell（テスト、AbTestting [テスト]）;
        _gaq.push(['_trackEvent', 'AB-Testing', テスト + '-' + 割り当て, 'ab-testing-'+test+'-'+'割り当て', 0, true]);
        $('.ab-testing').each(関数(インデックス, 要素) {
            _test = $(要素).attr('data-ab-testing-test');
            _cell = $(element).attr('data-ab-testing-cell');
            if (_test!=テスト) return;
            if (_cell!=割り当て) {
                $(要素).非表示();
            }
            $(要素).show();
        });
    }
});

主な違いは、新しいコードは JS でコードを記述する必要がないことです。テストする要素にクラス「ab-testing」を追加し、テスト名とセル名を指定するだけです。 <div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">テスト用コード</div>.

このテストをゼロから適用する実際のサンプルを見てみましょう。

この要素のソース コードは次のようになります。

<div>
  ソーシャル メディアでのプレゼンスを分析して改善する <a href="/how-it-works">今すぐ始める</a>
</div>

最初の段階では、要素をコピーし、メッセージを変更して非表示にする必要があります。

<div>
  ソーシャル メディアでのプレゼンスを分析して改善する <a href="/how-it-works">今すぐ始める</a>
</div>
<div style="display:none;">
  ソーシャル メディアでのプレゼンスを分析して改善する <a href="/signup">今すぐ始める</a>
</div>

ここで、ページを更新しても何も変更されません。テストするリンクを含む 1 つの表示要素と 1 つの非表示要素があります。 次のステップでは、テスト名とセル名を選択する必要があります。私の例では：

• サインアップブログテキスト - テスト名
• 仕組み - 「仕組み」へのリンクを含む最初のブロックのセル名
• サインアップ - 「サインアップ」へのリンクを含む隠しブロックのセル名

また、クラス「ab-testing」を JS のマーカーとして追加します。したがって、完全な作業コードは次のようになります。

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">
  ソーシャル メディアでのプレゼンスを分析して改善する <a href="/how-it-works">今すぐ始める</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="sign-up" style="display:none;">
  ソーシャル メディアでのプレゼンスを分析して改善する <a href="/signup">今すぐ始める</a>
</div>

その結果、ユーザーの 50% には「how-it-works」リンクのある 1 つのブロックが表示され、別の 50% には 2 つ目のブロックが表示されます。

テスト

私のコードは割り当てをユーザーの Cookie に保存しています。つまり、割り当ては 1 回しか行われないため、テストするには、Cookie のないクリーンなブラウザーが必要です。しかし、Google Chrome フィーチャー Incognito Window を使用すると、はるかに単純なソリューションになります。 Cookie なしで、完全にクリアな新しいブラウザ ウィンドウを提供します。その結果、ページを数回開いて、すべてが正常に機能するかどうかを確認できます。