More than 5 years have passed since last update.

[ABテスト] GAウェブテストとGTMを使って、コンテンツレベルのABテストをする方法

Last updated at 2016-10-28Posted at 2016-10-28

ニーズ

いまのところ、GAウェブテストでは異なる２つのURLに対して簡単なABテストを行えるものだと思います。

この記事では、例えば、あるボタンの文言を「資料請求」と「無料で資料請求」で比較するという、
コンテンツレベルのABテストのやり方を記載します。

概要

GAウェブテストは chooseVariation という 0, 1 のランダム値を渡すことのためだけに使っています。
GTMでは、カスタムHTMLでコンテンツ出し分けを行い、標準のイベント機能で View と Click のカウントを行います。
GTMの変数を使って、イベントのラベルなどを動的に変更することで、ABパターンを判別する。
取得したパターンABそれぞれの、View と Click 数をイベントとして取得することで、それぞれのCVRが分かるというストーリーです。

ちょっと、サンプルコードと文言は異なりますが、できあがりイメージは以下のようになります。（GoogleAnalyticsのイベント画面）

（なので、正直あまりGAウェブテストの機能はつかってません）

..以下ステップ by ステップで見ていきましょう。

レシピ

ウェブテスト設定
カスタムHTMLで、コンテンツ出し分け部分を書く
- トリガーを [Dom Ready] で設定する
変数を設定しておく
Click イベントを設定
View イベントを設定
- トリガーを [ウィンドウ読み込み] で設定する

コンテンツ出し分けのタイミングと、Viewイベントのタイミング（トリガー）が、微妙に異なるのがミソです。

トリガーは以下の順番で発動するので

ページビュー
DOM Ready
ウィンドウ読み込み

Viewイベントを送るタイミングを、カスタムHTMLのコンテンツ出し分けの後にします。

Step1: GAウェブテストの設定

これは適当です。適当に目標を選択したり、適当に対象サイトのURLを２つ入れたりしてステップをすすめてください。以下のテストIDだけを取得できれば大丈夫です。テストも実施中にしちゃってください。

Step2: カスタムHTMLでコンテンツ出し分け

ココから後は、すべてGTMで行います。まずは、新規タグ作成で、カスタムHTMLを選択します。そして、以下のような内容を記載します。

カスタムHTML

<script src="//www.google-analytics.com/cx/api.js?experiment=ここにテストID"></script>
<script>
  var chosenVariation = cxApi.chooseVariation();
  var pageVariations = [
    function() {
      $('.target_btn').html('資料請求'); // ここはデフォルトで文言設定されている場合は、この1行は無しで構わない。分かりやすさのため記載してます。
    },
    function() {
      $('.target_btn').html('無料で資料請求する');
    }
  ];
  $(document).ready(
    pageVariations[chosenVariation]
  );
</script>