[Googleアナリティクス] Rtoasterで表示されたバナーをGAで計測する方法

[Googleアナリティクス×Rtoaster] A/Bテストで各パターンのCV状況を確認する方法をご紹介します。

今回の設定の内容

キャンペーンページで、A/Bパターンのバナーを出し分ける場合を想定します。
Rtoaster標準の効果測定レポートでも十分ですが、CVユーザーの行動を分析には、
各パターンが表示されたユーザーにフラグ(イベント)を立てて、分析できるようにします。

具体的には、ページを読み込んだら、以下のイベントを発生させるようにします。

Aパターン(表示あり)
Bパターン(表示あり)
パターン(表示なし)

人単位に出し分けるにはコントールグループを使う必要あり

RtoasterでA/Bテストでコントロールグループを設定する場合、
レコメンド設定のコントールグループにチェックを入れるだけで可能です。
このチェックにより、ユーザー単位で出し分けをコントロールすることが可能です。
(コントロールグループとは、効果を比較するために、あえて施策を実行しないグループ)

ただ、セッション単位、表示単位で出し分けするには、コンテンツを2つ登録することで可能です。
この方法は、ここでは割愛します。

GoogleアナリティクスでA/Bテストを測定するメリット

・表示数、クリック数、CV数などがGoogleアナリティクスで確認することが可能
(Rtoaster標準では精度が低め)
・ユーザーフロー、閲覧ページ、複数のコンバージョンなどを細かく条件(セグメント)を使って追うことができる。

HTMLに埋め込むについて

①Googleアナリティクス トラッキングコード
Googleアナリティクスの基本コードです。ヘッダーに設置します。

②Rtoaster基本コード
Rtoasterのjsを読み込むコードです。
ヘッダー部分に記述します。

実際のタグ

<script type="text/javascript" src="//rt.rtoaster.jp/Rtoaster.js"></script>
<script type="text/javascript">
Rtoaster.init("RTA-XXXXXXXXX");
Rtoaster.track();
</script>

③レコメンドエリアタグ
出し分けを行う部分のタグです。IDを設定します。
バナーを出し分けル部分に記述します。

実際のタグ

<div id="pattern_bnr_1"></div>
<div id="pattern_bnr_2"></div>

④Rtoasterレコメンドコード
出し分け箇所(ID)を指定するコードです。
最後の出し分け箇所(ID)の直後にまとめて記載します。

実際のタグ

<script type="text/javascript">
Rtoaster.recommendNow("pattern_bnr_1","pattern_bnr_2");
</script>

⑤Rtoaster.flush
Rtoaster読み込み完了後に実行するコードです。
フッター部分が理想です。少なくとも、GAトラッキングコードの後に記述します。

実際のタグ

<script type="text/javascript">
//Rtoaster読み込み完了時
Rtoaster._flush = Rtoaster.flush;
Rtoaster.flush = function (p)
{
    Rtoaster._flush(p);
    if (!p)
    {
        console.log("Rtoaster Ready");
        if (typeof (var1) != "undefined")
        {
            if (typeof (var2) == "undefined") {
                var2 = "(表示なし)";
            }
            var3 = var1 + var2;
            ga('send', 'event', 'ABtest', document.URL, var3);
            console.log(var3);
        }
    }
};
</script>

Rtoaster設定

1.コンテンツ管理 > Webレコメンドコンテンツ設定

Webレコメンドコンテンツ名:ABテスト対象者 > 登録コンテンツ:ABテスト対象者

実際のタグ

<script type="text/javascript">
var1 = "ABテスト対象者";console.log("Rtoaster:ABテスト対象者");
</script>

Webレコメンドコンテンツ名:ABパターン > 登録コンテンツ:Aパターン

実際のタグ

<script type="text/javascript">
var2 = "(Aパターン)";console.log("Rtoaster:(Aパターン)");
</script>
<!-- バナーHTML記述部分 -->
<img src="" />
<!-- バナーHTML記述部分 end -->

Webレコメンドコンテンツ名:ABパターン > 登録コンテンツ:Bパターン

実際のタグ

<script type="text/javascript">
var2 = "(Bパターン)";console.log("Rtoaster:(Bパターン)");
</script>
<!-- バナーHTML記述部分 -->
<img src="" />
<!-- バナーHTML記述部分 end -->

2.レコメンド管理>Webレコメンド設定

レコメンド場所名:pattern_bnr_1
Webレコメンドコンテンツ:ABテスト対象者
コントロール群なしにします。
条件は、とりあえず総ページビューが1PV以上

レコメンド場所名:pattern_bnr_2
Webレコメンドコンテンツ:ABパターン
コントロール群を設定し、比率を入力します。
条件は、とりあえず総ページビューが1PV以上

動作確認

Google Chromeの開発モード(F12キー)からConsoleを表示し、「console.log」を確認します。

正常に動作していると、2つの出力が表示されます。

1.Rtoaster.flushが動作したら「Rtoaster Ready」が出力します。
2.バナーを取得して、該当バナー状況を出力します。

Console画面:Aパターン
Image

Console画面:Bパターン
Image

Console画面:表示なし
Image

Googleアナリティクスのリアルタイムで正常に計測されていることを確認します。

Googleアナリティクス>リアルタイム>イベント

xxxx

あなたにオススメ(Amazon)

あなたにオススメ(楽天)