zokuzine

メディアアート(主にProcessing)を勉強中のWEB広告マン。趣味から仕事関連まで幅広く綴るブログ。たまにwebサービス系に課金してレビューしたりします。

【検証してみた】Googleタグマネージャーの仕様変更について

こんにちは。次はprocessingの記事を書くと言いながら、仕事関連の記事を書きます。

 

2016年の9月にGoogle Tag Managerのタグの仕様が変わりました。

多くのWEB広告代理店やサイト運営者の方は戸惑われたのではないでしょうか。

 

本記事については、アカウントIDを入れるだけで適応されるサービスであれば特に支障はないと思いますが、ECサイトの仕様上HEADかBODYにしかタグが貼れないから対応できない!なんて方向けに書いています。

 

 

そもそも何が変わったの?

以前は、<script><noscript>によって構成されており、1つのタグとしてWebサイトの<body>~</body><body>タグ直後に設置する形だったかと思います。

それが新しい仕様になってからは下記のような設置方法に変わりました。

https://gyazo.com/9730783376d09ffb70f5633f55b29efc

  

恐らく、下記要因で仕様変更があったかと考えられます。

<script>JavaScript などのスクリプトを記述する為のタグであり、当タグの目的を達成するものです。それに対して<noscript>は、<script>タグが動作しないブラウザの為のタグであり、<body>~</body>にて記述が必要となります。

 

つまり通常のブラウザであれば、<script>タグが動作してタグの読み込みを行いますが、ブラウザによってはスクリプトが動作しない場合があるので、<noscript>タグでタグの発火を補完しています。

 

ただ、上記記述した通り<noscript>タグは<body>~</body>での記述が必要になる為、以前の仕様ではHTML基本構文上ではタグ発火の最適化が図れない為、今回のように切り分けを行ったのではないかと考えられます。

 

実際に検証してみた

ECシステムやWEBサイトCMSの仕様上でHEADorBODYにしか貼れないからタグマネージャーで制御できないんだけどどうしよう・・・。恐らく、これに悩まされている方が一番多いのではないでしょうか?僕の周りでは結構お話を頂いています。

なので、とてつもなく簡単な環境下のもとで下記検証を行って見ました。

  1. HEAD用タグのみ<head>~</head>に設置
  2. BODY用タグのみ<body>~</body>に設置
  3. HEAD+BODY用タグを<body>~</body>に設置

ーーーーーー

検証結果

1.HEAD用タグのみ<head>~</head>に設置

ソースコード

 <タグ発火確認

https://gyazo.com/139370c5fd3e45372fe8ae38f3a019ea

GHOSTERYにて、Google Tag Managerの発火が確認できました。

 

2.BODY用タグのみ<body>~<body>に設置

ソースコード

 <タグ発火確認

https://gyazo.com/06ab96afd511807fb2e894db6871832a

 GHOSTERYにて、Google Tag Managerの発火が確認できませんでした。

 

3.HEAD+BODY用タグを<body>~</body>に設置

ソースコード

タグ発火確認

https://gyazo.com/46622bb73615fc35a9c8fadc9409b88d

 GHOSTERYにて、Google Tag Managerの発火が確認できました。

 

まとめ

  1. HEAD用タグのみ<head>~</head>に設置 GTM発火
  2. BODY用タグのみ<body>~</body>に設置 GTM発火せず
  3. HEAD+BODY用タグを<body>~</body>に設置 GTM発火

という結果になりました。そもそも、1つにまとまっていた物が最適化のために、2つへ分裂しただけなので、(3)についてはそれを元に戻しただけです。ただ、1点従来と違う点については、タグ発火後にGTMidを読み込む際、iframeを使っていたのがhttpsで読み込む形に変わっています。恐らく、昨今のセキュア環境推奨な流れと仕様変更タイミング掛け合わさって変更しているのだと思われます。タグの内容及び目的は変わらないので、問題ないと思われます。

 

ですので、<body>~</body>にしかタグが貼れない仕様になっているWebサイトについては、(3)のやり方で一応タグの発火は出来るのではないかと思います。本記事には記載をしておりませんが、HEAD+BODY用タグを<head>~</head>に設置でもタグ発火が確認できました。

 

最後に

本記事についてですが、あくまで簡易環境下でタグ発火が出来るかを検証しているだけですので、実運用時にどのような挙動になるかはわかりかねます。ですので、本記事を参考にしたタグマネージャーの運用については、自己責任でお願いいたします。

 

 

以上となります。

次は絶対にprocessingの記事を書きたいと思います。それでは。