Google Tag Managerのcontainer snippetはheadとbodyの二か所を役割で分けて置く

Google Tag Managerのcontainer snippetは、一つのコードをどこかへ貼れば終わるものではありません。head内へ置くJavaScriptと、body開始直後へ置くiframeの二つで一組です。既存のサイトへ追加するときは、先に公開HTMLを見て、同じcontainerがどこから出ているかを確かめます。古いsnippetの上へ新しいsnippetを重ねると、同じ計測を二度送る原因になります。

JavaScriptのsnippetは、ページのhead内のできるだけ上に置きます。タグを早く動かすためです。iframeのsnippetは、body開始直後に置きます。JavaScriptを使わない利用者へのimage pixelと、Google Search Consoleの確認に関わります。片方だけを便利な追加コードとして扱わず、二つの役割と置き場所を分けて確認します。

ここでいう設置場所は、編集画面で見つけやすい場所ではありません。ページを表示するときに必ず通る共通部分です。WordPressならheader.phpだけとは限らず、親theme、子theme、headerを差し替えるplugin、独自の共通templateが候補になります。固定pageの本文へ貼ると、そのpageだけでは動いても、ほかのpageではcontainerが動きません。反対に、全pageで読み込む場所へ貼ったつもりで、別の共通設定からも出力していれば、二重になります。

headとbodyは、同じ文字列を二度貼るための場所ではありません。headのJavaScriptはcontainerを読み込み、設定したtagを動かす入口です。body側のiframeは、JavaScriptを使わない場合にも計測用の画像を使えるようにする部分です。headだけに置いて通常のブラウザーで数字が取れていても、二つのsnippetをそろえたことにはなりません。body側だけを貼って、head側を省くことも、通常のtag運用には向きません。

snippetをコピーするときは、IDだけを書き換えた短いコードを作らない方がよいです。containerの管理画面で示された二つを、それぞれの位置へそのまま置きます。templateの改行や縮進は読みやすさのために直してもかまいませんが、scriptの開始と終了、noscript、iframe、container IDを途中で欠かさないようにします。設置後はブラウザーでpageを開き、表示が崩れていないことと、HTMLに二つの部分が出ていることを確認します。

追加する前に現在の出力を確かめる

サイトのファイルにsnippetがないように見えても、公開HTMLには出ていることがあります。themeのheader、共通template、pluginの設定画面、外部のheader編集機能など、出力する場所が複数あるからです。逆に、管理画面の設定にcontainer IDが残っていても、公開ページへ出ているとは限りません。

公開ページのHTMLでcontainer IDを検索し、headとbodyに必要な一組が出ているかを先に見ます。この確認をせずにtemplateだけを書き替えると、表示しているページと別のtemplateを直してしまうことがあります。IDが二つ以上出る場合は、消す前に出力元を特定します。HTMLからは出力元が分からないので、template、plugin、管理画面を一つずつ照らし合わせます。

確認するpageはtop pageだけに絞りません。お問い合わせ、記事、固定pageなど、siteで使っている表示形式を一つずつ開きます。投稿だけ別のheaderを使うthemeもあり、top pageでは一組でも、記事では二組出ることがあります。ログイン中の管理画面ではpluginの表示が変わる場合もあるため、公開用の画面で見ることが必要です。ブラウザーの「ページのソースを表示」でcontainer IDを検索すれば、少なくとも出力回数は確認できます。

IDが出ないときに、すぐsnippetをもう一組足すのも早計です。ページキャッシュが古いHTMLを返している、編集したtemplateが使用中のthemeではない、headerを出さないtemplateを見ている、といった原因があります。変更したファイル名、変更時刻、確認したURLを残し、どの変更が公開HTMLへ反映したかを一つずつ確かめます。原因を区別しないまま設定を重ねると、次の担当者は何を残してよいか判断できません。

二重に置くと数字の意味が変わる

説明用の仮例として、すでにhead内のJavaScript snippetがあるサイトへ、別の担当者が二つのsnippetを追加する場合を考えます。見た目は変わらず、Tag Managerの管理画面でもcontainerが公開されます。しかし、同じページで同じcontainerが二度読み込まれれば、pageviewやクリックのタグが二度実行されることがあります。

数字が増えても、利用者が増えたとはいえません。計測を確認するときは、ページを一度開いたときに何回送信されたかと、containerが何組出ているかを分けて確かめます。タグを追加する操作と、送られる数字を信用できる状態にする操作は別です。

既存の実装は、直ちに置き替えなければ動かなくなるわけではありません。Googleは既存の設置が動き続けると案内しています。更新する理由が、HTTPSを既定にすることや二つのsnippetを推奨位置へ置くことなら、変更前後でcontainer IDと送信を確認してから、古い記述を一か所だけ外します。

変更は、containerの公開とsite側の設置を別の作業として扱います。containerへ新しいtagを追加して公開しても、site側のsnippetが別のcontainerを読んでいれば、期待したtagは動きません。反対にsite側だけ新しいIDへ替えても、そのcontainerに必要なtagが公開されていなければ、数字は送られません。どちらを誰が変更したか、作業の順序と確認結果を残します。

たとえば、広告のクリックを記録するtagを追加する場合、確認したいのは画面上のボタンが押せることだけではありません。代表となる一つのbuttonを押し、同じ行動に対してtagが一回だけ動くことを確かめます。二度動いた場合は、tagの設定だけでなくcontainerの二重出力も候補に入れます。数字の異常を広告費や集客の変化と決める前に、計測の入口を点検する順序です。

引継ぎで残すべきもの

外部の制作担当がsnippetを追加すると、後から引き継ぐ人は「IDは分かるが、どのファイルを直すのか分からない」状態になりがちです。containerを編集できることと、サイトのコードを安全に変更できることは別の権限です。Tag Managerの利用者権限だけを渡しても、二重出力は直せません。

次の四点を残します。

1. 使用しているcontainer ID。
2. headとbodyを出力しているtemplateまたは設定画面。
3. containerを編集し公開できる人。
4. 変更日と、変更後に確認した代表ページ。

最初の一手は、代表ページのHTMLでcontainer IDを検索することです。headとbodyに何が出ているかを確認してから、snippetを追加するか、既存の記述を更新するかを決めます。

引継ぎの記録は、長い作業日報にする必要はありません。container ID、出力する場所、変更できる人、確認したURLが分かれば、次に直す人は調べ始める場所を失いません。制作会社へ作業を頼む場合でも、containerの管理権限とsiteの管理権限を、依頼先だけに閉じない方が安全です。作業を任せることと、設定の所在を分からなくすることは別です。

containerを増やす必要がある場合もあります。事業ごとに別の計測を管理する、別siteを別の権限で運用するなど、分ける理由が明確なら、一つのpageに複数のcontainerが出ること自体を誤りとは言えません。ただし、その場合は何をどのcontainerで測るかを決め、同じpageviewや同じclickを二重に数えない設定にします。数を増やす前に、分ける目的と責任者を決めることが先です。