【タグマネジメント】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エンジニア採用情報

  関連記事

appnexus
「Ad Tech Power Game」

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

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 / …

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

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

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

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

no image
【動画広告】VASTって何?

こんにちは、FlexOne推進部の近江です。 私は新卒入社2年目でアドサーバーや動画ソリューション(OVP)のサポート、開発を担当しています。 今回は動画広告のプロトコル「VAST」について書かせて頂きます。   ここ数年動画のくるくる詐欺がありましたが、昨年はHulu、ユーチューバー、見 …

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

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

surveillance
オトナの常識、消費者プライバシー保護(前編)

どうも、広告技術研究室のダーハラです。    何やってる人? 広告技術研究室の業務は多岐に渡るのですが、僕の仕事は海外のアドテクノロジーの動向や関連する技術環境の変化を調べて、経営陣や開発部隊にフィードバックするといったことを主な業務としています。 とてもやり甲斐のある仕事なのですが、仕事 …

hashed_potato
【DMP】IDのハッシュってなに

アドテクに関わる方であれば、よく耳にするであろう「ハッシュ」をシンプルに説明してみようと思います。 とはいえ「ハッシュ」は広いので、ここでは「IDのハッシュ」に焦点を当てます。 「ハッシュ/hash(動詞)」はそもそも「細切れにする」というような意味を持ちます。(名詞だと「細切れのもの」) ハッシュ …

20140922035644
アドテク問題(広告表示編)

アドテクエンジニア向けの問題を考えました。 お題は「広告表示」です。 以下お題に沿った「アドタグ」を作成し、広告を表示してみてください。 全部で9問あるので、興味のある人はやってみてください。 難易度は、ちょうどいいくらいです。 全部できた人は、採用担当までご連絡ください。 Q1.バナー広告を表示し …

new-york-city-828776_1280
ネイティブ広告と記事広告の違いってなに?!

こんにちは、プラットフォーム・ワンの新卒1年目Yukaです!! ここ数年よく耳にし、さまざまな媒体で目にするネイティブ広告。 しかし、今までの記事広告といったいなにが違うのー?!?!?! ということで調べてみました。 ネイティブ広告(Native Ads) デザイン、内容、フォーマットが、媒体社が編 …