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

2017年10月15日

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

目次（ページ内リンク）

1 今回の設定の内容
2 人単位に出し分けるにはコントールグループを使う必要あり
3 GoogleアナリティクスでA/Bテストを測定するメリット
4 HTMLに埋め込むについて
5 Rtoaster設定
6 動作確認

今回の設定の内容

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

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

[pb]Aパターン(表示あり)
Bパターン(表示あり)
パターン(表示なし)[/pb]

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

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

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

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 -->