【タグマネジメント】GoogleTagManagerでイベントリスナーを使う

     - アドテクノロジー ,  


タグマネジメントとは

タグマネジメントとは、広告効果測定ツールや、サイト解析ツールなどで利用している『HTMLタグ』の管理を行うことをいいます。
タグマネジメントツールでは、Webサイトの全ページに各タグマネジメントツールが発行する1つのタグを設置するだけで、あらゆるHTMLタグを管理画面上で登録することが可能になります。
新しく広告施策を行う場合でも、HTMLを修正することなく、タグの設置や撤去が可能になるんです。
 参考・・・ MarkeZine:タグマネジメント、きちんと理解できてる?

で、タグマネジメントツールとして有名なのが、Googleが提供しているGoogleTagManager(GTM)です。
今回はGTMを使って、ブラウザ上のユーザイベントを使ったタグの配信設定をご紹介します。

GTMで使えるイベントリスナー

テンプレートとして用意されているイベントリスナーは以下の通り。
 ・クリックリスナー
 ・フォーム送信リスナー
 ・リンククリックリスナー
 ・タイマーリスナー
 ・履歴リスナー
 ・JavaScriptエラーリスナー
このうち、よく使いそうなクリックリスナーとタイマーリスナーの設定方法を解説します。

GTMでのイベントリスナー設定方法

まず、GTMでは、配信するタグと配信先(ルール)、取得するデータ(マクロ)を設定するのですが、イベントリスナーはタグとして設定します。

  1. タグの新規作成で、クリックリスナータグを設定する。
  2. 配信先として対象ページURLを指定する。
  3. ※GTMでは、dataLayerというグローバルオブジェクトが予め定義されていて、dataLayerの中には、キーと値のペアをセットしてGTMに渡すことができます。
    この中にイベントも入ります。
    1のクリックリスナータグを設定することで、dataLayerに[{'event': 'get.click'}]が追加されるのです。

    でこれを使って、タグのイベント配信設定を行います。
    今回はタグの代わりに、オンクリックでページ上に文字列を出します。

  4. タグの新規作成で、以下のタグを設定する。
  5.  <script> document.getElementById("text").innerHTML = "クリックしたね"; </script> 
  6. 配信先として、以下を指定する。
  7. ・配信先のURL ・・・【URL】【含む】【click.html】
    ・イベント名 ・・・【event】【等しい】【get.click】
     →イベント名を指定することで、「dataLayerのevenキーに入る値がget.clickのとき」という条件になります。
    ・イベント対象となるボタン要素 ・・・【element id】【等しい】【neko】(ほかにclass名指定なども可能)
     →指定しなければ、ページ上でのすべてのクリックでタグが配信されます。

◇クリックイベントのテストページ

タイマーリスナーも流れは同様です。

  1. タイマーリスナータグを設定する。
  2. クリックリスナーとは違い、以下の設定を行います。
    ・イベント名 ・・・【get.timer】
      →dataLayerのeventキーに入る値を指定できます。
    ・間隔 ・・・【1000ミリ秒】
      →イベントを発生させる間隔をミリ秒で指定できます。
    ・制限 ・・・【指定なし】
      →イベントを発生させる回数の上限を指定できます。(指定しなければ永遠に発生)

  3. 配信先として対象ページURLを指定する。
  4. タイマー回数を取得するマクロを設定する。
  5. ・マクロ名 ・・・【タイマー回数】
    ・マクロのタイプ ・・・【データレイヤー変数】
    ・データレイヤー変数名 ・・・【gtm.timerEventNumber】
     →1で設定したタイマーリスナータグが動くと、設定しているミリ秒間隔で制限値までdataLayerにタイマーイベントがどんどんセットされていきます。このとき、gtm.timerEventNumberキーにタイマー回数が値として入るので、これを取得します。

  6. タグの新規作成で、以下のタグを設定する。
  7.  <script> document.getElementById("text").innerHTML = "{{タイマー回数}}秒経過"; </script> 

     →{{}}でマクロ名を記述すると、マクロで取得したデータ(=タイマー回数)をタグに渡すことができます。

  8. 配信先を指定する。
  9. ・配信先のURL ・・・【URL】【含む】【timer.html】
    ・イベント文字列 ・・・【event】【等しい】【get.timer】
     →タイマーリスナータグで設定したイベント名を指定します。

◇タイマーイベントのテストページ

他のも同じ感じですが、さらっと説明。

  • リンククリック リスナー
  •   →リンクに対するクリックを取得する。クリック後、ページ遷移までの時間を調整できるので、別ページに遷移してしまうページでも使える。(タグが配信される前に離脱しないで済む。)

  • フォーム送信リスナー
  •   →フォーム系のページからサーバーにデータを送信するイベントを取得する。送信前の入力エラー状態では動作しないよう回避することも可能。

  • 履歴リスナー
  •   →ブラウザの戻る/進むや、pushStateなどを取得する(ただし同一ページ内での遷移に限る)。Ajaxを使ってロードせずコンテンツを切り替えるようなサイト(GoogleMAPとか)でも、URLの変更にあわせてタグを配信できる。

  • JavaScriptエラーリスナー
  •   →JavaScriptのエラーを取得する。どういうエラーを拾うのかは調査していません。

また、用意されたイベント以外に、自分でイベントもどきを作ることもできます。
スクロール率を取得する一例を紹介します。

GTMで独自イベントを作成する

