超今更って感じなんですが「Google Tag Manager」というタグ管理システムが非常に便利でした。
今まで全く気にしてなかったんですが、ずいぶん前からあるんですね、この機能。
Google Tag Manager（GTM）は、サイト上のタグを一元管理できる仕組みです。
例えば、ウェブサイトにはさまざまなタグを設置していると思います。
- Google Analytics
- 広告のコンバージョンタグ
- ソーシャルプラグイン関連のタグ
- サイト内のトラッキング・計測用タグ
サイト上にはこれらを集約した共通のワンタグを設置するだけ。
個別のタグは全て管理画面上で管理することが出来ます。
つまり、個別のタグの設置・編集時にHTMLを毎回編集する必要が無いという大きなメリットがあります。
GTMの基本的な説明は、ググればたくさん出てきますのでそちらをご覧ください。
最初慣れるまでは、管理画面の使い方を覚える必要がありますが、ある程度慣れればHTMLの編集よりも楽です。
今回は少しだけ応用編というか、比較的ニーズが高そうな例を二つほど、メモがてら。
どちらも、Google Analyticsでデータを計測します。
サイト内のリンクのクリック数計測
URLのクリック数は、GAのイベントを利用して計測するのが一般的ですよね。
ただ、普通にやろうとするとすべてのリンクにタグを記述する必要が出てしまいます。
それを自動的に行う方法として、JQueryなどを使ってhtml上のaタグを全て置換したり、といったやり方もありますが、GTMを使えば簡単に実現可能です。
（1）リンククリックリスナーを作成
まず、リンクのクリックを計測するために、「リンククリックリスナー」というものを作成します。
特に細かい設定は無いです。ルールは「すべてのページ」。以下、GTMの説明の通り。
このタグが配信されると、Google タグマネージャはページでのリンク クリックのリスニングを開始します。リンクがクリックされた場合、Google タグマネージャのイベント gtm.linkClick が生成されます。{{event}} 等しい gtm.linkClick を使用して、ルールの条件でこのイベントを確認することができます。
（2）ルールを作成（外部リンク）
次に「ルール」を作成します。タグが配信される条件ですね。（1）のリンククリックリスナーを設定したことで、リンクがクリックされた場合にはevent「gtm.linkClick」が発生するようになります。つまり、{{event}} = gtm.linkClick を条件とすることで、リンクがクリックされたときにだけタグが発行されるようになります。
今回はさらに、「外部リンク」と「内部リンク」を分けて計測したいので、URLが「http」で始まり、かつ「snowadays.jp」を含まない場合は、「外部リンク」とします。
（3）ルールを作成（内部リンク）
（2）と同様ですが、今度は「内部リンク」です。URLが「http」で始まらない、もしくは「snowadays.jp」を含む場合には、「内部リンク」とします。
ここで気を付けたいのは、GTMの「ルール」のなかで複数の条件を設定する場合は、複数の条件をすべて満たした場合、という扱いになります。（AND条件）
そのため、OR条件で設定したい場合は、画像のように正規表現を使いましょう。
^((?!http).)*$|snowadays\.jp
（4）Googleアナリティクスのタグ（イベント）を作成（外部リンク）
最後に、タグを作ります。Googleアナリティクスを選択し、トラッキングタイプを「イベント」にします。
なお、配信のルールにて、（2）で作ったものを選択するのをお忘れなく。
イベントトラッキングのパラメータは以下の通り。
- カテゴリ：OutboundClick ※これは好きな名前でOK。GAの画面上に出ます。
- 操作：{{url}} ※これは、リンクが存在するページのURLです。
- ラベル{{element url}} ※これは、リンククリックされたURL。
（5）Googleアナリティクスのタグ（イベント）を作成（外部リンク）
最後に、タグを作ります。Googleアナリティクスを選択し、トラッキングタイプを「イベント」にします。
なお、配信のルールにて、（3）で作ったものを選択するのをお忘れなく。
イベントトラッキングのパラメータは以下の通り。
- カテゴリ：InboundClick ※これは好きな名前でOK。GAの画面上に出ます。
- 操作：{{url}} ※これは、リンクが存在するページのURLです。
- ラベル{{element url}} ※これは、リンククリックされたURL。
（6）Googleアナリティクスで確認
以上の手順で、リンクのクリックがGoogleAnalyticsで確認できるようになりました。
行動 ＞ イベント で、イベントカテゴリ、イベントアクション（＝操作）、イベントラベル、のそれぞれに、（4）（5）で設定したパラメーターが記録されています。
問合せフォーム（Contact Form 7）の送信数計測
もう一つ紹介するのは、問合せフォームの送信をカウントする方法です。
これが可能になると、Googleアナリティクス上で問合せの送信を目標として設定できたり、また、以下を応用することでAdwordsのコンバージョンタグを問合せフォームの送信に設定したりすることもできます。
問合せフォームに「完了画面」が存在する場合は、「完了画面への到達」＝「問合せの送信」とみなせばいいので簡単ですが、問題は「完了画面」が存在しない場合です。
身近なところでWordpressのプラグイン「Contact Form 7」を使う場合、Ajaxで処理されるために「完了画面」はありません。
しかし、Contact Form 7でGoogleアナリティクスと連携する方法が、公式のヘルプに書いてあります。
Contact Formの管理画面から、「その他の設定」の箇所に1行追加するだけです。
※この記述は古いらしく、現在は少し記述を変えなければ動かないらしいです。
【最新版】Contact Form 7でGoogle Analyticsのコンバージョンをトラッキングする方法 | IMAI5 DESIGNS
これを応用して、今回はGTMに対応させてみたいと思います。
（1）Contact Form 7の管理画面で「その他設定」を追加
Contact Formの管理画面、「その他の設定」のところに以下の1行を追加します。
すでに前述のGAのコードを入れてる場合は差し替えてください。
on_sent_ok:"dataLayer.push({'event':'formEvent','form':'contactForm'});"
簡単に説明すると、「on_sent_ok」はContact Formの送信が成功した場合に呼び出されるアクション。
「dataLayer.push」というのは、GTMにデータを送るためのfunctionです。
そして、「event」という変数に「formEvent」という値を、「form」という変数に「contactForm」という値をプッシュしています。
（2）GTMの「マクロ」で、変数「form」を作成
（1）で二つの変数が出てきましたが、「event」という変数は元々GTMに用意されていますが、「form」という変数は用意されていません。
なので、新規に作成します。
マクロを新規作成し、マクロ名を「form」、マクロのタイプを「データレイヤー変数」、データレイヤー変数名を「form」とします。
マクロ名はなんでもいいんですが、後でわからなくならないように変数名と同じにしておく方が良いと思います。
（3）フォーム送信の「ルール」を作成
リンククリックと同じように、今回もフォームが送信された時だけタグを配信するようにします。
ルールを新規作成し、{{event}} = formEvent の場合、という条件を設定
（4）Googleアナリティクスのタグ（イベント）を作成
最後に、GAのタグを作成します。トラッキングタイプは「イベント」。
配信ルールで（3）で作成したルールを設定するのをお忘れなく。
イベントトラッキングのパラメータは以下の通り。
- カテゴリ：{{event}} ※変数「event」。成功すれば「formEvent」が代入されるはず。
- 操作：{{form}} ※変数「form」成功すれば「contactForm」が代入される。
- ラベル：send ※適当にsendというラベルを付けてみました。
（5）Googleアナリティクスで確認
以上の手順で、Contact Formの送信数がGoogleAnalyticsで確認できるようになりました。
行動 ＞ イベント で、イベントカテゴリ、イベントアクション（＝操作）、イベントラベル、のそれぞれに、（4）で設定したパラメーターが記録されています。
他にも色々と出来そうなんですが、あまり無理にGTMだけでやろうとすると逆にややこしくなりそうなので、以前記事にもしたGAのソーシャル対応は、GTMの「カスタムHTMLタグ」を利用して、サイトにあった記述をそのまんまコピペしておきました。
Adwords関連のリマーケタグやコンバージョンのタグなんかも一発で追加できるので、それらは非常に便利ですね。
そして、リンクのクリックがこんなに簡単に取れるとは思ってませんでした。すごい。
ほとんどソースをいじる必要が無いですし。
Yahooも同じようなタグ管理機能をリリースしたようですが、後発ゆえにTipsがまだ少なく、いまいち使い方がよくわかりませんでした・・ｗ
※↓アユダンテさんが、Googleタグマネージャーに関するKindle本を出されました（2014/11/11）。書籍でGTMを扱ってるのは他にはないんじゃないかな。
