▼結論
gtm.js?id=<containar_id>のJavaScriptファイルの中身にて、vtp_javascriptの文字列で検索すると見ることが出来る。
しかし、カスタムJavaScript変数が複数ある場合はどの変数の処理であるかは分からない。
(プレビューURLにて確認した際はどの変数にどのような処理が書かれているかが確認できるため、判別可能)
また、GTMにて設定されたそのままのスクリプトではなく、変数名や文字列が短縮されたり変換された形で表示されることがあるため処理内容を完全に把握することは難しいこともある
※gtm.js?id=<containar_id>の中身は検証ツールのSourcesタブのwww.googletagmanager.com配下またはnetworkタブのリクエストを開くことで確認できる
▼背景
カスタムJS変数の記述がどうなっているかを調べる必要があった。しかし、GTM権限は別会社が持っているため設定を確認することが出来なかった。その中でカスタムJSの記述を調べる方法はないか模索した。
これが可能であれば、GTMで計測設定を行っている各ウェブサイトがどのようなカスタムJS変数を作成しているのかを調べること出来るということになる。
▼調査
事前準備
以下スクリプトのカスタムJS変数をクリックイベントのイベントパラメータとして設定した。
このイベントは要素Ａのクリックをトリガーとしていると想定する。
function() {
return document.title;
}
このJavaScriptの記述をどうにか見つけることが出来ないかを探る
仮説➀クリックイベントのイベントリスナーとして設定されているのではないか？
この仮説を元に、要素Ａに貼られているイベントリスナーを調べる。
以下のようになった。
これは要素Aをクリックするとgtm.js?id=<containar_id>ファイルにて記述している関数が呼ばれていることを表す。
参照先に移動すると以下のようになった。
選択している箇所のfunction(p)が呼ばれているようである。
これではよく分からない...
しかし、gtm.js?id=<containar_id>ファイル内にカスタムJSも記述されてる可能性が高そうだ
仮説➁gtm.js?id=<containar_id>ファイル内をJSの処理にて文字列検索する
今回のケースではカスタムJSに書いた処理が分かっている。そのため、文字列検索を試みた。
検索文字列return document.title
無事見つけることが出来た。
分かったこと
- カスタムJavaScript変数に記述した処理は
gtm.js?id=<containar_id>ファイルに記載されている -
vtp_javascriptというキーの値としてカスタムJSの処理が格納されている
▼補足
- プレビューURLを検証ツールで調べるとデバッグ用のgtm.js..というJavaScriptファイルが存在する
- このファイル内では変数名も表示される
- カスタムJSの処理の中で
const hogehoge = "fugaguga"などと記述していると短縮されて表示される
ex)
処理内容は無視していただきたい。
変数名がaなどに変換されたり、while分がfor文に変換されたりとGTMにて記述した処理とは異なる形で記載されている。
変数名や文字列、コメントアウトのデータ量を削減かつ情報隠蔽が意図されていると推察する。
※カスタムHTMLタグも同様