マクロにカスタムjavascriptという、自由に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;
}

そして配信するタグを設定します。

<script> document.getElementById("text").innerHTML = "スクロール率{{スクロール率}}%" </script>

配信先を設定します。
 ・配信先のURL ・・・【URL】【含む】【scroll.html】
 ・イベント文字列 ・・・【event】【等しい】【get.timer】
  →これを設定しないと、アクセスした瞬間のスクロール率しか取れません。タイマーを設定することで、設定した秒数毎にタグが動き、アクセス後のスクロール率も取得できます。

◇スクロールイベントのテストページ

用途としては、GAでスクロール率を計測するなどでしょうか。
勉強不足でいろいろ間違っていたらすみません。

ちなみに、DACでは独自のタグマネジメントツールを開発しております。その名は「IntelligentTagManagement(ITM)」
ITMでも今回ご紹介した、クリック、タイマー、スクロールイベントを使ったタグの配信が可能です。
しかも、今回やったような複雑な設定は不要!!
クリックなら対象の要素、タイマーなら秒数、スクロールなら%を設定して、タグに紐付けるだけです。

気になる方は、ぜひお問い合わせください。DAC:ITMのご紹介
ではでは。


DACエンジニア採用情報

  関連記事

SCA_and_Discovery_after_return_to_flight,_2005
【DMP】ピギーバックってなに

アドテクに関わる方であれば、よく耳にするであろう「ピギーバック」をシンプルに説明してみようと思います。 「piggyback/ピギーバック」は 「おんぶ」「背負う」に当たる言葉です。 アドテクでピギーバックというと、タグのピギーバックのことを指すことが多いように思います。 タグは、サイトに導入する小 …

IMASDK
Google IMA SDK で動画アプリに広告を入れてみた〜iOS編〜

新卒のjotakaです。 スマホアプリに動画広告を出すためのSDKを導入してみたいと思います。 ここでのSDKはアプリへ簡単に機能追加するためのframeworkやlibraryと言う方がわかりやすいかもしれません。 アプリ開発者が動画広告用のSDKを使用するメリットとして、例えば動画広告の仕様であ …

videojs
video.jsを使ったインバナー動画広告のHTMLタグを作ってみた

こんにちは、プラットフォームワンのyamakenです。久しぶりの投稿です。 今回は、 インバナー動画広告 のHTMLタグを作ってみます。 「今年は動画広告元年!」という声が私の入社以来毎年聞こえており、私の担当するMarketOneDSPでも年始にインストリーム動画RTB対応をリリースするなど、市場 …

iab-vast-logo
「初めての動画広告~①VAST編~」

2015年新卒入社の池田です。 「TVで動画コンテンツをみる時代」から「ネットで動画コンテンツをみる」時代になった今日このごろです。 「私もいっちょまえに動画広告を扱ってみたい・・・!!」と生意気にも思うようになりまして。 しかし、つい2か月前までド文系大学生だった池田は果たして動画広告を扱えるよう …

appnexus
「Ad Tech Power Game」

こんにちは、テクノロジー戦略部の田畑です。 はじめに。 この「アドテクゑびす界」ですが、DAC公式のエンジニアブログです。他の方も色々と技術的なことを書いていますが僕エンジニアでもなんでもありません。コード書けませんし、読めません。 ではなぜそんなやつがここでブログを書いているのか?会社の公式ブログ …

playlist
解説、VMAP!

どうも動画といえば僕です。Rhiannonです。 前回、前々回と動画ファイル自体についての記事を書きましたが、今回はVMAPについて解説しようと思います。 VMAPって聞いた事あるけど仕様書が英語だし読むの大変だと思っていた方の理解の一助になれば幸いです。   VMAPとはなんぞや? VM …

20140930220910
AudieneOneでアドブロック利用者を抽出する訪問者セグメントを作ろう

はじめに iOS 9のコンテンツブロッカーによって盛り上がったアドブロック論争。アドブロック自体はPCブラウザ用プラグインで昔からできていたことなのですが、さらに普及していくのかもしれません。 アドブロックの仕組みが普及するのはインターネット業界全体の損失につながりかねない話ではあるのですが、その一 …

IMG_4673
Ad Tech Conference~海外アドテク系カンファレンスに行ってきた②~

はい、テクノロジー戦略部の田畑です。 アドテク系イベントに行ってきた②ということで、前回書ききれなかったところを書きます。   ~前回のおさらい~ 1.11月にNYのアドテク系イベント3つに行ってみた。 2.Fraud、Viewability、Programatic Directがキーワー …

IAB
Ad Tech Conference~海外アドテク系カンファレンスに行ってきた~

こんにちは、田畑です。   前回のエントリから早一か月、どのように書こうかなぁと考えているうちに時間が経ってしまいました。前回はそもそも自分の部署が何をしているのかといったところを書いたので、今回は実際に情報収集の場として利用している各種カンファレンスの様子について書いてみました。 &nb …

Apple-Releases-Safari-10-Developer-Beta-3-for-OS-X-Yosemite-and-El-Capitan
Safari10(iOS10)のインライン動画再生についてまとめてみた

はじめに Safari10からvideoタグを用いたインライン動画再生ができるようになったので、挙動を調べてみました。 Safari 10.0 検証環境 項目 詳細 開発環境 Xcode8.0 検証端末 iPhone7 Simulator ブラウザ iOS Safari / UIWebView / …