意外と知らない！Google Analyticsの裏技5選【タグマネージャ設定編】

2013/10/28

Googleアナリティクスでは通常「出来ない」や「管理やカスタムがややこしい」とされている設定もたった一つのタグを全てのページに入れるだけで解決する手段があったとしたら？

今回は意外と知られていないGoogleタグマネージャを活用したGoogleアナリティクスの裏ワザを5つ厳選して紹介してみます。

Googleアナリティクス×Googleタグマネージャでできる裏ワザ5選

1.アナリティクスやアドワーズのタグを一元管理して、サイト運用効率UP

2.自由自在にページ毎のタグの出し分けで埋め込み忘れリスク低減！

3.面倒なクリック計測（イベントトラッキング）管理も完全自動化

4.FacebookもTwitterも！SNS関連の計測だってカスタムいらず

5.スクロールを自動取得して、ユーザーがどこまで読んだか完全把握！

1.アナリティクスやアドワーズのタグを一元管理して、サイト運用効率UP

GoogleアナリティクスのタグにAdwordsやYahoo！リスティングのリマーケ（リターゲ）タグ、各種広告のコンバージョン計測タグにアフィリエイト成果タグ等など。

運用を続けるほどに肥大化するタグを「たった一つのコードで一元管理する」。これがGoogleタグマネージャの基本的な機能です。設定方法がちょっとややこしいので、まずはそこから。

コンテナの作成とタグの登録

最もシンプルに設定する場合、「コンテナ作成」⇒「タグ登録」⇒「ルール設定」の3つを行うだけでOK。

01.まずはアカウントと”コンテナ”を作成

まずは「Googleタグマネージャ公式サイト」で「今すぐ登録」からアカウントを登録します。

ウェブサイト毎に作成する「コンテナ」を作成

規約に同意してコードを取得。

このコンテナコードを全ページに入れて、その中に複数のタグを設定。条件に合わせて使ったり使わなかったりする感じです。

02.コンテナにタグを設定

まずは基本のアナリティクスタグから。「ドラフトコンテナ＞サマリー」画面右上のをクリックして設定スタート

タグ名を「Google アナリティクスタグ」と設定

タグの種類をそのままズバリ「Google アナリティクス」で選択

ウェブプロパティIDを「UA-XXXXXXXX-Y」の形で挿入

ディスプレイ広告主向けのサポートを追加はチェック

トラッキングタイプは「ページビュー」をとりあえず設定

まずはこれでOK。
直接HTMLを入力できる「カスタムHTML」などを使ってコンテナの中に複数のタグを格納していけば、様々なタグを完全なワンタグで管理でき、タグの削除や変更にも即時対応可能にできます。

2.自由自在にページ毎のタグの出し分けで埋め込み忘れリスク低減！

例えば「http://domain.com/」にある、「/lp/」という特定ディレクトリにあるページ（ランディングページなど）に来たユーザーに対してリマーケティングタグを適用したい。などという場合も、かなり簡単な設定でOK。

ページ毎のタグ出し分けルール設定方法

「ドラフトコンテナ＞サマリー」画面右上のをクリックして設定スタート

ルール名を「segment_lp」など分かりやすいもので設定

条件を「{{url}}」「正規表現に一致」「^/lp/(.*)」に設定

保存して対象のタグ表示ルールに適用すればOK

ドリームウィーバーで特殊なテンプレート設計をしたり、PHPなどで条件分岐を設計するよりもはるかに早いですし、何より後からタグの編集・追加や削除がしやすいのでオススメです。

※もちろんページを指定することも可能ですし、正規表現ではなく「含む」として「/lp/」と表記にしても大丈夫です（被るディレクトリ名が存在しない場合）

3.面倒なクリック計測（イベントトラッキング）管理も完全自動化

jQueryなどで一発設定してしまう方法もあるのですが、設定の追加や変更が面倒で、かつ解析時に追いかけにくくなるという難点があるため、タグマネージャでの管理のほうが便利だったりします。

具体的な設定方法は以下の通り。

01.まずはリスナータグという特殊な機能タグを作成

「ドラフトコンテナ＞サマリー」画面右上のをクリックしてタグ追加画面へ移動

タグ名＝クリック計測などと名づけ、タグの種類を「イベントリスナー＞クリックリスナー」で設定

「タグ配信ルール」で条件を「すべてのページ（{{url}}：正規表現に一致：[.*]）」で設定

そのまま一旦保存

02.続いて自動イベント取得マクロを作成

画面右上のをクリックして新しいマクロ作成画面へ

マクロ名を「自動クリック計測マクロ」などと名づけ、マクロタイプを「自動イベント変数」に

変数タイプを「要素」としておく

※変数タイプ種類については下記参照

03.上記のリスナータグとマクロを組み合わせたルールを作成

一旦サマリー画面に戻って、画面右上のをクリックし、新しいルールを作成

ルール名を「クリックイベント自動計測」などに設定

