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

# ニーズ

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

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

![ab1.png](https://qiita-image-store.s3.amazonaws.com/0/45822/5192dd89-f4e1-acb5-630d-918a45d74259.png)



# 概要

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

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

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

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

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

![スクリーンショット 2016-10-28 16.38.52.png](https://qiita-image-store.s3.amazonaws.com/0/45822/98bfd4dc-a74d-843c-3714-324916cccf6f.png)


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


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

# レシピ

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


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

トリガーは以下の順番で発動するので
- ページビュー
- DOM Ready
- ウィンドウ読み込み

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



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

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

![ ab2.png](https://qiita-image-store.s3.amazonaws.com/0/45822/0ce65e9e-4e58-c910-8adf-1e7a1c01416d.png)


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

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

```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] にしておくのがポイントです。名前とか他項目は適当に適切にお願いします。

![ab3.png](https://qiita-image-store.s3.amazonaws.com/0/45822/fed010c5-1636-0c3d-e9d5-9f99cfd7629e.png)

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


# Step3: 変数を設定する

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

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

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

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

![スクリーンショット 2016-10-28 16.19.49.png](https://qiita-image-store.s3.amazonaws.com/0/45822/959b0b13-68fd-b6f2-108a-eba9e019c7ef.png)


# Step4: Clickイベントの作成

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

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

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

![ab_click.png](https://qiita-image-store.s3.amazonaws.com/0/45822/efdc24c5-cfcb-13ba-cf13-ce9802af77f7.png)

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


# Step5: Viewイベントの作成

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

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

![ab_view.png](https://qiita-image-store.s3.amazonaws.com/0/45822/82486562-6d68-b8c1-8b93-2e86d9cf62f3.png)

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


![ab_last.png](https://qiita-image-store.s3.amazonaws.com/0/45822/af07c85f-08cf-a4c6-c888-d75f5c12009f.png)


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



お疲れ様でした。:two_men_holding_hands:

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