【Aurora Design Blocks】Googleアナリティクス・Googleタグマネージャー｜GA4と GTMを設置する方法

公開日: 更新日: 投稿者: tech
目次

ブログやサイトのアクセス解析には欠かせない Google Analytics（GA4） と Google Tag Manager（GTM）。
最近のAurora Design Blocksでは、テーマカスタマイザーから簡単に設置できるようになっています。

この記事では、以下の2つの方法で設置する手順をまとめました👇

  • ✅ GA4のタグを直接貼り付ける方法
  • ✅ GTMのコードを設置する方法（head・body）

① Google Analytics（GA4）のトラッキングコードを貼る

  1. Google Analytics にログイン
  2. GA4プロパティを作成・選択
  3. 左下の「管理」→「データストリーム」→対象のストリームを選択
  4. 「タグの実装手順」→「グローバルサイトタグ（gtag.js）」をコピー

以下のようなコードが表示されます👇

htmlコピーする編集する<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXX');
</script>

G-XXXXXXX の部分は自分の計測IDに置き換わっています。

  1. WordPressの「外観」→「カスタマイズ」→Google Analytics設定 に移動
  2. 表示された入力欄に、上記のコードを丸ごと貼り付け
    　📸（スクショ参考）
  3. 「公開」で保存すれば完了！

② Google Tag Managerのコードを設置する方法

  1. Google Tag Manager にログイン
  2. 新規コンテナを作成 or 既存コンテナを選択
  3. 表示された2つのコードをコピー

以下のような構成です👇

✔ headに貼るコード：

htmlコピーする編集する<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

✔ body開始タグ直後に貼るコード：

htmlコピーする編集する<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

GTM-XXXXXX の部分は自分のGTM IDに置き換えられています。

貼り付け方（WordPressテーマにより対応）

  1. WordPressの「外観」→「カスタマイズ」へ
  2. 「Google Tag Manager 設定」 を選択
    　📸（スクショ参考）
  • 上の入力欄：headタグに出力するコード に <script>〜</script> を貼る
  • 下の入力欄：bodyタグ開始直後に出力するコード に <noscript>〜</noscript> を貼る
  1. 「公開」ボタンで保存すれば設置完了！

🎯 どっちを使えばいいの？

状況推奨
単純にGAだけ使いたいGA4のコードを直接貼るだけでOK
今後広告・イベント管理もしたいGTMを使ってGAを含むすべてを管理

GTMの方が拡張性あり！ GAもGTM経由で入れるのが王道になってきてるよ💡

✅ 最後に｜ちゃんと動作してるか確認しよう

  • GA4の場合：Google Analyticsの「リアルタイム」で自分のアクセスが表示されるか確認
  • GTMの場合：Tag Assistant（拡張機能）を使ってチェック

質問があればWordPressのフォーラムかXのリプライやDMでどうぞ！

𝕏 ブロガー夫婦を をフォローして質問する

※WordPressのフォーラムからお問い合わせはこちらをご覧ください。

To Page Top