概要
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変数を利用したほうがよいでしょう。
関連記事
カスタムHTML
カスタムHTMLはタグの一種です。HTML欄内に任意のHTML / Javascriptコードを記載することで、そのコードをページ内に反映させることができます。媒体社から支給されたタグの中でGTMのトラッキングテンプレートがない場合には、このタグを使うことになります。
GTMやブラウザにそのコードがJavascriptコードなのかただの文字列なのかを判断する機能は備わっていないため、Javascriptコードであると示すためには<script>タグで囲う必要があります。既に<script>で囲われている場合に二重で囲う必要はありません。
Javascriptコード内にdocument.write関数が利用されている場合、もしくはタグを同期的に配信する必要がある場合は、「document.write をサポートする」をオンにしてください。
タグと変数の違い
前述したように、カスタムJavascriptはGTM内の「変数」として、カスタムHTMLは「タグ」として動作します。変数とタグでは大きく以下の点が異なります。
- 目的の違い
- 実行(評価・計算)のタイミング
目的の違い
「変数」は主にその戻り値を利用するためのもの、「タグ」はページに反映するためのものとなります。
計算した結果の数値のみを他のタグやトリガーに利用したい場合は「変数」を、ページに対して変更を加えたり、特定のページにリクエストを送信したい場合は「タグ」を用いるべきです。
実行(評価・計算)のタイミング
変数はトリガーやタグから参照されるたびに計算されます。評価結果の保存は原則なされないため、一つのイベントに対して複数回計算が行われる可能性があります。
タグはトリガーが有効になったタイミングでのみ計算されます。
このため副作用が発生する場合は、積極的にタグを利用するべきでしょう。
カスタムテンプレート
2019年5月24日、GTMにてカスタムテンプレート機能が追加されました。DOMを扱うことができないなど表現の幅に制限はありますが、カスタムJavascriptやカスタムHTMLを一度テンプレート化することができないか、一度検討を行うことをお勧めします。
特に同一のタグを一部のパラメータのみ変更して複数設定するような場合は有効かと考えられます。
