Google Tag Managerの設置場所は一体どこにすれば良いの？
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
Google Tag Manager（GTM）とは？
Google Tag Managerとは、UAによるGoogleアナリティクスを利用している方には特に説明は必要ないと思われるが、ざっくりというと「サイトの利用状態、アクセス状態」がわかるGoogleのツールだ。
- Googleアカウントさえあれば、無料で利用が可能。
- 導入自体は比較的簡単にできる。ネット上にも情報が多い。
- 企業サイトだけでなく、趣味でのブログサイトでも多くの人たちに使用されている。
- 現在のUAによるGoogleアナリティクスは、今年2023年7月に廃止となるので、GTMへの移行が必要。
「Google先生」や「ググる（Googling）」という言葉があるように、Googleは検索エンジン最大手でありかつ身近な存在だ。
「Google Tag Manager（GTM）」はそんなGoogle社による無料ツールなので、ひとまず導入だけしておいて、後から見方を調べていくという流れでも全然OK。
Google Tag Managerを設置後、ページ読み込み速度が悪化。
ところが、GA4への移行に伴い、Google Tag Managerのコードをhead内へ設置したところ、サーバーや回線、もしくはサイト自体との相性が良くないのか、ページの読み込み速度が一気に遅くなった。
ちょこちょこと画像やコードを軽量化したり、数ヶ月ほど様子見をしていたが、改善しない。
それどころかサイト自体が固まってしまうこともあった。（複数のデバイスで確認）
これでは、せっかく訪問しようとしてくれた方々のページ滞在時間も悪化してしまう。
(ですます口調でないことや構成力の問題かもしれないが、当初はただのメモ書きだったのでその名残り。)
今回はクライアントサイトではなく自分のサイトだったので、Google Tag Managerの設置場所を変えて試してみた。
Google Tag Managerのコードを、head内からbodyの閉じタグ前に移動。
改善前（head内へ設置。）
実際のユーザーの環境で評価する
「First Contentful Paint」がレッドゾーンに入っている。かつ、「ウェブに関する主な指標の評価」が「不合格」となっているのが気になる。
パフォーマンスの問題を診断する
「Speed Index」と「Largest Contentful Paint」も遅く、赤字となっている。
レンダリングを妨げるリソースの除外
「第三者コードの影響を抑えてください」の項目で、Google AnalyticsとGoogle Tag Managerのコードが影響してしまっている。
改善後（bodyの閉じタグ前へ設置。）
実際のユーザーの環境で評価する
ここの部分は全く同じ結果が出た。相変わらず「First Contentful Paint」がレッドゾーンに入っており、「不合格」のまま。
パフォーマンスの問題を診断する
「Speed Index」も赤のままだが、「Largest Contentful Paint」が緑に。「パフォーマンス」は改善し、「80」となった。
Tag Manager設置以前の数値に戻った。
レンダリングを妨げるリソースの除外
「第三者コードの影響を抑えてください」も改善。Google AnalyticsとGoogle Tag Managerのコードは表示されなくなった。
アナリティクスは機能しているのだろうか？
本来であれば、「headの開始タグのなるべく近くに貼り付ける。」ということがクイック スタートガイドに記載されている。
参考：クイック スタートガイド | ウェブ トラッキング向け Google タグ マネージャー | Google Developers
しかし、今回のような場合は仕方がない。とりあえず割り切っていく。noscript用のコードも使用しない。
リアルタイムの概要
設置場所をbody閉じタグの前に移動後に、GA4の画面から「リアルタイムの概要」を確認してみると、とりあえず計測はできている模様。
これでちょっと様子を見てみよう。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
