GTMにてカスタムテンプレート機能でオリジナルのタグ・変数が作成可能になりました

APIの一覧に記載のある処理＝APIへ置換する必要のある処理

公式のヘルプには「コンソールへログを出す」APIや「（元）ページのURLを取得する」APIなどが掲載されていますが、逆に言うとこれらの処理を行うにはAPIを利用する必要があります。
主に「元ページへアクセスする」処理全般ですね。

例えばページURLの参照であれば、本来なら「window.location.href」で一発なんですが、カスタムテンプレートはサンドボックスとして元ページからは切り離されて処理されるため「window.location.href」では取得できません。

元のJS

var url = window.location.href;

カスタムテンプレート化する際に置換した場合

var getUrl = require('getUrl'); // 元ページのURLを取得するAPIを有効化

var url = getUrl(); // ↑でrequireしたurl変数が関数として動作する

APIをテンプレート内で利用するには別途API利用の宣言の記述が必要

APIはJS関数として用意されていますが、実際に利用しようとすると別途「APIを利用するための宣言」の記述が必要になります。
それが「require('利用したいAPI名');」関数です。

サンプル

var getUrl = require('getUrl');

使い方としては「var 変数名 = require('利用したいAPI');」と記述することで、「変数名」で指定した変数がAPIの機能を持つ関数になります。
上記サンプルであれば、上記のrequire処理以降の行ではgetUrlがURLを取得する関数として動作するようになります。

基本的にAPIで指定する項目は権限の設定が必要

コード内でAPIがrequireされると、設定の権限タブへ必要な権限の設定メニューが追加されます。

設定欄で「*（任意）」が入力可能、みたいに記載があればその項目では任意の文言が設定可能です。
逆にその説明がない項目については固定文言で入れなければならないため、注意が必要です。

GTMへ登録されている各種「変数」の値を取得するには「項目」タブで入力欄を用意し、ユーザーに変数を指定させる必要がある

GTMの本体そのものはカスタムテンプレートを処理するサンドボックス内ではなく元のページ側に存在しているため、GTMが持っている変数のデータなどはAPIを使わなければアクセスできません。
しかし「データレイヤー変数へアクセスする」copyFromDataLayerや「windowオブジェクトの変数をコピーする」copyFromWindowは用意されていますが、「〇〇という名前でGTMへ登録されている変数の値を取得する」ような動作が可能なAPIは存在しません。

そのため「GTMへ登録されている変数」をカスタムテンプレート内で参照したい場合は、別途「項目」としてユーザーに変数を入れられる入力項目を用意し、その項目の値として受け取る必要があります。

データレイヤー変数を取得する場合、プロパティは取得できるがオブジェクトは取得できない

copyFromDataLayerというAPIでデータレイヤー変数の値は取得できますが、このAPIではオブジェクトは取得できないため、注意が必要です。
具体的に言えば「gtm.element.innerText」のような末端プロパティは取得できますが、「gtm.element」みたいに本来であればオブジェクトとして取得されるものはundefinedになってしまいます。

そのため、もともとのカスタムHTMLタグやカスタムJS変数で「gtm.element」をオブジェクトとして取得し、そこから必要なプロパティのデータへアクセスするような作りにしていた場合は改修が必要となります。
ごそっとオブジェクトとして持ってくるのではなく、必要なプロパティを算出してから引っ張ってくる形ですね。

データレイヤー変数の参照は「.」繋ぎでなければならない

copyFromDataLayerでデータレイヤー変数へ参照する場合、データレイヤー変数名の指定は必ず「.」繋ぎでなければなりません。「gtm.element.attributes.hogehoge.value」のような書き方です。
逆に言うと「gtm.element.attributes['hogehoge'].value」みたいな書き方だとエラーになってしまいます。

普段はこの制限はあまり気にならないかと思いますが、「.」繋ぎでの記述では属性値に「-」を含む指定（例：data-ga-event属性、みたいな）はNGです。

〇　gtm.element.attributes.hogehoge.value
×　gtm.element.attributes.hoge-hoge.value

