Googleタグマネージャで簡単に追加登録できる、一覧に出ていない要素マクロ

2014年02月04日
ライター:畑岡 大作

以前、自動イベントトラッキング機能で実装された自動イベント変数マクロですが、現状では要素(DOM)/要素クラス/要素ID/要素ターゲット/要素URLの計5つしかサポートしていません。
これはこれで便利に使えるのですが、例えば要素のテキスト内容を取得したい、といった場合には別途JavaScriptを記述して取得する必要がありました。

ですが、実はGoogleタグマネージャ側ではその他の要素情報も取得していまして、データレイヤー変数として変数名を入力してマクロ登録するだけで、簡単に取得可能になっているんです。

  1. 復習:自動イベント変数は自動イベントトラッキングを使う時に利用するマクロ
  2. リンクテキスト、要素のタグ名、要素のHTML全文などなどが取得可能
  3. その他、取得可能な要素データの調べ方

復習:自動イベント変数は自動イベントトラッキングを使う時に利用するマクロ

自動イベント変数と自動イベントトラッキングについて、詳細は先日公開した「Googleタグマネージャに自動イベントトラッキング機能が登場」を見ていただければと思いますので、ここではざっくりとした概要だけ。

Googleタグマネージャではイベントリスナーと呼ばれる機能がありまして、これを利用することで、「ユーザーがリンクをクリックした時」や「フォームが送信された時」などの「なにかしらのタイミングでGoogleタグマネージャを呼び出す(=タグを配信する)」ことができます。
そして、その時「ユーザーがクリックした要素(aタグなど)」の情報を自動的に取得してくれるのが、自動イベント変数です。この自動イベント変数をイベントリスナーと一緒に使用することで、例えば「リンク先URLがhttpから始まるリンクがクリックされた時」などの条件(ルール)作成ができるわけです。

自動イベント変数は冒頭で紹介した5つの要素情報しか現状では用意されていないのですが、実は密かに取得されてる他の情報も利用できますよ、というのが今回の記事です。

リンクテキスト、要素のタグ名、要素のHTML全文などなどが取得可能

ポイントは1つ。
データレイヤー変数として登録する、ということです。

  1. マクロの新規登録画面を開く
  2. 【マクロのタイプ】で「データレイヤー変数」を選択
  3. 【データレイヤーのバージョン】は「バージョン2」を選択
  4. 【データレイヤー変数名】は以下を参照

データレイヤー変数として取得可能な、わりとよく使えそうな情報

【マクロのタイプ:データレイヤー変数】【データレイヤー変数名:gtm.element.innerText】【データレイヤーのバージョン:2】
要素が含むテキストを参照するためのマクロを登録した例
項目 設定するデータレイヤー変数名 用途
要素が含んでいるテキスト gtm.element.innerText リンクのテキストなど
要素のHTMLタグ名 gtm.element.tagName クリックリスナーでタグ判別に
要素のHTML全文 gtm.element.outerHTML 属性の値なども含めて検索したい時に
要素の大きさ gtm.element.offsetWidth
gtm.element.offsetHeight
どんなサイズのバナーがクリックされたか、など
要素の位置 gtm.element.offsetLeft
gtm.element.offsetTop
ページ内のどの位置の要素なのか
親要素 gtm.element.parentElement 親要素のタグ名が知りたい時など(その場合はgtm.element.parentElement.tagNameのように、parentElementの後ろへさらに上記などのようにくっつけて記述)

ちなみに、特に気になる人が多いであろうテキスト(gtm.element.innerText)の仕様ですが、aタグ直下のテキストだけでなく、子要素(spanタグなど)が含むテキストもきちんと取得されます。
なお、画像(imgタグ)のalt属性の値などは取得されません。また、HTML内の改行やインデントも含んで取得するためご注意ください。

aタグ直下のテキスト=OK、aタグ内の画像のalt属性=NG、aタグの子要素のテキスト=OK
gtm.element.innerTextの動作テストをしてみた図

その他、取得可能な要素データの調べ方

イベントリスナーが動作してeventに値が入る際、そのタイミングで自動イベント変数の値が取得されますが、同時に他のもろもろの情報も取得され、データレイヤー変数という形で保持されます。
前述のgtm.element.hogehogeもその仕組みを利用して、取得された情報を参照しているわけです。

では、他にはどんな情報が取れるのか、自動イベント変数の中身を見てみましょう。
先日の記事のように、Chromeのデベロッパーツールを使います。デベロッパーツールのConsoleでJavaScript変数名を入力するとその変数の中身を見ることができますので、これを使ってデータレイヤーに格納されている値を確認が可能です。

  1. Chromeを起動
  2. イベントリスナーが動作しているページを開く
  3. イベントリスナーを反応させる
    (例:リンククリック→ページ遷移する前にEscを連打してページ遷移を取り消し)
  4. Chromeのデベロッパーツールを開く
    (ツール>デベロッパーツール、またはCtrl+Shift+I)
  5. デベロッパーツールのメニューの右端にあるConsoleを選択
  6. dataLayerと入力してEnter
  7. 表示された中身(Object)の最後にあるObjectを開く
  8. 展開されたObjectの中にあるgtm.elementを開く
dataLayer配列の最後のobjectのgtm.elementを展開した図
accesskeyから始まり、もろもろの情報が盛りだくさん。

この展開されたgtm.elementの中にあるのが、データレイヤー変数として入力することで取得可能なもろもろの情報となります。
欲しい情報があった場合は、
gtm.element.項目名
という具合にデータレイヤー変数名として設定することで利用できるようになります。

この記事を書いた人
畑岡 大作
畑岡 大作
マークアップエンジニア

マークアップエンジニアとして活躍しながら昨今はGTMのスペシャリストに。日本初となる書籍を出版し、多くの顧客サイトのGTM設計、運用、アドバイスなどを行う。セミナー登壇も多数。好きな物はラノベ、ゲームからラーメン、万年筆(のインク)と幅広い。

最近書いた記事
著書