条件1を「{{event}}：等しい：gtm.click」と記入

条件2を「自動クリック計測マクロ：正規表現に一致：[.*]で設定

04.作成したルールを適用したGoogleアナリティクスのイベントタグを生成

ちょっとややこしいですが、再度サマリー画面に戻って、画面右上のをクリックし、新しい計測タグを作成。先ほどのルールを設定しておきます。

タグの種類：Google アナリティクス

ウェブプロパティID：（お使いのUAID＝[UA=XXXXXXX-Y]）

トラッキングタイプ：イベント

配信ルール：「クリックイベント自動計測（03で作成したルール）」

これで設定は完了。

複数のイベントを併用して活用したり、ページによって適用の幅を変えたり、フォームや画像のクリックだけを取ったりなど応用の幅は広いので、また別途特集的に書きたいですね。

■備考：自動クリック計測マクロの要素設定について

	クリックリスナー	リンククリックリスナー	フォーム送信リスナー
要素	クリックされた要素のDOM （リンクの場合はリンクURL（※））	クリックされたリンクのリンクURL	送信されたformのDOM
要素クラス	クリックされた要素のclass	クリックされたリンクのclass	送信されたformのclass
要素ID	クリックされた要素のid	クリックされたリンクのid	送信されたformのid
要素ターゲット	–	クリックされたリンクのtarget （_blankなど）	送信されたformのtarget （_blankなど）
要素URL	画像の場合：画像のURL（※）リンクの場合：リンクURL（※）	クリックされたリンクURL	送信されたformのaction

4.FacebookもTwitterも！SNS関連の計測だってカスタムいらず

これまた面倒な設定が目一杯のソーシャルトラッキング設定。

Twitterのツイート数やFacebookイイネ数をGoogle Analyticsで取得しようとして、タグのカスタマイズで嫌になってしまった方に朗報です。

やり方は簡単。予め用意されたソーシャル用のルールをタグマネージャ上で適用するだけ。以下の手順に従ってサクッと設定してみてください。

ソーシャルトラッキング設定方法

「ドラフトコンテナ＞サマリー」画面右上のをクリックしてタグ追加画面へ移動

タグ名＝ソーシャル計測などと名づけ、タグの種類を「Google アナリティクス」で設定

ウェブプロパティIDに、アナリティクスの通常タグに含まれているID（「UA-XXXXXXXX-Y」の形）をそのまま記載

「データレイヤーを使用」にチェック

配信ルールを「すべてのページ（{{url}}：正規表現に一致：[.*]）」で設定して保存

上記手順を踏むことで、既に発行済のワンタグにソーシャルトラッキング機能が追加された。ということになります。

いやー、便利なツールですねぇ。

5.スクロールを自動取得して、ユーザーがどこまで読んだか完全把握！

通常のGoogleアナリティクスの設定では取得不可能な「ユーザーがページ全体の何パーセントまで精読したのか？」というデータも、以下の設定で取得可能になります。

ちょっと設定は難しいですが、一度設定してしまえば複数のプロパティで使用可能な便利タグになってくれるので、ぜひとも頑張ってみましょう。

01.まずはタイマーリスナータグを作成

「ドラフトコンテナ＞サマリー」画面右上のをクリックしてタグ追加画面へ移動

タグ名＝ページスクロール計測リスナーなどと名づけ、タグの種類を「イベントリスナー＞タイマーリスナー」で設定

「タグ配信ルール」で条件を「すべてのページ（{{url}}：正規表現に一致：[.*]）」で設定

イベント名を「gtm.timer」に設定

間隔を「1000」（＝1秒）で設定 ※ここは任意です

制限は特に設定なしにしてそのまま一旦保存します

02.続いてスクロール計測マクロをカスタムjavascriptで作成

画面右上のをクリックして新しいマクロ作成画面へ

マクロ名を「スクロール計測マクロ」などと名づけ、マクロタイプを「カスタムjavascript」に

以下のjavascriptコードを記入して保存

■スクロール計測マクロ用javascript

function(){
	var d = document;
	var b = d.body;
	var nowScrollTop = 0;	
	var scrollHeight = d.documentElement.scrollTop || b.scrollTop;
	var pageHeight = Math.max.apply( null, [b.clientHeight , b.scrollHeight, d.documentElement.scrollHeight, d.documentElement.clientHeight] );
	var viewHeight = d.documentElement.clientHeight || b.clientHeight;
	if(pageHeight <= viewHeight){	
		nowScrollTop = 100;
	}else{	
		
		nowScrollTop = Math.round(((scrollHeight + viewHeight) / pageHeight) *10) * 10;
		switch(nowScrollTop){	
			case 10:
				nowScrollTop = 0;
				break;
			case 30:
				nowScrollTop = 20;
				break;
			case 50:
				nowScrollTop = 40;
				break;
			case 70:
				nowScrollTop = 60;
				break;
			case 90:
				nowScrollTop = 80;
				break;
		}
	}
	return nowScrollTop;
}