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

    カテゴリー

    • WordPress
    • ブログ・SNS運営
    • お知らせ
    • 活動実績・ご感想
    • 思考ログ
    • プログラミング
    • アクセス解析・マーケティング
    • 自動化・ノーコード
    • 遊び・制作ログ

    タグ

    ameliaChatGPTGASGTMHTML/CSSinstagramSEOSWELLWPプラグインZapierアメブロエックスサーバーセキュリティデザイン見本便利ツール初回無料相談制作実績単発レッスン継続レッスン

    アーカイブ

    • 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の場所
    EmiのWebノート
    • プロフィール
    • 無料相談
    • サービス
      • オンライン自習講座
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    EmiのWebノート
    • プロフィール
    • 無料相談
    • サービス
      • オンライン自習講座
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    1. ホーム
    2. アクセス解析・マーケティング
    3. GTM&GA4設定手順

    GTM&GA4設定手順

    2025 8/06
    アクセス解析・マーケティング
    2025-08-06

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

    実施日: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 タグマネージャーのワークスペースを公開します。

    続き

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

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

    趣味は、文房具、ゲーム。最近は英語学習中。運動が苦手で体が硬いのが悩み。最近、腰痛改善にピラティスを始めた。
    プロフィール
    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      ブログ・SNS運営
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      ブログ・SNS運営
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      ブログ・SNS運営
    • Node.js+ExpressでMySQLに接続して一覧表示する
      2020-04-25
      プログラミング
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      ブログ・SNS運営

     

    カテゴリー
    • WordPress (33)
    • ブログ・SNS運営 (25)
    • お知らせ (4)
    • 活動実績・ご感想 (17)
    • 思考ログ (3)
    • プログラミング (13)
    • アクセス解析・マーケティング (2)
    • 自動化・ノーコード (6)
    • 遊び・制作ログ (5)
    タグ
    amelia (3)ChatGPT (1)GAS (1)GTM (1)HTML/CSS (14)instagram (3)SEO (1)SWELL (1)WPプラグイン (5)Zapier (3)アメブロ (14)エックスサーバー (4)セキュリティ (1)デザイン見本 (4)便利ツール (2)初回無料相談 (1)制作実績 (5)単発レッスン (1)継続レッスン (6)
    目次