0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@UK-44

Google Tag Managerを使用してGoogle アナリティクスを埋め込むハンズオン

0
Posted at

はじめに

Webサイトにアクセス解析を入れるとき、Google アナリティクス（GA4）の計測コードをHTMLに直接貼る方法もありますが、Google タグマネージャー（GTM）を経由させておくと、サイトのコードを変更しなくてもタグの追加・変更が可能になります。

この記事では、GTMを使ってGA4の測定IDをサイトに埋め込み、実際にアクセスが計測されるところまでを手を動かしながら確認します。

前提

  • Googleアカウントを持っている
  • HTMLを編集できるWebサイトがある

手順1：GA4で測定IDを取得する

  1. Google アナリティクス を開く

  2. 初めての場合は「測定を開始」をクリックし、アカウント名・プロパティ名・タイムゾーン・通貨などを入力して進める

    • すでにアカウントがある場合は、左下の「管理」→「作成」→「プロパティ」をクリックして新しいプロパティを作る

  3. プラットフォームで「ウェブ」を選択する
    スクリーンショット 2026-10-01 6.56.10.png

  4. サイトのURLとストリーム名を入力し、「ストリームを作成」をクリックする

  5. 表示された「ウェブストリームの詳細」にある 測定ID（G-XXXXXXXXXX） を控えておく
    スクリーンショット 2026-10-01 6.57.49.png

このあと表示される「タグの実装手順」で案内されるgtag.jsのコードは、サイトに貼りません。GTM経由でも計測するので、両方入れるとページビューが二重に計測されます。

手順2：GTMでコンテナを作る

  1. Google タグマネージャー を開き、「アカウントを作成」をクリックする
  2. 必要事項を入力し、「作成」をクリックする
    • コンテナ名：サイトのドメイン（例：example.com）
    • ターゲットプラットフォーム：ウェブ
  3. 利用規約に同意すると、GTMのインストール用スニペットが表示される

スニペットは2つあります。GTM-XXXXXXX の部分は自分のコンテナIDになっています。

head内に貼るもの
<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
body開始直後に貼るもの
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

手順3：サイトにGTMのスニペットを貼る

計測したいすべてのページについて、次の箇所にスニペットを貼り付けます。

  • 1つ目：<head> のできるだけ上
  • 2つ目：<body> の開始タグの直後

手順4：GTMでGA4のタグを作る

GTMの管理画面に戻り、GA4へデータを送る「Google タグ」を作ります。

  1. 「ワークスペース」→「タグ」→「新規」をクリックする
  2. 左上のタグ名に名前を入力するする
  3. 「タグの設定」をクリックし、タグの種類で 「Google タグ」 を選択する
  4. 「タグID」に、手順1で控えた測定ID（G-XXXXXXXXXX）を入力する
  5. 「トリガー」をクリックし、「Initialization - All Pages」 を選択する
  6. 「保存」をクリックする

手順5：プレビューで動作を確認する

公開する前に、タグが正しく発火するかを確認します。

  1. GTMの画面右上の「プレビュー」をクリックする
  2. Tag Assistantが開くので、サイトのURLを入力し、「リンク」をクリックする
  3. サイトが別ウィンドウで開き、右下に「Tag Assistant に接続しました」と表示される
  4. Tag Assistantのタブに戻り、左側の「初期化」などのイベントを選択する
  5. 「配信されたタグ Fired」に「GA4タグ」が表示されていれば成功

手順6：公開する

プレビューで問題がなければ、変更を公開します。公開するまでは、実際のサイト訪問者には反映されません。

  1. GTMの画面右上の「公開」をクリックする
  2. 「バージョンの公開と作成」を選択する
    ※「バージョンの作成」はバージョンを保存するだけで、サイトには反映されません
  3. 「バージョン名」に GA4タグ追加 など、何を変えたかが分かる名前を入れる
  4. 「公開」をクリックする

公開した内容は「バージョン」タブに履歴として残り、問題があれば過去のバージョンに戻せます。

手順7：GA4で計測を確認する

  1. プレビューを終了してから、通常のブラウザでサイトにアクセスする
  2. GA4の「レポート」→「リアルタイムの概要」を開く
  3. 「過去5分間のユーザー」に自分のアクセスが数えられていれば完了

補足：カスタムHTMLで任意のHTMLを差し込む

