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

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

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

テストを始めましょう

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

リンク

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 なしで、完全にクリアな新しいブラウザ ウィンドウを提供します。その結果、ページを数回開いて、すべてが正常に機能するかどうかを確認できます。



ソーシャルメディア分析を揺るがす準備ができたら

TrueSocialMetricsを試してみてください!


トライアルを開始
クレジットカードは必要ありません。






読み続けて




うそをつく: ソーシャル メディアの悪い指標
ソーシャル メディア分析を台無しにする最善の方法は、不適切な指標を選択するか、それらを誤って使用することです。これが最善の方法です。


Google アナリティクスのマルチデバイス トラッキングおよび測定プロトコル
今日、マーケティングと分析は、PC 時代の後、新たな課題に直面しています。マルチデバイストラッキングです。顧客はスマートフォン、ラップトップ、自宅の PC を使用しており、当社の分析ソフトウェアはそれらを異なるユーザー セッションとしてカウントします。


ビジネスにソーシャル メディア分析ツールが必要な理由
ソーシャル メディア マーケティングの取り組みの効果について、実際にどれだけ知っていますか?トレンドを理解していますか?あなたのコンテンツがターゲットオーディエンスにどのように影響するか知っていますか?さらに、ターゲットオーディエンスが何を必要としているのかを本当に伝えることができますか?また、競合他社についてはどうでしょうか。他社が提供するコンテンツと比較して、自社のコンテンツがどのように認識されているかを認識していますか?ここで、ソーシャル メディア分析ツールを使用して、これらすべての質問に対する詳細な洞察を得ることができます。


ソーシャル メディアでのプレゼンスを向上させるための 30 日間のアドバイス
ソーシャル メディアの統計情報を向上させる方法を探している場合、最善の方法は実験を続け、新しいことを試すことです。今月試してみて、何が効果的かを確認できる、小さくて簡単な実験と成長のハックを 30 個集めました。それらはすべて低コストで実装が簡単ですが、ほんのわずかな調整でも大きな改善につながる可能性があります.