概要
Google Tag Manager(以下GTM)では組み込み変数のほかに、ユーザーが自由に設定できる「ユーザー定義変数」という機能があります。以前は「マクロ」と呼ばれていた機能です。ユーザー定義変数はいくつかの変数タイプをもち、変数タイプによって様々な値を取得することが可能となります。
ユーザー定義変数のうち最も自由度の高い変数タイプ「カスタムJavascript」を使えばその他の変数タイプはカバーすることができます。とはいえ、自前で実装をする手間を考えるとその他の変数タイプを知ることで工数削減が見込まれ、エンジニアにとっても有益になるかと思います。
この記事ではウェブ版GTMのユーザー定義変数の変数タイプ別に、実現できる機能を簡単に紹介します。
ナビゲーション
HTTP 参照
組み込み変数のReferrerと同様の値であるJavascript変数"document.referrer"から、以下の要素を選択して取得できます。各項目の詳細についてはURLと同様のため、次節で説明します。
- URL全体
- プロトコル
- ホスト名
- ポート
- パス
- クエリ
- フラグメント
document.referrerでは、簡単に言うと「直前に見ていたページのURI」を取得できます。ただし、HTTPSからHTTPのページへ遷移した場合は直前のURLがすべて、もしくは一部取得できないことがあります。Google アナリティクスにおける「参照元」はdocument.referrerより取得されています。
document.referrerに関する詳細な定義は次のドキュメントを確認してください。
URL
指定したURLソース(取得元)から、以下の要素を選択して取得できます。URLソースのデフォルトはJavascript変数のlocation.hrefです。HTTP 参照の選択肢から「ファイル名の拡張子」が追加されています
- URL全体
- URL全体をフラグメントを除いて取得します
- URLソース中にプロトコルが存在しない場合はそれを補います
- URLソースがデフォルトの場合は組み込み変数のPage URLと同義です
- プロトコル
- ホスト名
- URLソースからホスト名を取得します
- ポート、:記号は含まれません
- 「www.」を除くかどうかというオプションを利用可能です
- URLソースがデフォルトで、www.を除くオプションを利用しない場合は組み込み変数のPage Hostnameと同義です
- ポート
- パス
- URLソースからパス（ホスト名直後の/から?、#または末尾まで）を取得します
- URLソース中にパス部分がない場合は「/」となります
- ?以後、または#以後は含まれません
- URLソースがデフォルトの場合は組み込み変数のPage Pathと同義です
- ファイル名の拡張子
- URLソースからファイル名の拡張子（html や php など）を取得します
- 正確にはURLのパスの最後の「.」から末尾までの部分が抽出されます
- 該当する文字列が存在しない場合は空文字列となります
- こちらのAyudante 畑岡氏の記事が詳しいです
- クエリ
- クエリキーを指定することで、URLソースからそのキーに紐づく値を取得します
- 例えばURLソースが「https://example.com/?key1=value1&key2=value2」であった場合、クエリキーに「key1」を指定することで「value1」を取得します
- 上記URL例にてクエリキーが「key2」であれば「value2」となります
- URLソース中に指定のクエリキーが存在しなかった場合、未定義値 undefined を返します
- フラグメント
- URLソースのデータをフラグメント（#以降の文字列）を取得します
- #は含まれません
- フラグメントが存在しない場合、空文字列となります
ページ変数
Javascript変数
Javascriptのグローバル変数を入力することでその値を取得します。
「.」（ピリオド）によるチェーン呼び出しは可能ですが、スペースや[]、()を含めることはできません。
カスタムJavascript
引数を不要とするJavascriptの関数を入力することで、そのJavascriptの戻り値を取得します。
関数中ではマクロとして他のGTM変数を{{変数名}}の形式で利用することができます。
呼び出し時には都度複数回実行されるため、副作用のある関数を入力することは推奨しません。副作用が発生する場合はカスタムHTMLタグを使うことをお勧めします。
2019/11追記: カスタムJSとカスタムHTMLの違いについて記事を作成しました
データレイヤーの変数
データレイヤー変数に設定されたそのイベント時の値を取得します。
バージョン１ではピリオドを特別扱いしませんが、バージョン２ではピリオドで区切られた階層構造の変数名を受容します。
dataLayer.push({'key': 'value', 'key2': {'child': 'child_value'}}); が実行されたとき、データレイヤーの変数は次のようになります。
- データレイヤーの変数名「key」ではバージョン１でも２でも「value」を取得します。
- データレイヤーの変数名「key2.child」ではバージョン１では「undefined」、バージョン２では「child_value」となります。
バージョン２では変数名に続けてプロパティ呼び出しを記載することができます。例えば変数名に「gtm.element.parentNode.tagName」と指定すると、Click Elementの親要素のタグ名を取得することができます。
window.google_tag_manager[{{Container ID}}].dataLayer.set('key', 'value') を行った場合は、同一イベント内でも評価タイミングによって値が変更されます。
ファーストパーティ Cookie
document.cookieが有効である時のみ機能します。ファーストパーティCookieの名前を指定することで、その名前に紐づく値を取得します。URIエンコード済の場合はデコードを行うオプションも存在します。
取得できるCookieはJavascriptで取得できるものに限り、HttpOnlyのCookieは含まれません。同一名のCookieが複数あった場合、最初の値が選択されます。Javscriptが無効な環境では機能しません。
その名前のCookieが設定されていなかった場合は、undefinedを返します。
未定義値
Javascriptの未定義値、undefindを返します。
GAのパラメータにundefinedを渡すと、そのパラメータは無視されます。特定の条件のときにそのパラメータは不要、という場合に役立ちます。
ページ要素
自動イベント変数
クリックトリガー・履歴の変更トリガーでイベントが発生した際に通知されるデータレイヤーの変数から各変数タイプを参照します。古いGTM設定との互換性を保つために存在していると考えられ、一部機能については組み込み変数を利用するほうがよいでしょう。
Click/Form系組み込み変数については、こちらの過去記事も参考にしてみてください。
Web版GTMの組み込み変数のClick〇〇とForm〇〇について - アクセス解析担当者がGTMについて語るブログ
- 要素
- イベントの対象のDOM要素を返却します
- 組み込み変数 Click Element / Form Element と同義です
- 要素のタイプ
- イベントの対象のDOM要素のTagNameを返却します
- すべて大文字となります
- TagNameが取得できない際はbooleanのfalseを返します
- 要素の属性
- 属性名を指定することで対象のDOM要素から任意の属性を取得できます
- 要素のクラス
- イベントの対象のDOM要素のclass要素を返却します
- 組み込み変数 Click Classes / Form Classes と同義です
- 要素 ID
- イベントの対象のDOM要素のid要素を返却します
- 組み込み変数 Click ID / Form ID と同義です
- 要素ターゲット
- イベントの対象のDOM要素のtarget要素を返却します
- 組み込み変数 Click Target / Form Target と同義です
- 要素テキスト
- イベントの対象のDOM要素内の文字列をよしなに変換したものを返却します
- 組み込み変数 Click Text / Form Text と同義です
- 要素 URL
- イベントの対象のDOM要素内のURLをよしなに取得したものを返却します
- 組み込み変数 Click URL / Form URL と同義です
- 履歴: 新しいURLの一部
- 履歴の変更時に変更後のURLフラグメントを取得します
- 組み込み変数 New History Flagmentと同義です
- 履歴: 古いURLの一部
- 履歴の変更時に変更前のURLフラグメントを取得します
- 組み込み変数 Old History Flagmentと同義です
- 履歴: 新しいステータス
- 履歴の変更時に新しいステートを取得します
ステートについて: ブラウザの履歴を操作する | MDN - 組み込み変数 New History Stateと同義です
- 履歴の変更時に新しいステートを取得します
- 履歴: 古いステータス
- 履歴の変更時に古いステートを取得します
ステートについて: ブラウザの履歴を操作する | MDN - 組み込み変数 Old History Stateと同義です
- 履歴の変更時に古いステートを取得します
- 履歴: 変更の参照元
- どのように履歴が変更されたのかを取得します
- 組み込み変数 History Sourceと同義です
DOM 要素
ページ内のDOM要素をCSSセレクタもしくはIDにて指定し、その属性または内部テキストを取得します。
DOM要素の取得になりますので、この変数タイプはDOM Readyイベント後に参照する場合のみに使用すべきです。
要素の視認性
ページ内のDOM要素をCSSセレクタもしくはIDにて指定し、その要素の視認状態を取得します。視認状態は要素の視認の割合、または特定の割合以上視認されているか否かのBoolean型(True または Falseの値)にて取得できます。
ユーティリティ
定数
不変の文字列を設定します。同じ文字列を複数個所で使用する場合に有用です。
Google アナリティクス設定変数タイプができるまでは、プロパティIDを指定するのに便利でした。
カスタム イベント
データレイヤーの変数'event'を取得します。組み込み変数Eventと同義です。
環境名
実行環境の環境名となります。組み込み変数Environment Nameと同義です。
Google アナリティクス設定
Google アナリティクスの設定が可能となります。Googleアナリティクス（ユニバーサルアナリティクス）タグにて指定することができ、複数のタグに同じ設定をコピペで行う必要がなくなります。
GAタグを入れている場合はほぼ必須の機能でしょう。
ルックアップ テーブル
入力変数が左側の列と同じ文字列だった場合に、同じ行の右列の値を返します。
同じ文字列が左側の列に複数ある場合、下の設定が優先されます。
順々に評価しているため、行が増えるだけ検索速度が増えていく点に注意が必要です。
正規表現の表
入力変数が左側の列の正規表現にマッチした場合に、同じ行の右列の値を返します。オプションで無効にもできますが、左右の組み合わせには()と$1などのキャプチャ・置換機能を利用することが可能です。
ルックアップテーブルでは完全一致する文字列のみだったのですが、正規表現の表により部分一致が可能となりました。時折不具合でチェックボックスが外れるのが難点です。
上から順に評価され、マッチする正規表現があった時点で走査は打ち切られます。ルックアップテーブルと同じく、行が増えるだけ検索速度が増える点に注意が必要です。
乱数
ランダムな数字です。0から2147483647(2の31乗-1)までの整数を返します。
同一のイベント時にも複数回呼ばれた場合はそれぞれ別の値を返します。
コンテナデータ
コンテナ ID
コンテナのGTMから始まるIDことパブリックIDを取得します。GTM自体のスニペットに含まれます。組み込み変数Container IDと同一です。window.google_tag_managerオブジェクト内でのプロパティ名に使用されています。
GTM APIでのコンテナIDとは別の物です。
コンテナのバージョン番号
起動しているコンテナバージョンのバージョン番号を文字列で取得します。プレビューの場合はプレビューのバージョン番号となります。組み込み変数Container Versionと同一です。
デバッグモード
現在のGTMがデバッグモードか否かをtrueかfalseで返します。組み込み変数Debug Modeと同一です。