本来のJSであれば.attributes.hogehogeは.attributes["hogehoge"]で代替できますがこの表記はできないため、別の代替手段を探す必要があります。
この場合であれば.attributesの代わりに.datasetへ変えて、.datasetだとdata-hogehoge-hogehogeはdataHogehogeHogehogeのようにキャメルケースになりますので、手動でキャメルケースに置換して代替できます。

コード内で正規表現は利用不可能

JSでは正規表現を使うことで、例えば文言の一部分を抜き出したり、置換したりなどができます。
しかしカスタムテンプレートでは正規表現は使用できないよう制限がかけられているため、別途正規表現を使わずに実現する方法を考えなければなりません。

正規表現による置換処理の代替例

split()関数で置換したい文字列単位で分割して、join()で置換後の文字列を繋ぎ文字にして再連結する、など

サンプル1：データレイヤー変数へ値をpushするテンプレート

ダウンロード

データレイヤー変数のセット.tpl（圧縮されています）

データレイヤー変数へ値を渡すためのカスタムタグテンプレートです。
渡したいデータレイヤー変数名を左側へ入力すると、タグが処理された際に右側の値へ設定した内容がセットされます。
また行を追加することで複数のデータレイヤー変数へ同時に値を渡すことができるほか、eventへ対して値をセットすることでカスタムイベントトリガーを呼び出す、といった使い方もできます。

なお利用上の注意点として、データレイヤー変数をデフォルト名（dataLayer）以外で運用している場合は以下の二か所へ修正が必要です。

デフォルト名以外でデータレイヤー変数を使っている場合の要修正箇所

• 「コード」タブの21行目で指定している「('dataLayer')」の箇所を、実際に利用しているデータレイヤー変数名へ変更
• 「権限」タブの「グローバル変数へのアクセス」で設定しているキーを、実際に利用しているデータレイヤー変数名へ変更

また、なぜかこのテンプレートだけテンプレート詳細画面を開くとConsoleへエラーメッセージが出るのですが、右上のメニューから「詳細設定を表示する」を有効化するとエラーメッセージは消えます。
動作上は問題ありません。

サンプル2：指定の変数から任意のクエリを除去するテンプレート

ダウンロード

クエリ除去.tpl（圧縮されています）（2019/06/21 一部修正を行いました）

改良版を「Trim Query」という名称で、コミュニティテンプレートとしてテンプレートギャラリーへアップロードしました。
現在はGTM内の「テンプレート > 変数テンプレート > 検索ギャラリー > Trim Query」からインポートして利用が可能です。

指定した変数から、指定したクエリを除去した文字列を返すカスタム変数テンプレートです。
「?」で始まるクエリの他、「#」で始まるハッシュタグのどちらにも対応できます（両方にも同時対応できます）。

具体的な利用イメージとしては、GAでリンクURLをイベント計測しようとする際、クロスドメイントラッキング対象のリンククリック時に入ってしまう_gaクエリを抜いたりするのに使えると思います。
地味に入り込んだりして面倒ですよね、あれ。

サンプル3：親要素から任意の属性値を取得するテンプレート

ダウンロード

親要素の情報取得.tpl（圧縮されています）

改良版を「Parent Element Variable」という名称で、コミュニティテンプレートとしてテンプレートギャラリーへアップロードしました。
現在はGTM内の「テンプレート > 変数テンプレート > 検索ギャラリー > Parent Element Variable」からインポートして利用が可能です。
詳細は「About Parent Element Variable of community template」記事をご参照ください。

自動イベント変数の要素（リンククリックであればaタグ、クリックであればクリックされた最も子要素、フォームの送信であればformタグ）から、指定した属性を持つ親要素へ遡って属性の値（またはテキスト）を取得するカスタム変数テンプレートです。
具体的には、クリックトリガー（すべての要素）でaタグ内のspanタグがクリックされた時などでも親要素のaタグのリンクURLを取得できたりします。
要は以前「クリックトリガーで親要素のaタグのリンクURLを取得する方法」で紹介したカスタムJS変数をテンプレート化したものですね。

URL（href）、ID、classの他に任意の属性（自由入力）に対応させてあります。
また、属性の値だけでなく、テキストも取得可能です。