ニーズ

いまのところ、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>

これだけです。これで、ターゲットのボタン内の文言が変更するカスタムHTMLができました。もちろん、DOM操作をして、デザインを変えたりとかもできます。

カスタムHTMLのトリガーを用意する

(本当は、カスタムHTMLを書く前にトリガーを用意しておいたほうが楽な気がしますが、説明のしやすさのため.)

トリガー新規作成から進んで、以下のようにしてください。囲んであるので、わかると思いますが、[DOM Ready] にしておくのがポイントです。名前とか他項目は適当に適切にお願いします。

この「カスタムHTML用のトリガー」を上のカスタムHTMLタグのトリガーとして設定してください。これで、コンテンツ出し分け用カスタムHTMLタグの作成は完了です。

Step3: 変数を設定する

上で、カスタムHTMLが出来たので、あとはViewイベントとClickイベントを作成すれば済むのですが、そのイベントに仕込む変数を用意します。

変数の新規作成から進んで、ずばり以下のようにすればおわりです。CSSセレクタのサンプルとしては、

クラス名が btn で、
href が /request に先頭一致する
a タグ

となる要素（ターゲットのボタン要素がこれのことです）を取得しています。これを変数として用意しておきます。

Step4: Clickイベントの作成

ポイントは、ラベルに上で用意した変数を使います。 {{contents_of_button}} これを使うことで、クリックイベントのラベルが、クリック時の文言に応じて

資料請求
無料で資料請求する

と切り替わってくれるので、幸せになります。

トリガーとかは適当に設定してください。

Step5: Viewイベントの作成

これで終わりになります。

まず、Viewイベント用のトリガーを以下のように作成します。こちらは、「ウィンドウ読み込み」にしておきます。

上のトリガーを用いて、Viewイベントようのタグを以下のように作成すれば、完了です。

以上で、すべてのステップが完了しました。

お疲れ様でした。

これで、ソースに手をいれることなく、GTMとGAを使うことでコンテンツレベルのABテストができました。個人的にはGAウェブテスト機能は特に使ってないので、それも使わずにやる方法を模索したいなぁと思っています。ありがとうございました！

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

ニーズ

概要

レシピ