GTMで配信できるのは計測タグだけではありません。「カスタムHTML」タグを使うと、任意のHTML・CSS・JavaScriptをページに差し込めます。

  • お知らせバナーやキャンペーン告知の表示
  • 外部ツール（チャット、アンケート、ヒートマップなど）の読み込みスクリプトの設置
  • 特定のページだけに追加したいスタイルや処理

いずれも、アプリのコードを変更・リリースせずに、GTMの管理画面だけで追加・変更・削除できます。

カスタムHTMLタグを作る

  1. 「ワークスペース」→「タグ」→「新規」をクリックする
  2. タグ名を「お知らせバナー」など分かりやすい名前にする
  3. 「タグの設定」をクリックし、タグの種類で 「カスタム HTML」 を選択する
  4. HTML欄に、差し込みたいHTMLを貼る

例として、ページ上部にお知らせバナーを表示するコードです。

カスタムHTMLタグの中身
<style>
  .gtm-banner {
    padding: 12px 16px;
    background: #fef3c7;
    color: #92400e;
    font-size: 14px;
    text-align: center;
  }
</style>
<script>
  (() => {
    const banner = document.createElement('div');
    banner.className = 'gtm-banner';
    banner.textContent = '10月15日 2:00〜4:00 にメンテナンスを実施します';
    
    /* <body> の先頭に要素を入れる */
    document.body.prepend(banner);
  })();
</script>

カスタムHTMLタグの内容は <body> の末尾に追加されます。
挿入位置を指定したい場合は、上の例のようにJavaScriptで指定します。

トリガーで差し込むタイミングとページを決める

トリガーでは、次の2つを組み合わせて設定します。

  • いつ実行するか：トリガーの種類で決める
  • どのページで実行するか：トリガーの条件（Page Path など）で決める

トリガーの種類は、差し込む内容に合わせて選択します。以下は例です。

トリガーの種類 実行されるタイミング 向いているもの
ページビュー GTMが読み込まれた直後
※ページのHTMLは読み込み途中のことがある
外部ツールの読み込みスクリプトなど、ページ内の要素に触らないもの
DOM Ready HTMLの読み込みが終わり、要素が揃った後 ページ内の要素を操作するもの
ウィンドウの読み込み 画像なども含めてすべて読み込み終わった後 画像のサイズを使う処理など
クリック - すべての要素 要素がクリックされたとき 操作に反応して実行したいもの

対象のページは、どのトリガーの種類でも「一部の〇〇イベント」を選択して条件を付ければ絞り込めます。条件を付けなければ全ページが対象になります。

スクリーンショット 2026-10-02 6.14.14.png

全ページ       ：条件なし（すべての〇〇イベント）
特定のページだけ：Page Path  等しい  /news
特定の配下すべて：Page Path  先頭が一致  /news/

上のバナーはページ内の要素（document.body）を操作するので、トリガーの種類は「DOM Ready」を選択します。全ページに出すなら条件なし、特定のページだけに出すなら Page Path の条件を設定します。

確認して公開する

手順5・6と同じく、プレビューで確認してから公開します。

  • 対象のページで、差し込んだHTMLが表示・実行される
  • Tag Assistantで、カスタムHTMLタグが「Tags Fired」になっている

上記の例では以下の通り表示されました。
スクリーンショット 2026-10-02 6.26.32.png

カスタムHTMLを使うときの注意点

手軽な反面、次の点に気をつけてください。

  • レビューを通らないコードが本番で動く：GTMで公開したコードは、アプリのコードレビューやテストを通りません。GTMのユーザー権限で「公開」できる人を絞り、公開前にプレビューで確認する運用にしましょう
  • 画面の変更で壊れやすい：ページ内の特定の要素を操作するコードは、アプリ側でIDや画面構成が変わると動かなくなります
  • 表示されない利用者がいる：広告ブロッカーはGTMごとブロックすることがあります。必ず伝えたい重要なお知らせには向きません
  • CSPを設定しているサイトでは動かないことがある：Content Security Policyでインラインスクリプトを制限している場合、カスタムHTMLのスクリプトは実行されません
  • 表示速度への影響：差し込むスクリプトが増えるほど、ページの表示が遅くなる可能性があります

おわりに

GTMを入れておくと、この先GA4のイベント計測（ボタンのクリックやフォーム送信など）や、ほかのツールのタグを追加したくなったときも、サイトのコードを変更せずにGTMの管理画面だけで対応できます。
まずはGA4の計測を動かし、必要に応じてタグを増やしていきましょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?