【タグマネジメント】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. [code language=”js”] <script> document.getElementById("text").innerHTML = "クリックしたね"; </script> [/code]

  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. [code language=”js”] <script> document.getElementById("text").innerHTML = "{{タイマー回数}}秒経過"; </script> [/code]
     →{{}}でマクロ名を記述すると、マクロで取得したデータ(=タイマー回数)をタグに渡すことができます。

  8. 配信先を指定する。
  9. ・配信先の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のご紹介
ではでは。


DACエンジニア採用情報

  関連記事

【DMP】クッキー連携ってなに

  アドテクに関わる方であれば、必ず耳にするであろう「クッキー連携」をシンプルに説明してみようと思います。 クッキー連携は cookie sync(クッキーシンク、cookie synchronization の略)と呼ばれることも多いです。 Googleは cookie matching …

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

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

Treasure Dataの新機能(Data Tank)をAudienceOneのレポート機能で利用した話

Data Tankとは? Treasure Dataの新機能でTreasure Dataのプラットフォーム上に構築されたデータマートです。 Tableau等のBIツールとの接続を想定されており、AWSでいうところのRedshift的なものだと考えるとわかりやすいかと。 Data TankはPostg …

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

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

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

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

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

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

ネイティブ広告と記事広告の違いってなに?!

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

「初めての動画広告~①VAST編~」

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

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

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

no image
SafeFrameでリッチ広告をセキュアに実現

アドサーバ(広告配信サーバ)は、通常iframeで広告のクリエイティブを配信している。(JS配信とかに対応しているアドサーバもある) 通常のセキュリティだとiframeの中身(srcで実際に表示されている側)がiframeを操作する事はできない。つまりexpandなどのリッチ広告、特に表示領域を変更 …