Google Tag Managerの設置場所は一体どこにすれば良いの?ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

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内へ設置したところ、サーバーや回線、もしくはサイト自体との相性が良くないのか、ページの読み込み速度が一気に遅くなった。

ちょこちょこと画像やコードを軽量化したり、数ヶ月ほど様子見をしていたが、改善しない。

それどころかサイト自体が固まってしまうこともあった。(複数のデバイスで確認)
これでは、せっかく訪問しようとしてくれた方々のページ滞在時間も悪化してしまう。

(ですます口調でないことや構成力の問題かもしれないが、当初はただのメモ書きだったのでその名残り。)

サイトの読み込み速度を測る、PageSpeed Insights。

今回はクライアントサイトではなく自分のサイトだったので、Google Tag Managerの設置場所を変えて試してみた。


Google Tag Managerのコードを、head内からbodyの閉じタグ前に移動。

改善前(head内へ設置。)
実際のユーザーの環境で評価する

「First Contentful Paint」がレッドゾーンに入っている。かつ、「ウェブに関する主な指標の評価」が「不合格」となっているのが気になる。

PageSpeed Insightsの測定結果。

パフォーマンスの問題を診断する

「Speed Index」と「Largest Contentful Paint」も遅く、赤字となっている。

PageSpeed Insightsの測定結果。

レンダリングを妨げるリソースの除外

「第三者コードの影響を抑えてください」の項目で、Google AnalyticsとGoogle Tag Managerのコードが影響してしまっている。

PageSpeed Insightsの測定結果。


改善後(bodyの閉じタグ前へ設置。)
実際のユーザーの環境で評価する

ここの部分は全く同じ結果が出た。相変わらず「First Contentful Paint」がレッドゾーンに入っており、「不合格」のまま。

PageSpeed Insightsの測定結果。

パフォーマンスの問題を診断する

「Speed Index」も赤のままだが、「Largest Contentful Paint」が緑に。「パフォーマンス」は改善し、「80」となった。

Tag Manager設置以前の数値に戻った。

PageSpeed Insightsの測定結果。

レンダリングを妨げるリソースの除外

「第三者コードの影響を抑えてください」も改善。Google AnalyticsとGoogle Tag Managerのコードは表示されなくなった。

PageSpeed Insightsの測定結果。


アナリティクスは機能しているのだろうか?

本来であれば、「headの開始タグのなるべく近くに貼り付ける。」ということがクイック スタートガイドに記載されている。

参考:クイック スタートガイド  |  ウェブ トラッキング向け Google タグ マネージャー  |  Google Developers

しかし、今回のような場合は仕方がない。とりあえず割り切っていく。noscript用のコードも使用しない。

リアルタイムの概要

設置場所をbody閉じタグの前に移動後に、GA4の画面から「リアルタイムの概要」を確認してみると、とりあえず計測はできている模様。

Google Analyticsのリアルタイム状況。

Google Analyticsのリアルタイム状況。

これでちょっと様子を見てみよう。

Google Tag Managerをhead内からbodyの閉じタグ前に移動してみた。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。