MENU
  • プロフィール
  • 無料相談
  • サービス
    • オンライン自習講座
    • 単発レッスン
    • HP作成5回レッスン
  • 実績・お客さまの声
  • ブログ

    カテゴリー

    • デザインとあそぶ
    • お知らせ
    • 無料ブログから始める
    • 手帳と文具
    • WordPressブログの始め方
    • ブログと歩む
    • 活動実績・ご感想
    • Web制作の学び
    • WordPress&Webサポート
    • 困ったときのQ&A
    • 私らしい世界を作る
    • 暮らしと学び

    タグ

    ameliaChatGPTGASGTMHTML/CSSinstagramSEOWPプラグインZapierアクセス解析セキュリティデザイン見本ドメインブログ引っ越しホームページ制作実績便利ツール初回無料相談単発レッスン継続レッスン自動化・ノーコード

    アーカイブ

    • 2026年3月
    • 2026年2月
    • 2025年12月
    • 2025年10月
    • 2025年9月
    • 2025年8月
    • 2025年7月
    • 2025年6月
    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年9月
    • 2017年7月
    ゼロから始めるWebと創作の記録
    0 Forest
    • プロフィール
    • 無料相談
    • サービス
      • オンライン自習講座
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    0 Forest
    • プロフィール
    • 無料相談
    • サービス
      • オンライン自習講座
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    1. ホーム
    2. 暮らしと学び
    3. Web制作の学び
    4. GTM&GA4設定手順

    GTM&GA4設定手順

    2026 2/23
    Web制作の学び
    2025-08-062026-02-23

    お客様のホームページを分析することになったので、タグマネージャーを設定する方法をまとめます

    実施日:2025/08/06
    ※今後、アップデートなどにより設定方法は変更があるかも

    目次

    GTMとGA4の紐付け

    Googleタグマネージャー(GTM)アカウント作成

    1. Google Tag Manager にアクセス
    アカウントの作成
    • アカウント名:お客様名(会社名やサイト名)※後から変更可能
    • 国:日本

    コンテナを作成

    • コンテナ名:サイト名※後から変更可能
    • ターゲットプラットフォーム:「ウェブサイト」

    利用規約に同意 → 作成完了

    3. サイトにGTMコードを設置

    GTMコードは2つあります:

    1. <head>タグ直下に貼るスクリプト
    2. <body>直後に貼る<noscript>コード
    Screenshot

    WordPress(テーマSWELLを使用)の場合

    外観>カスタマイズ>高度な設定からそれぞれに入力できる欄があるので、コピペする。

    Screenshot

    入力したら、GTMのインストール欄で、URLをいれて、ウェブサイトをテストする。

    Screenshot

    4. Googleアナリティクス(GA4)との連携

    1. GA4プロパティから測定ID(G-XXXXXXXXXX)を取得
    2. GA4の測定IDはよく使うので変数に定義しておく。
      • GTM → 「変数」 → 「新規」
      • 変数タイプ:定数(Constant)
      • 変数名:GA4 Measurement ID(分かりやすい名前)
      • 値:G-XXXXXXXXXX(GA4の測定ID)
    3. GTMで新しいタグを作成
      • タグタイプ:Google アナリティクス→Google アナリティクス ストリームに関連付けられている Google タグを読み込む
      • GA4の測定IDを入力
      • トリガー:All Pages
    4. プレビューで動作確認 → 問題なければ公開
    Screenshot

    すでにHPの方にGA4の測定IDが設定されている場合は 二重計測にならないように消しておく。

    お客様に権限移譲するには
    • 設定が完了したら、お客様のGoogleアカウントを管理者に追加
    • 手順(例:GTM)
      1. GTM → 管理 → 「アカウント設定」 → 「ユーザー管理」
      2. お客様のメールアドレスを追加
      3. 権限:管理者(Publish権限を含む)を付与

    必要に応じて、契約終了後に自分の権限を削除すれば、お客様に完全移譲できます。

    ログインユーザー(管理者)を計測から除外する

    管理者やログインユーザーのアクセスを計測したくない場合があります。
    その場合は、多くのWordPressのテーマで、ログイン時に設定されるlogged-in クラスを活用します。

    ログイン(logged-in)を判別できるクラスを確認

    SWELL の場合は、以下のようなタグが表示されている。

    <div id="body_wrap" class="home ... logged-in admin-bar ...">

    ユーザー定義変数を作成

    1. GTM → 「変数」 → ユーザー定義変数「新規」
    2. 変数タイプ:DOM要素
    3. 設定
      • 選択方法:CSS セレクタ
      • セレクタ:#body_wrap
      • 属性名:class

    これで、logged-in を含む全クラス名が取得できます。

    Screenshot
    Screenshot

    除外トリガーを作成

    1. GTM → 「トリガー」 → 「新規」
    2. トリガータイプ:ページビュー
    3. 条件:Body Wrap Class → 含む → logged-in
    Screenshot
    Screenshot

    タグに除外トリガーを設定

    1. 除外したい GA4設定タグやイベントタグを開く
    2. 「発火トリガー」→「除外トリガーを追加」
    3. 先ほど作った Logged-in を選択
    Screenshot

    プレビューで確認→公開

    • ログイン時:タグが発火しない→GA4のリアルタイムにカウントされない
    • ログアウト時:タグが発火する→GA4のリアルタイムにカウントされる

    これで、ログインユーザーのアクセスは計測から除外されます。


    ここまでできたら、google タグマネージャーのワークスペースを公開します。

    続き

    クリック数とスクロール率を計測するタグを設置する。

    Web制作の学び
    GTM アクセス解析
    よかったらシェアしてね!
    中谷恵美
    東京在住のフリーランス。システムエンジニア、ITコンサルタントを経て、現在はホームページ・ブログ作成、集客などのレッスンをしています。

    趣味は、文房具、ゲーム。最近は英語学習中。運動が苦手で体が硬いのが悩み。最近、腰痛改善にピラティスを始めた。
    プロフィール
    人気記事
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      私らしい世界を作る
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      無料ブログから始める
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      私らしい世界を作る
    • 箇条書きリストをおしゃれにするCSS10個
      2018-11-29
      私らしい世界を作る
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      私らしい世界を作る
    カテゴリー
    • お知らせ (2)
    • 活動実績・ご感想 (17)
    • WordPress&Webサポート (49)
      • 無料ブログから始める (10)
      • WordPressブログの始め方 (17)
      • 困ったときのQ&A (15)
    • 私らしい世界を作る (17)
      • デザインとあそぶ (4)
      • ブログと歩む (4)
    • 暮らしと学び (31)
      • 手帳と文具 (2)
      • Web制作の学び (25)
    目次