複数のタグ設定のために同じようで微妙に異なるJavaScriptの処理を幾つも書いた結果、GTMがメンテナンスしづらくなってしまったことはありませんか。
今回はこのような状況を解決できるかも知れないプチ上級テクニックを明日から使える具体例により紹介します。
CriteoやLogicadといった動的な情報を送る必要があるタグ設定が多数あるとき、カスタムHTMLタグ内でこのテクニックをうまく使うことでGTM設定をスリム化・コンパクト化できる場合があります。
まとめられる状況例
太文字で示した部分が微妙に異なる複数の変数設定を作成する必要がある場合。複数のカスタムHTMLタグ内で似たような同じ処理を何度も行っている場合。
-
対象の数字 の上位 3 桁を 0 で埋める変数設定（
1→001） -
対象の数字 の上位 5 桁を 0 で埋める変数設定（
1→00001） -
対象の配列 の上位 3 要素だけを取得する変数設定（
["001","005","010","090","110","150"]→["001","005","010"]） -
対象の配列 の上位 5 要素だけを取得する変数設定（
["001","005","010","090","110","150"]→["001","005","010","090","110"]）
使える状況
このテクニックで作成する変数設定は「カスタムHTMLタグ設定内のscript要素内」、「カスタムJavaScript変数設定」で使用することが可能です。
残念ながらGoogle広告やGoogle Analyticsのタグテンプレートのような、フォームに入力するタイプのタグ設定には直接使用できません。これはこのテクニックがGTMの小技と言うよりJavaScriptの仕様を利用する小技だからです。
テクニックが使える場所
テクニックが使えない場所
まとめ方の例
税込み金額変換処理を行う変数設定を作る
処理例： 5000(税抜金額) → 5500(税込金額)
処理を共通化しておけば小数部の処理方法や税率が変わったときも一括修正可能
function(){
var TAX_RATE = 10;
return function(price){
return Math.floor(price * (100 + TAX_RATE) / 100);
}
}
使い方
カスタムJavaScript変数やカスタムHTMLタグのscriptタグ内で
{{処理を行う変数}}( {{priceとして税込み金額化したい価格が入った変数}} )のように関数の後に括弧をつけて、括弧の中に処理に使いたい内容を入れます。
処理を行う変数設定
先ほどの変数設定を使った設定例（説明を簡易にするためカスタムJavaScript変数設定内で例を作成しています）
処理結果
※ 実際の税込み価格と誤差が発生する可能性があるためGTM上で計算を行わずにサイトから税込み金額を出力できるようにサイト側を改修する方が理想的です。
指定の桁数になるように任意の文字で上位桁を埋める変数設定を作る
処理例： 125 (商品ID) → 00125 (0埋めした5桁の商品ID)
function(){
return function(str, padding, len){
return (Array(len-0).join(padding) + str).slice(-len);
}
}
使い方
今度はfunctionの隣の括弧の中身がカンマ区切りでstr, padding, lenと3つに分かれているので、利用する時は
処理したい文字列、桁を埋めるための任意の文字、目的の桁数とカンマ区切りで使いたい内容を入れます。
処理を行う変数設定
先ほどの変数設定を使った設定例
処理結果
指定の配列の上位N要素を取得する変数設定を作る
検索結果に表示された商品を計測タグに送りたいものの、3つまでしか送れないといった制限があるときに便利です。
処理例：長い配列[{"id": "001","price": 500},{"id": "005","price": 300},{"id": "007","price": 1400},{"id": "020","price": 900},{"id": "037","price": 1200},{"id": "050","price": 1500}]から先頭3要素のみ取得
→ [{"id": "001","price": 500},{"id": "005","price": 300},{"id": "007","price": 1400}]
function(){
return function(array, num){
return array.slice(0, num);
}
}
使い方
functionの隣の括弧の中身がカンマ区切りでarray, countと分かれているので、利用する時は
処理したい配列、欲しい要素の数をカンマ区切りで使いたい内容を指定します。
処理を行う変数設定
先ほどの変数設定を使った設定例
処理結果
特定の記号で区切られた文字列の上位N番目の文字列を取得する変数設定を作る
スラッシュ区切りのカテゴリやURLから目的の箇所を抜き出すときに便利です。
動作例: "Apparel/Men/Tops/shirt" → Men
function(){
return function(str, separator, index){
return str.split(separator)[index - 1];
}
}
使い方
functionの隣の括弧の中身がカンマ区切りでstr, separator, indexと分かれているので、利用する時は
処理したい文字列、区切り文字、何番目の要素が欲しいかの数字をカンマ区切りで指定します。
処理を行う変数設定
変数設定を使った設定例
処理結果
複数の配列を結合して重複を排除する変数設定を作る
処理例： [1,2,3]と[3,4,5]と[5,10]の配列を結合して[1,2,3,4,5,10]の配列を作る
実際に使う状況は殆どないと思いますが、カッコ内にカンマ区切りで対象を何個入れても処理できるモジュールも作成可能ということを示すために作ったサンプルです。また、配列内のオブジェクトの重複排除には対応していません。
function(){
return function(){
return Array.from(new Set([].slice.call(arguments).reduce(function(result, arg){
return result.concat(arg);
},[])));
}
}
使い方
カッコの中に結合したい配列をカンマ区切りで羅列して使います。
処理を行う変数設定
変数設定を使った設定例
処理結果
JSチョットワカル人向けの解説
お気づきのとおり、関数を返す関数を作っているのみです。やっていることをJavaScriptのみで説明すると以下のような処理になります。
短く書けてしまうかつ、今後修正する必要がないような処理にはわざわざ使う必要はありません。
おわりに
説明を簡易にするために使用例をカスタムJavaScriptタグで示しましたが、実際にはカスタムHTMLタグ内で使う場合が多いテクニックです。
うまく使うことで設定をシンプル化することが可能ですが、使い方を間違えると不要に複雑にするだけなのである程度GTMを触り慣れた人にオススメします。