アクセス解析担当者がGTMについて語るブログ

GTM(Google Tag Manager)・GA(Google Analytics)の中~上級者向け情報を中心に発信

カスタムイベントでも組み込み変数を利用する

GTMでカスタムイベントを使用する際でも「Click Element」等の組み込み変数を用いたいことがあります。データレイヤー変数を用いて任意に設定することが可能です。

イベントの発生時に同時に以下のような情報を送信します。

window.dataLayer.push({
  event: 'eventName', // イベント名
  'gtm.element': element, // 文字列ではなくDOM要素を指定する。Click ElementまたはForm Element
  'gtm.elementClasses': 'classes', // Click ClassesまたはForm Classes
  'gtm.elementId': 'id', // Click IDまたはForm ID'
  'gtm.elementTarget': 'target', // Click TargetまたはForm Target
  'gtm.elementUrl': 'https://example.com/', // Click URLまたはForm URL
  'gtm.videoProvider': 'youtube', // 'Video Provider'
  'gtm.videoUrl': 'https://youtu.be/', // 'Video URL'
  'gtm.videoTitle': 'タイトル', // 'Video Title'
  'gtm.videoDuration': 100, // 'Video Duration'
  'gtm.videoPercent': 10, // 'Video Percent'
  'gtm.videoVisible': true, // 'Video Visible'
  'gtm.videoStatus': 'play', // 'Video Status'
  'gtm.videoCurrentTime': 10, // 'Video Current Time'
  'gtm.scrollThreshold': 10, // 'Scroll Depth Threshold'
  'gtm.scrollUnits': 'percent', // 'Scroll Depth Units'
  'gtm.scrollDirection': 'vertical', // 'Scroll Direction'
  'gtm.visibleRatio': 30, // 'Percent Visible'
  'gtm.visibleTime': 1000 // 'On-Screen Duration'
});

Click TextまたはForm Textの値は"gtm.element"要素で指定されたDOM要素から生成されます。

注意すべき項目としては、{gtm: {element: element}} ではなく{'gtm.element': element}とピリオドでオブジェクトを分割せず、一つのキーとして用いる必要があるということです。 これは各組み込み変数がデータレイヤー変数バージョン1によって利用されていることに起因します。

ユースケース

「すべての要素」クリックトリガーを有効にすると、全ページの全要素のクリックのたびにイベントが発生するようになります。デバッグの際などで邪魔ですし、意図せずサイトに負荷をかけてしまうこともあります。その代わりにカスタムイベントをカスタムHTMLタグ等で追加することで、必要なタイミングでのみイベントを発生させることができます。

ただし、その場合は組み込み変数がデフォルトでは有効になりません。別途データレイヤー変数を追加して対応させることが一般的ですが、このような方法があることを頭に入れておいてもよいでしょう。

カスタムJavascriptとカスタムHTMLの違い

概要

GTM(Google Tag Manager)でJavascriptを用いる方法として、カスタムJavascriptとカスタムHTMLとがあります。カスタムJSとカスタムHTMLとでは、タグと変数という大きな違いがあります。

ですが、その名称からだけでは違いが分かりづらい部分があるため、この記事ではその使い分けと、新機能のカスタムテンプレートへ移行する方法を紹介します。

カスタムJavascript

カスタムJavascriptはユーザー定義変数(ページ変数)の一種です。GTMの説明は以下の通りとなっております。

この変数では、指定した JavaScript 関数に基づきブラウザでその値を計算します。この変数が使用されるたびに、JavaScript 関数が実行され、その戻り値が使用されます。

"カスタム JavaScript"欄内には、"function(){"で始まり、"}"で終わり、"return"で何らかの値を返すJavascript関数を定義する必要があります。"return"文がない場合は未定義値(undefined)が返されます。

Javascript関数内ではGTMマクロを使用することができます。GTMマクロは{{変数名}}の形式で表されるもので、指定の変数の値を取得するためのものです。

カスタムJavascriptは主に他の変数では実現できない、主に計算を伴う値の取得を行う際に用いられます。ユーザーエージェント(window.navigator.userAgent)やページタイトル(document.title)等のWeb APIについては、カスタムJavascriptよりもJavascript変数を利用したほうがよいでしょう。

関連記事

hareno.hateblo.jp

カスタムHTML

カスタムHTMLはタグの一種です。HTML欄内に任意のHTML / Javascriptコードを記載することで、そのコードをページ内に反映させることができます。媒体社から支給されたタグの中でGTMのトラッキングテンプレートがない場合には、このタグを使うことになります。

GTMやブラウザにそのコードがJavascriptコードなのかただの文字列なのかを判断する機能は備わっていないため、Javascriptコードであると示すためには<script>タグで囲う必要があります。既に<script>で囲われている場合に二重で囲う必要はありません。

Javascriptコード内にdocument.write関数が利用されている場合、もしくはタグを同期的に配信する必要がある場合は、「document.write をサポートする」をオンにしてください。

関連記事(外部)

www.pablos.jp

タグと変数の違い

前述したように、カスタムJavascriptはGTM内の「変数」として、カスタムHTMLは「タグ」として動作します。変数とタグでは大きく以下の点が異なります。

  1. 目的の違い
  2. 実行(評価・計算)のタイミング

目的の違い

「変数」は主にその戻り値を利用するためのもの、「タグ」はページに反映するためのものとなります。

計算した結果の数値のみを他のタグやトリガーに利用したい場合は「変数」を、ページに対して変更を加えたり、特定のページにリクエストを送信したい場合は「タグ」を用いるべきです。

実行(評価・計算)のタイミング

変数はトリガーやタグから参照されるたびに計算されます。評価結果の保存は原則なされないため、一つのイベントに対して複数回計算が行われる可能性があります。

タグはトリガーが有効になったタイミングでのみ計算されます。

このため副作用が発生する場合は、積極的にタグを利用するべきでしょう。

カスタムテンプレート

2019年5月24日、GTMにてカスタムテンプレート機能が追加されました。DOMを扱うことができないなど表現の幅に制限はありますが、カスタムJavascriptやカスタムHTMLを一度テンプレート化することができないか、一度検討を行うことをお勧めします。

特に同一のタグを一部のパラメータのみ変更して複数設定するような場合は有効かと考えられます。