【自動イベントトラッキング】Googleタグマネージャを使って、サイトに設置した全バナーのクリック数を計測する手順

Google Tag Managerを使ってサイトに設置した全リンクのクリック数を自動取得してましたので、その手順についてご紹介します。

メリット

・HTMLファイルの書き換えはGTMタグの設置のみ。
　リンクタグ１つ１つに別々のIDを付与する必要も、onClick属性も不要
　Google アナリティクスの設定も不要

これをすると何を計測できるか

Googleアナリティクス上で以下のクリック数が見れます。
　・Googleアドセンスのクリック数
　・アフィリエイト用の全バナーのクリック数
　・FacebookやTwitterへの遷移クリック（未確認）

Googleアナリティクスでどんなふうに見えるか

　・カテゴリ：外部リンククリック
　・アクション：クリックが発生したサイト内のページ
　・ラベル：リンクタグ内のテキスト｜リンク先URL
　例えば、「トップページ｜http://grade.upper.jp/test.html」

手順

手順は簡単で以下の３ステップです。※手馴れていれば30分ほどです。

１．GTMタグの設置

アカウント作成→タグの発行→サイトの全ページに設置
Wordpressなどであれば、フッターphpかヘッダーphpに直接記述

２．GTMの設定

GTMでマクロ、ルール、タグの順に作成します。
まずは、マクロの作成

作成するマクロは３つ。
url path。これは存在しない場合のみ作成してください。詳細は画像を参照。

続いて、カスタムjsリンクテキスト取得（ここでマクロ名に誤字がありますが、GTMなら修正も楽々です）

カスタムjavascriptの内容は以下に記載

スクリプトは、アユダンテ様の記事を参考しています。

Googleタグマネージャに新しく追加されたマクロ「カスタムJavaScript」｜コラムアユダンテ株式会社
www.ayudante.jp/column/2013-10-23/10-51/

function(){
	// ---- 初期化
	var linkElement = {{自動イベント変数（要素）}};	// 【マクロのタイプ：自動イベント変数】【変数タイプ：要素】で作成したマクロを読み込み
	var linkText = '';	// 返し値格納用変数

	// ---- テキスト要素の抽出（3階層まで子要素をドリルダウン）
	for (var i = 0; i < linkElement.childNodes.length; i++){
		if(linkElement.childNodes[i].nodeValue != null && linkElement.childNodes[i].tagName != 'img'){
			linkText += linkElement.childNodes[i].nodeValue;
		}else if(linkElement.childNodes[i].tagName != 'img'){
			linkText += linkElement.childNodes[i].getAttribute('alt');
		}else{
			for (var j = 0; j < linkElement.childNodes[i].childNodes.length; j++){
				if(linkElement.childNodes[i].childNodes[j].nodeValue != null && linkElement.childNodes[i].childNodes[j].tagName != 'img'){
					linkText += linkElement.childNodes[i].childNodes[j].nodeValue;
				}else if(linkElement.childNodes[i].childNodes[j].tagName != 'img'){
					linkText += linkElement.childNodes[i].childNodes[j].getAttribute('alt');
				}else{
					for (var k = 0; k < linkElement.childNodes[i].childNodes[j].childNodes.length; k++){
						if(linkElement.childNodes[i].childNodes[j].childNodes[k].tagName != 'img'){
							linkText += linkElement.childNodes[i].childNodes[j].childNodes[k].nodeValue;
						}else{
							linkText += linkElement.childNodes[i].childNodes[j].childNodes[k].getAttribute('alt');
						}
					}
				}
			}
		}
	}

	// ---- 値の取得
	return linkText;
	// リンクに含むテキスト要素を全抽出
}

自動イベント変数（URL

自動イベント変数（要素）

続いて、ルールを作成します。作成するルールは１つのみ。

「外部サイトへのリンクリック時発動」というルール。詳細は以下の画像を参照。↑で作ったマクロを使用しています。

ラスト、タグを作成します。ここでは３つタグを作成しています。A1_TrackingCodeは基本タグですので説明はここでは省略します。

L1_LinkClick_listenerタグを作成。タグは名前順にソートするので、先頭に記号を振っています。また、全角文字を使用して過去にほかのスクリプトとエラーを起こしたことがあったので、半角で名前を付けています。

L2_OutLinkClickタグです。

マクロ、ルール、タグが完成したら、デバックして、きちんと動くか確認します。
サマリー＞プレビューのブルダウンから「更新、プレビュー、デバック」を選択します。

サイトの下の方にGoogle Tag Managerのデバック情報が表示されます。
そこに認識されているタグがリストされます。「Fired on Tag Manager Load」となっているば動作していることになります。
L2については、クリックしたときに動作するためここでは確認できません。別途、Googleアナリティクスのリアルタイムレポートで確認します。
動作に問題ないようでしたら、バージョン作成→バージョン公開で作成したGTMを動作させます。これをしないとサイトでGTMが動作しないので要注意。