知らないうちにGTM（DataLayer）が増殖しました！？調査しました！

こんにちは！Webディレクターのオスカーです。

サイト運用において、複数パーティで１つのサイトを管理していて、変なことが起きます。
ある日突然LAYOUTが崩れたり、書いた覚えのないコードが出てきたり、いろいろあります。

今回は不明なDataLayerがあった時の調べ方について、お話しできればと思います。

事象の発生

まずは状況の説明から話します。

とある日、サイトのDataLayerを確認した時に下記のような内容がありました。

あれ？GTMは１つしか使っていないはずなのに、サイトの中に、２つのGTMが検出されています。
取り急ぎ、GTMコードをソースファイルに対して検索かけましたが、やっぱり該当する結果はありませんでした。

ソースコードにないのに、サイトでは不明なGTMコードで、不明なDataLayerが表示されています。

これ見たときに「怖っ！」と思いました。
もしかして、誰かにデータ取られていないかと、心配で仕方がないです。

この事象のことについて、調べたらそんな大変なことではないことがわかりました。
そのまま調べた結果を確認した方が下記のリンクをクリックしてください。

解決へ移動

DataLayerの調べ方

その前に、まずDataLayerの調べ方について説明したいと思います。

最近多くのサイトでGA4を導入していて、基本な導入の場合、特にDataLayerの知識がなくてもよいですが、
EC拡張機能を実装するにあたり、DataLayerで商品情報を送ったり、特定のイベントで、追加の属性を付与したりするため、DataLayerを使うことがあります。

そこで、エンジニアはもちろん、オスカーのようなWebディレクターもDataLayer情報を確認する必要があります。
ここではオスカーのやり方をシェアしたいと思います。

オスカーが使ったのはChromeの拡張機能です。
※他にはFirefoxも使えるそうです。
　https://dataslayer.org/　にてご確認ください。

こちらはChromeストアへのURLです。
dataslayer拡張機能

インストールしたあと、サイトを開いて、「F12」を押して、デベロッパーツールを展開します。

すると、このように、新しいツールが追加されていると思います。

※表示されない場合は、一度Chromeを閉じて再度開いてみましょう。

中身はこのように、URLが表示されます。
ページ移動する際に、新しいタブがどんどん追加していきますので、ページごとに、DataLayerの変化も確認できますので、検証ツールとしてとても使いやすく、オススメです。

こんな感じで展開すれば、GTMや広告のDataLayerを確認できる感じです。
※競合他社さんはどんな情報を持って分析しているか、DataLayerを使った場合は調べられます。

原因（解決）

話戻りまして、下記のGTMは何が目的で設置されたのかを調べます。

この不明のGTMコードの隣に、( )があります。
この( )内の値を「デベロッパーツール」の「ネットワーク」でタブで検索してみました。

すると、「itm.js」が浮上。

このJSがリクエストしたのは「im-apps」というURLがわかります。
つまり、このJSが「im-apps」へリクエストして、DataLayerが形成したことがわかります。

このURLについて調べてみたら、広告会社でした。

なんだ、広告だったのか。。。

つまり、こういうことでした。

1. 広告を出すために、タグを追加しました。
2. タグからJSを形成されました。
3. JSからリクエストしました。
4. JSのレスポンスにGTMコードがありました。
5. GTMが追加されました。

ということでした。
調べた結果、「問題ない」、正常であるということがわかりました。

おわりに

今回の結果で結局なんも問題なかったことがわかりました。
しかし、「問題ない」ことを調べることもとっても重要で、特にクライアントさんから聞かれた場合、
「それ、大丈夫だよ」といえる根拠を調べる能力はエンジニア、Webディレクターにおいてもとっても大切と思います。

今日は、不明なDataLayerについて調べる方法と、「dataslayer」というツールを紹介しました。
今日も見ていただきありがとうございました。
お役に立てれば幸いです。

それでは。