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

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

メリット

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

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

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

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

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

手順

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

1.GTMタグの設置

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

2.GTMの設定

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

screenshot.123

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

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

カスタム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
screenshot.128

自動イベント変数(要素)
screenshot.129

続いて、ルールを作成します。作成するルールは1つのみ。
screenshot.124

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

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

screenshot.125

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

L2_OutLinkClickタグです。screenshot.132

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

screenshot.133

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

screenshot.134

Googleアナリティクスで計測確認

GTM公開設定後、Googleアナリティクスを開いて、動作確認します。
リアルタイムレポートを見ることで、クリックしたイベントが正常にレポートに計測されているか確認します。

Googleアナリティクス > リアルタイム > イベント

にて、「外部リンククリック」が計測されていればOK
イベントアクションとイベントラベルも正確に取れているか確認してください。

screenshot.135

最後に

これで、どのページで多くのGoogleアドクリックが発生しているか、アフィリエイトリンククリックが発生しているか発生しているかがわかります。
一週間後にレポートで「行動 > イベント >サマリー」にて外部リンククリックの様子をみてみてください。きっとこれまで見えなかった新たな発見があるはずです。

Googleタグマネージャが全ページに設置されているか簡単に確認できるツールも公開していますので、よかったら使ってみてください。

[Google タグマネージャ] URLからタグ設置確認ツール
ultrablue.asia/gtmget.php

あなたにオススメ(Amazon)

あなたにオススメ(楽天)