タグマネジメントとは
タグマネジメントとは、広告効果測定ツールや、サイト解析ツールなどで利用している『HTMLタグ』の管理を行うことをいいます。 タグマネジメントツールでは、Webサイトの全ページに各タグマネジメントツールが発行する1つのタグを設置するだけで、あらゆるHTMLタグを管理画面上で登録することが可能になります。 新しく広告施策を行う場合でも、HTMLを修正することなく、タグの設置や撤去が可能になるんです。 参考・・・ MarkeZine：タグマネジメント、きちんと理解できてる？
で、タグマネジメントツールとして有名なのが、Googleが提供しているGoogleTagManager(GTM)です。 今回はGTMを使って、ブラウザ上のユーザイベントを使ったタグの配信設定をご紹介します。
GTMで使えるイベントリスナー
テンプレートとして用意されているイベントリスナーは以下の通り。 ・クリックリスナー ・フォーム送信リスナー ・リンククリックリスナー ・タイマーリスナー ・履歴リスナー ・JavaScriptエラーリスナー このうち、よく使いそうなクリックリスナーとタイマーリスナーの設定方法を解説します。
GTMでのイベントリスナー設定方法
まず、GTMでは、配信するタグと配信先（ルール）、取得するデータ（マクロ）を設定するのですが、イベントリスナーはタグとして設定します。
- タグの新規作成で、クリックリスナータグを設定する。
- 配信先として対象ページURLを指定する。 ※GTMでは、dataLayerというグローバルオブジェクトが予め定義されていて、dataLayerの中には、キーと値のペアをセットしてGTMに渡すことができます。 この中にイベントも入ります。 １のクリックリスナータグを設定することで、dataLayerに[{'event': 'get.click'}]が追加されるのです。 でこれを使って、タグのイベント配信設定を行います。 今回はタグの代わりに、オンクリックでページ上に文字列を出します。
- タグの新規作成で、以下のタグを設定する。 [code language="js"] <script> document.getElementById("text").innerHTML = "クリックしたね"; </script> [/code]
- 配信先として、以下を指定する。 ・配信先のURL ・・・【URL】【含む】【click.html】 ・イベント名 ・・・【event】【等しい】【get.click】 →イベント名を指定することで、「dataLayerのevenキーに入る値がget.clickのとき」という条件になります。 ・イベント対象となるボタン要素 ・・・【element id】【等しい】【neko】（ほかにclass名指定なども可能） →指定しなければ、ページ上でのすべてのクリックでタグが配信されます。
◇クリックイベントのテストページ
タイマーリスナーも流れは同様です。
- タイマーリスナータグを設定する。 クリックリスナーとは違い、以下の設定を行います。 ・イベント名 ・・・【get.timer】 →dataLayerのeventキーに入る値を指定できます。 ・間隔 ・・・【1000ミリ秒】 →イベントを発生させる間隔をミリ秒で指定できます。 ・制限 ・・・【指定なし】 →イベントを発生させる回数の上限を指定できます。（指定しなければ永遠に発生）
- 配信先として対象ページURLを指定する。
- タイマー回数を取得するマクロを設定する。 ・マクロ名 ・・・【タイマー回数】 ・マクロのタイプ ・・・【データレイヤー変数】 ・データレイヤー変数名 ・・・【gtm.timerEventNumber】 →１で設定したタイマーリスナータグが動くと、設定しているミリ秒間隔で制限値までdataLayerにタイマーイベントがどんどんセットされていきます。このとき、gtm.timerEventNumberキーにタイマー回数が値として入るので、これを取得します。
- タグの新規作成で、以下のタグを設定する。 [code language="js"] <script> document.getElementById("text").innerHTML = "{{タイマー回数}}秒経過"; </script> [/code] →{{}}でマクロ名を記述すると、マクロで取得したデータ（＝タイマー回数）をタグに渡すことができます。
- 配信先を指定する。 ・配信先のURL ・・・【URL】【含む】【timer.html】 ・イベント文字列 ・・・【event】【等しい】【get.timer】 →タイマーリスナータグで設定したイベント名を指定します。
◇タイマーイベントのテストページ
他のも同じ感じですが、さらっと説明。
- リンククリック リスナー →リンクに対するクリックを取得する。クリック後、ページ遷移までの時間を調整できるので、別ページに遷移してしまうページでも使える。（タグが配信される前に離脱しないで済む。）
- フォーム送信リスナー →フォーム系のページからサーバーにデータを送信するイベントを取得する。送信前の入力エラー状態では動作しないよう回避することも可能。
- 履歴リスナー →ブラウザの戻る/進むや、pushStateなどを取得する（ただし同一ページ内での遷移に限る）。Ajaxを使ってロードせずコンテンツを切り替えるようなサイト（GoogleMAPとか）でも、URLの変更にあわせてタグを配信できる。
- JavaScriptエラーリスナー →JavaScriptのエラーを取得する。どういうエラーを拾うのかは調査していません。
また、用意されたイベント以外に、自分でイベントもどきを作ることもできます。 スクロール率を取得する一例を紹介します。
GTMで独自イベントを作成する
マクロにカスタムjavascriptという、自由にJSを設定できるものがあります。ここで、以下のようにスクロール率（%）を取得する記述を設定します。 [code language="js"] function() { //上からの表示高さを取得する。 var scroll_height = (typeof(window.innerHeight) !== "undefined" ? window.innerHeight : document.documentElement.clientHeight) + (typeof(window.pageYOffset) !== "undefined" ? window.pageYOffset : document.documentElement.scrollTop); //コンテンツの高さを取得する。 var content_height = Math.max.apply( null, [document.body.clientHeight , document.body.scrollHeight, document.documentElement.scrollHeight, document.documentElement.clientHeight] ); //スクロール率を算出する。 var Math.floor(scrollper = scroll_height / content_height * 100); return scrollper; } [/code] そして配信するタグを設定します。 [code language="js"] <script> document.getElementById("text").innerHTML = "スクロール率{{スクロール率}}%" </script> [/code]
配信先を設定します。 ・配信先のURL ・・・【URL】【含む】【scroll.html】 ・イベント文字列 ・・・【event】【等しい】【get.timer】 →これを設定しないと、アクセスした瞬間のスクロール率しか取れません。タイマーを設定することで、設定した秒数毎にタグが動き、アクセス後のスクロール率も取得できます。
◇スクロールイベントのテストページ
用途としては、GAでスクロール率を計測するなどでしょうか。 勉強不足でいろいろ間違っていたらすみません。
ちなみに、DACでは独自のタグマネジメントツールを開発しております。その名は「IntelligentTagManagement（ITM）」 ITMでも今回ご紹介した、クリック、タイマー、スクロールイベントを使ったタグの配信が可能です。 しかも、今回やったような複雑な設定は不要！！ クリックなら対象の要素、タイマーなら秒数、スクロールなら％を設定して、タグに紐付けるだけです。
気になる方は、ぜひお問い合わせください。DAC：ITMのご紹介 ではでは。
