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

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

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

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

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

そもそも何が変わったの？
実際に検証してみた
まとめ
最後に

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

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

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

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

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

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

実際に検証してみた

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

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

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

ーーーーーー

検証結果

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

＜ソースコード＞

＜タグ発火確認＞

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

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

＜ソースコード＞

＜タグ発火確認＞

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

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

＜ソースコード＞

＜タグ発火確認＞

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

まとめ

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

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

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