GAとGTMを駆使してＡ/Ｂテストする方法

こんな方向け

• 検証期間を同じにして、Ａ/Ｂテストを行いたい
• 対象となるGoogleアナリティクスのビューでUser ID を有効にしているため、Google オプティマイズが使えない

やれること

• ボタンのＡ/Ｂテスト
• ファーストビューのＡ/Ｂテスト

など

前提条件

• Googleアナリティクスが導入済みであること
• GTMが導入済みであること

やりかた

手順は４つです。

1. Ａ/Ｂテストしたい部分のＨＴＭＬを、テストパターンの個数ぶん書く
2. ランダムで出しわける部分、ＨＴＭＬを書き替える部分をjQueryで書く
3. 書いたjQueryをGTMに登録する
4. ＧＴＭでGoogleアナリティクスにイベントを送信する

ここでは、ボタンのＡ/Ｂテストを想定して、例を紹介します

以降は、下記ボタンがページにある想定で説明を進めます。

<div id="abcd-button">
	<a target="_blank" href="ページＵＲＬ">
		<img src="ボタン画像パス.png">
	</a>
</div>

１．Ａ/Ｂテストしたい部分のＨＴＭＬを、テストパターン数分だけ書く

下記２つを書き分けたＨＴＭＬを用意してください

• idの値
• ボタン画像

テストパターンＡのＨＴＭＬ

<div>
	<a target="_blank" href="ページＵＲＬ" id="abcd-button-abtest-a" class="abcd-button-abtest">
		<img src="Ａパターンのボタン画像パス.png">
	</a>
</div>

テストパターンＢのＨＴＭＬ

<div>
	<a target="_blank" href="ページＵＲＬ" id="abcd-button-abtest-b" class="abcd-button-abtest">
		<img src="Ｂパターンのボタン画像パス.png">
	</a>
</div>

２．ランダムで出しわける部分、ＨＴＭＬを書き替える部分をjQueryで書く

<script>
	$(function() {
		//手順１で作成したテストパターンのＨＴＭＬを変数に代入します
		var htmlA = '';
		var htmlB = '';
		//テストパターンのＨＴＭＬを代入した変数を配列にします
		var testList = [htmlA,htmlB]
		//テストパターンの中からランダムで１つ選びます
		var quantity = testList.length;
		while (quantity) {
				var j = Math.floor( Math.random() * quantity );
				var t = testList[--quantity];
				testList[quantity] = testList[j];
				testList[j] = t;
			}
		//spliceの値は右の値をパターン数から１個引いた値を入れてください
		//今回は２パターンのテストなので、2-1=1となり、１になります
		testList.splice(1,1);
		var abtest = testList.join('');
		//オリジナルのボタンのＩＤ名を値に入れます
		var $content = $('#abcd-button');
		//ランダムで１つ選んだものを、オリジナルと差し替えます
		$content.replaceWith(abtest);
	});
</script>

##３．書いたjQueryをGTMに登録する

下記手順で、ＧＴＭに新規タグを登録します。

1. タグ新規作成
2. タグタイプで「カスタムHTML」を選択
3. HTMLの入力欄に、手順２で作成したスクリプトを貼り付ける
4. トリガーを新規作成
5. トリガータイプで「ページビュー」を選択
6. トリガーの発生場所で「一部のページビュー」を選択
7. 「Page URL」「等しい」を選択し、値はボタンがあるページのＵＲＬを入力
8. トリガーを保存する
9. タグを保存する

##４．ＧＴＭでGoogleアナリティクスにイベントを送信する
下記手順で、ＧＴＭに新規タグを登録します。
テストの個数分タグを作成します。

1. タグ新規作成
2. タグタイプで「Google アナリティクス: ユニバーサル アナリティクス」を選択
3. トラッキング タイプで「イベント」を選択
4. カテゴリ、アクションを任意で入力
5. ラベルに「abcd-button-abtest-a」と入力
6. 詳細設定＞タグの順位付け＞●●が発効する前にタグを配信にチェックを入れる
7. 手順３で作成したタグを選択
8. トリガーを新規作成
9. トリガータイプでクリック＞「リンクのみ」を選択（「すべての要素」でも良い）
10. 「Click ID」「等しい」を選択し、値は手順１でリンク要素に記述したクラス名を入力（例ではabcd-button-abtest-a）
11. トリガーを保存する
12. タグを保存する

以上で設定終了です。
Googleアナリティクス＞行動＞イベント　からクリック数を見て、Ａ/Ｂどちらが良かったか、比較することができます。