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

目次

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

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

  • ✅ GA4のタグを直接貼り付ける方法
  • ✅ GTMのコードを設置する方法(headbody

① 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