目次 › 第 2 部 導入と初期設定

2.2 ウェブサイトへのタグ設置

gtag.js・Google タグ・CMS プラグインなど、設置方法ごとの手順を解説します。
入門書籍換算 約 12 ページ

この章で学ぶこと

• ウェブ データストリームの作成と測定 ID の確認
• Google タグをサイトの HTML に直接埋め込む方法
• Google タグ マネージャー（GTM）経由で設置する方法
• WordPress などの CMS で設置する方法
• SPA（シングルページ アプリケーション）で気をつけること

測定 ID とは

GA4 にデータを送るには、まずプロパティの中に ウェブ データストリーム を作ります。

ウェブ データストリームの作成

1. 管理画面の「プロパティの設定」→「データの収集と修正」→「データストリーム」を開く
2. 「ストリームを追加」→「ウェブ」を選ぶ
3. ウェブサイトの URL（例：https://www.example.co.jp）とストリーム名（例：「公式サイト」）を入力する
4. 拡張計測機能はオンのままにしておく（次章で詳しく説明します）
5. 「ストリームを作成」を押す

作成が終わると、ストリームの詳細画面に 測定 ID（G- で始まる ID）が表示されます。測定 ID は「どのデータストリームにデータを送るか」を示す宛先のようなもので、タグを設置するときに使います。

ポイント 測定 ID は秘密の情報ではありません。サイトの HTML を見れば誰でもわかる情報なので、公開されても問題ありません。ただし、間違った測定 ID を設置すると、まったく別のプロパティにデータが送られてしまうので、コピー＆ペーストで正確に扱いましょう。

設置方法の選び方

GA4 のタグ（Google タグ）をサイトに設置する方法は、主に次の 3 つです。

今後、ボタンのクリックやフォームの送信など独自の計測を増やしていくなら、GTM 経由がおすすめ です。ただし、まずは GA4 の基本を学びたいという場合は、直接埋め込みから始めても問題ありません。

Google タグを直接埋め込む

ストリームの詳細画面で「タグの実装手順を表示する」を押し、「手動でインストールする」を選ぶと、次のようなコードが表示されます。

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

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

G-XXXXXXXXXX の部分には、自分の測定 ID が入っています。

設置する場所

このコードを、計測したいすべてのページ の <head> タグの直後に貼り付けます。

<!doctype html>
<html lang="ja">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-XXXXXXXXXX');
    </script>
    <meta charset="utf-8">
    <title>ページのタイトル</title>
    ...
</head>

多くのサイトでは、ヘッダー部分が共通のテンプレートになっているので、そのテンプレートに 1 回貼り付ければ全ページに反映されます。

コードの意味

最後の config の行が実行されると、自動的に page_view イベントが送信されます。

注意 同じページに GA4 のタグを 2 回設置すると、ページビューが 2 重に計測されてしまいます。テンプレートとプラグインの両方で設置していないか、GTM と直接埋め込みの両方で設置していないかを必ず確認しましょう。

GTM 経由で設置する

GTM（Google タグ マネージャー）を使う場合は、サイトには GTM のコンテナ スニペットだけを設置し、GA4 のタグは GTM の管理画面で設定します。GTM の詳しい使い方は第 9 部で扱うので、ここでは最低限の手順を紹介します。

手順

1. GTM のアカウントとコンテナを作る：tagmanager.google.com で、ターゲット プラットフォームを「ウェブ」にしてコンテナを作成する
2. コンテナ スニペットを設置する：表示される 2 つのコードを、それぞれ <head> の上部と <body> の直後に貼り付ける
3. Google タグを作成する：GTM で「タグ」→「新規」→「Google タグ」を選び、タグ ID に測定 ID（G-...）を入力する
4. トリガーを設定する：トリガーに「Initialization - All Pages」（または「All Pages」）を選ぶ
5. プレビューで確認する：「プレビュー」を押し、自分のサイトでタグが発火することを確認する
6. 公開する：「送信」→「公開」で本番に反映する

<!-- Google Tag Manager（head の上部） -->
<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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

ポイント GTM のコンテナ ID は GTM- で始まります。GA4 の測定 ID（G-）と混同しないようにしましょう。サイトに埋め込むのは GTM-、GTM の中の Google タグに入力するのが G- です。

WordPress などの CMS で設置する

CMS を使っているサイトでは、HTML を直接編集しなくても設置できることがほとんどです。

WordPress での注意点

WordPress には GA4 を設置できるプラグインやテーマの機能がたくさんあります。便利な反面、次のようなトラブルが起きやすいので注意しましょう。

• テーマの機能とプラグインの両方で設置して、二重計測 になっている
• テーマを変更したら、テーマに設定していた測定 ID が消えて 計測が止まった
• 管理者がログインした状態のアクセスも計測されている

二重計測の確認には、ブラウザでページを開き、HTML のソースを表示して G- で検索するのが手軽です。同じ測定 ID が 2 回以上出てくる場合は、どこかで重複して設置されています。より確実な確認方法は第 6 章で説明します。

SPA（シングルページ アプリ）の注意点

React、Vue、Next.js、Nuxt などで作られた SPA（シングルページ アプリケーション） では、ページを移動しても HTML が再読み込みされず、JavaScript で画面の内容だけが切り替わります。

通常の Google タグは、HTML が読み込まれたタイミングでページビューを送るため、SPA ではページを移動してもページビューが送られない、という問題が起こることがあります。

対応方法

1. 拡張計測機能の「ブラウザの履歴イベントに基づくページの変更」を使う：GA4 は、URL の変化（History API による変更）を検知して自動で page_view を送れます。多くの SPA はこれで対応できます
2. 手動でページビューを送る：ルーターの画面遷移のタイミングで、次のように page_view を送ります

// 例: 画面遷移のたびに呼び出す
gtag('event', 'page_view', {
    page_location: window.location.href,
    page_title: document.title,
});

手動で送る場合は、拡張計測機能の「ページの変更」をオフにしないと二重計測になるので注意しましょう。

注意 SPA では、page_title が古いページのまま送られてしまうことがあります。画面遷移後にタイトルが更新されてからページビューを送るように、開発者と相談して実装しましょう。

まとめ

• ウェブ データストリームを作ると、タグの設置に使う測定 ID（G-...）が発行される
• 設置方法は「直接埋め込み」「GTM 経由」「CMS の機能」の 3 つ。今後計測を増やすなら GTM がおすすめ
• タグは計測したいすべてのページの <head> 直後に設置し、二重設置に注意する
• SPA では、URL の変化に合わせてページビューが送られているかを必ず確認する

次の章では、タグを設置しただけで計測できる「拡張計測機能」の中身と設定方法を学びます。