Edited at

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

More than 1 year has passed since last update.


ニーズ

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

この記事では、例えば、あるボタンの文言を「資料請求」と「無料で資料請求」で比較するという、

コンテンツレベルのABテストのやり方を記載します。


概要


  • GAウェブテストは chooseVariation という 0, 1 のランダム値を渡すことのためだけに使っています。


  • GTMでは、カスタムHTMLでコンテンツ出し分けを行い、標準のイベント機能で View と Click のカウントを行います。


  • GTMの変数を使って、イベントのラベルなどを動的に変更することで、ABパターンを判別する。


  • 取得したパターンABそれぞれの、View と Click 数をイベントとして取得することで、それぞれのCVRが分かるというストーリーです。


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

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

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


レシピ


  1. ウェブテスト設定

  2. カスタムHTMLで、コンテンツ出し分け部分を書く


    • トリガーを [Dom Ready] で設定する



  3. 変数を設定しておく

  4. Click イベントを設定

  5. View イベントを設定


    • トリガーを [ウィンドウ読み込み] で設定する



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

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

- ページビュー

- DOM Ready

- ウィンドウ読み込み

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


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

これは適当です。:neckbeard: 適当に目標を選択したり、適当に対象サイトのURLを2つ入れたりしてステップをすすめてください。以下のテスト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イベントようのタグを以下のように作成すれば、完了です。

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

お疲れ様でした。:two_men_holding_hands:

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