Googleタグマネージャー（GTM）でタグを足したり直したりしたら、公開する前に必ず動きを確かめます。確かめる道具は2つで、GTMの「プレビュー」から開くTag Assistantと、Googleアナリティクス4（GA4）の「DebugView」です。Tag Assistantは「サイトの中でタグが動いたか」、DebugViewは「GA4にデータが届いたか」を見る道具で、片方だけでは足りません。この記事を読み終わると、サンプル料理教室のサイトで電話タップ・LINE追加・体験申込のタグを確かめ、名前を付けて公開し、壊れたら1分で前の状態に戻せるようになります。前提は、GTMのコンテナがサイトに入っていて、GA4のGoogleタグがGTMの中に1つ置いてあることです。
先に決めること
誰が公開ボタンを押すか
GTMのコンテナの権限は「読み取り」「編集」「承認」「公開」の4段階です。「編集」ではワークスペースの作成と編集はできますが、バージョンの作成と公開はできません。「承認」はバージョンの作成までできて、公開はできません。公開できるのは「公開」の権限を持つ人だけです。
無料のGTMには、公開の前に別の人の承認を通す仕組み（承認ワークフロー）がありません。承認ワークフローはタグ マネージャー 360だけの機能です。小さな会社では、公開の権限を持つ人を1人か2人に絞り、それ以外の人と外部の制作会社は「編集」にしておくのがいちばん事故が少ない形です。サンプル料理教室では、計測を担当する受付の1人と代表だけが「公開」、制作会社は「編集」にしています。
何が起きたら合格かを先に書いておく
プレビューを開いてから「何を見ればいいか」を考えると、確認がその場の思いつきになります。足したタグごとに「どの操作をしたら」「どのタグが発火して」「GA4にどのイベント名とパラメータが届けば合格か」を先に表にしておきます。表は次の節に置きます。この表はバージョンの説明欄にもそのまま使えます。
テストで送った申込をどう扱うか
サンクスページ型の申込計測は、実際にフォームを送信しないと確かめられません。送信すると教室の受付にメールが届き、予約の管理表にも1件増えます。テストの前に受付へ「お名前に『テスト』と入れて送る」と伝えておき、届いたものは受付で消してもらいます。GA4側にもキーイベントが1件記録されますが、件数が少ない月はこの1件が目立つので、テストした日付をメモしておきます。
内部トラフィックの除外を有効にしているか
GA4で教室のWi-Fiと代表の自宅を内部トラフィックとして除外し、データフィルタを「有効」にしている場合は要注意です。実際に運用していると、教室のWi-Fiにつないだパソコンで確認したときに、Tag Assistantではタグが発火しているのにDebugViewに何も出ない、ということが起きます。除外対象のネットワークから送ったイベントはGA4の手前で落とされるためです。確認はスマホのテザリングなど、除外対象ではない回線で行います。内部トラフィックの設定そのものは「自分と社内のアクセスを除外する：IPアドレスの除外と内部トラフィック」で書いています。
確かめる道具と、サンプル料理教室の確認表
道具ごとに見えるものが違います。
| 道具 | 開く場所 | 分かること | 分からないこと |
|---|---|---|---|
| Tag Assistant（GTMのプレビュー） | GTMのワークスペース右上の「プレビュー」 | どの操作でどのタグが発火したか、発火しなかった理由、変数とデータレイヤーの値、GA4へ送ったヒットの中身 | GA4がそのデータを受け取ったか |
| DebugView | GA4の「管理」→「データの表示」→「DebugView」 | GA4に届いたイベントとパラメータ、ユーザー プロパティ | タグが発火しなかった理由 |
| リアルタイム レポート | GA4の「レポート」→「リアルタイム」 | 公開後、デバッグモードではない普通の訪問でもイベントが届いているか | パラメータの細かい中身 |
| Tag Assistantの拡張機能（Chrome） | Chromeウェブストア | iframeの中のタグ、ポップアップや新しいタブの確認 | なくてもプレビューは使える |
サンプル料理教室で今回足したタグの確認表です。イベント名とパラメータは「GTMでボタンのクリックを計測する：電話・LINE追加・資料請求」と「GTMでフォーム送信を計測する：サンクスページ型と送信イベント型」で作ったものです。
| 操作 | Tag Assistantで発火すべきタグ | DebugViewに届くべきイベント | 見るパラメータ |
|---|---|---|---|
| トップを開く | GA4 – Googleタグ | page_view | page_location がトップのURL |
| ヘッダーの電話ボタンを押す | GA4 – 電話タップ | tel_tap | button_location = header |
| 料金ページ下のLINEボタンを押す | GA4 – LINE追加 | line_add | button_location = price_bottom |
| 体験申込フォームを送る | GA4 – 体験申込完了 | generate_lead | page_location が /thanks/ |
| ブログのInstagramリンクを押す | どれも発火しない | 拡張計測の click だけ | 申込系のイベントが出ていないこと |
最後の行のように「発火してはいけない操作」も1つ入れておきます。トリガーの条件が広すぎると、関係ないリンクでも電話タップが数えられてしまうからです。
手順
1. プレビューを開いてサイトにつなぐ
- tagmanager.google.com を開き、サンプル料理教室のコンテナを開く。
- 「ワークスペース」タブの右上にある「プレビュー」をクリックする。新しいタブでTag Assistantが開く。
- サイトのURLに
https://sample-cooking.example/を入れる。 - 「URL にデバッグ シグナルを含める」はチェックを入れたままにする（サイトが崩れるときだけ外す。理由は後述）。
- 「接続」をクリックする。サイトが新しいウィンドウで開き、右下に「接続済み」と出る。
- Tag Assistantのタブに戻り、「続行」をクリックする。デバッグ画面が出る。
サイトが新しいウィンドウで開くのが標準の動きです。Chromeに拡張機能のTag Assistantを入れていると、新しいウィンドウではなく新しいタブで開きます。拡張機能はなくてもプレビューは使えます。入れておくと、iframeの中のタグを見つけられる、ポップアップや新しいタブで開いたページも同じセッションで追える、複数のウィンドウをまとめて見られる、という利点があります。以前あった「Tag Assistant Companion」という拡張機能は、Tag Assistantの拡張機能に統合されました。今から入れるならTag Assistantの拡張機能だけで足ります。
プレビューで見えるのは、プレビューを開いたブラウザ（と共有を受けた人）だけです。普通の訪問者には今までどおり公開済みのバージョンが動きます。プレビュー中に何度タグを直しても、本番のサイトには影響しません。
2. Tag Assistantの画面を読む
デバッグ画面は左の列と右の広い欄に分かれています。
左の列は、ページで起きたイベントの一覧です。ページごとにまとまっていて、別のページに移ると新しいまとまりが上に増えます。イベントには起きた順に番号が付きます。GTMの組み込みトリガーのイベント（ページの読み込み・DOM Ready・ウィンドウの読み込み・クリックなど）には <> のアイコンが付きます。一覧のいちばん上にある「Summary」を選ぶと、そのページで今までに発火したタグがまとめて見えます。
ページの読み込みで起きるイベントは、GTMのページビュー系トリガーの順番どおりに並びます。
| 順番 | トリガーの種類 | 起きるとき |
|---|---|---|
| 1 | 同意の初期化 | ほかのすべてのトリガーより前 |
| 2 | 初期化 | 同意の初期化の次 |
| 3 | ページビュー | ページの読み込みが始まった直後 |
| 4 | DOM Ready | HTMLの読み込みが終わったあと |
| 5 | ウィンドウの読み込み | 画像なども含めて読み込みが終わったあと |
右の欄の上に「Tags」「Variables」「Data Layer」などのタブが並びます（「Data Layer」はヘルプにある表記。ほかのタブ名は画面の表記です）。
- 「Tags」タブ: 左で選んだイベントのときに、発火したタグと発火しなかったタグが分かれて並ぶ。
- 「Variables」タブ: そのイベントの時点での変数の種類、返す値の型、実際の値。
- 「Data Layer」タブ: そのイベントでデータレイヤーにプッシュされた中身と、処理したあとのデータレイヤーの状態。
画面の上には、ページで見つかったGTMのコンテナ（GTM-XXXXXXX）とGA4のGoogleタグ（G-XXXXXXXXXX）が並びます。G-XXXXXXXXXX のほうを選ぶと、GA4へ送ったヒットの一覧に切り替わり、ヒットを開くと送ったイベント名とパラメータが見えます。「タグが発火した」と「GA4へ正しい中身で送った」は別のことなので、ここまで見ます。
G-XXXXXXXXXX を選び、tel_tap のヒットを開いてパラメータが見えている状態サンプル料理教室でやる順番はこうです。
- サイトのウィンドウでトップを開いたまま、Tag Assistantの左の列で「ウィンドウの読み込み」までのイベントを順に選び、「GA4 – Googleタグ」が発火していることを見る。
- サイトのウィンドウでヘッダーの電話ボタンを押す。パソコンでは通話アプリを開くかの確認が出るが、閉じてよい。クリックのイベントはその前に記録される。
- Tag Assistantの左の列に増えたクリックのイベントを選び、「GA4 – 電話タップ」が発火したタグの側にあることを見る。
- 同じイベントで「GA4 – LINE追加」が発火しなかった側にあることも見る。
G-XXXXXXXXXXを選び、tel_tapのヒットにbutton_locationがheaderで入っていることを見る。- 料金ページ、体験申込フォーム、ブログでも、確認表の順に同じことをする。
3. 発火しなかった理由を読む
確認表で「発火すべき」なのに発火しなかった側に並んでいるタグは、そのタグをクリックします。タグの設定内容と、配信トリガー（発火させる条件）、例外（ブロックトリガー。発火を止める条件）が開きます。GTMのタグ設定画面では、発火を止める条件の欄は「例外」という名前です。配信トリガーの条件ごとに、満たしたか満たさなかったかが印で分かるので、満たさなかった条件を探します。
条件の中の変数は、名前で表示するか、そのときの値で表示するかを切り替えられます。値の表示に切り替えると、たとえば「Click URL が tel: で始まる」という条件に対して、実際の Click URL が空だった、ということがすぐ分かります。
サンプル料理教室で実際にあった例です。
| 見えたこと | 原因 | 直し方 |
|---|---|---|
LINEボタンを押しても「GA4 – LINE追加」が発火しない。Click URL の値が空 | ボタンが画像で、クリックが画像に当たっていた。リンクのクリックではなく、すべての要素のクリックとして記録されていた | トリガーの種類を「クリック – リンクのみ」にする |
| フッターの電話番号で「GA4 – 電話タップ」が発火しない | 条件が Click URL の「等しい」で、ヘッダーとフッターで番号の書き方が違った（ハイフンの有無） | 条件を「先頭が一致」で tel: にする |
| サンクスページで「GA4 – 体験申込完了」が2回発火 | トリガーを「ページビュー」と「DOM Ready」の両方に付けていた | 1つだけ残す |
Click Text が「Variables」タブに出ない | 組み込み変数を有効にしていなかった | 「変数」→「設定」で Click Text にチェック |
直したら、GTMの画面でタグやトリガーを保存し、Tag Assistantの画面で同じ操作をもう一度します。直したらプレビューを開き直すのが確実です。
4. DebugViewでGA4に届いたことを確かめる
Tag Assistantでサイトにつなぐと、URLの末尾に _dbg というデバッグ用のパラメータが付きます。これによって、そのブラウザからGA4へ送ったイベントにデバッグモードが付き、DebugViewに出るようになります。自分のブラウザだけにデバッグモードが付くので、普通の訪問者には関係ありません。
- GA4で「管理」を開く。
- 「データの表示」の中の「DebugView」をクリックする。
- 左上の「デバッグに使用するデバイス」で、今プレビューしているパソコンを選ぶ。
- サイトのウィンドウで電話ボタンを押し、中央の列に
tel_tapが出るのを待つ。 tel_tapをクリックし、パラメータにbutton_locationがheaderで入っていることを見る。
つながっていないときは、DebugViewに「デバッグ イベントの待機中」「過去 30 分以内にデバッグ イベントをログに記録した開発用デバイスはありません」と出ます。この表示のままなら、GA4にデバッグ付きのイベントが1件も届いていません。Tag Assistant側でタグが発火しているかを先に見て、発火していれば回線（内部トラフィックの除外）と同意の状態を疑います。
tel_tap が出て、クリックしてパラメータを開いた状態DebugViewは3つの列でできています。
| 列 | 名前 | 中身 |
|---|---|---|
| 中央 | Seconds ストリーム | 過去60秒のイベントが新しい順に並ぶ。クリックするとパラメータが見える |
| 左 | Minutes ストリーム | 過去30分のイベントが1分ずつの丸で並ぶ。丸の数字はその1分に届いたイベント数。丸を押すとその1分が中央に出る |
| 右 | 上位のイベント、現在アクティブなユーザー プロパティ | 直前の30分間で多かったイベントと、選んだデバイスのユーザー プロパティの今の値 |
デバッグモードの付き方は、Tag Assistant以外にもあります。
| 付け方 | 対象 | 使う場面 |
|---|---|---|
| Tag Assistant・GTMのプレビューでつなぐ | 自分のブラウザだけ | ふだんの確認はこれだけで足りる |
Googleタグに debug_mode を true で入れる | そのタグが動くすべての訪問者 | 公開するとすべての訪問がデバッグ扱いになるので、本番では使わない |
GA4イベントタグに debug_mode を true で入れる | そのイベントだけ | 特定のイベントだけ追いたいとき。これも公開したら外す |
gtag.jsを直接書いている場合は、次のように書きます。
gtag('config', 'G-XXXXXXXXXX', { 'debug_mode': true });
gtag('event', 'tel_tap', { 'debug_mode': true, 'button_location': 'header' });debug_mode は、値を false にしても止まりません。止めるときはパラメータごと消します。ここを false にしただけで公開すると、すべての訪問者がデバッグ扱いのままになります。GA4のデータフィルタで「デベロッパー トラフィック」の除外を有効にしていれば、そのあいだのデータはすべて除外され、あとから戻せません。
5. 確認してから公開する順番
確認は、狭いところから広いところへ順に進めます。順番を飛ばすと、どこで壊れたのかが分からなくなります。
- Tag Assistantで、確認表のすべての操作について、発火すべきタグが発火し、発火してはいけないタグが発火していないことを見る。
- Tag Assistantで
G-XXXXXXXXXXを選び、GA4へ送ったヒットのイベント名とパラメータが確認表どおりかを見る。 - DebugViewで、同じイベントとパラメータが届いていることを見る。
- GTMの「ワークスペースの変更」で、今回の変更が意図したものだけかを見る。制作会社が同じワークスペースを触っていた場合、知らない変更が混ざっていることがある。
- バージョン名と説明を書いて公開する（次の節）。
- プレビューを終え、デバッグの付いていない普通のブラウザかスマホでサイトを開き、GA4の「リアルタイム」でイベントが届くことを見る。
4番目で知らない変更が見つかったら、その場で公開しません。誰が何のために変えたかを確かめてからにします。
6. バージョン名と説明を書いて公開する
- GTMのワークスペース右上の「公開」をクリックする。「変更の送信」の画面が開く。
- 送信設定で「バージョンの公開と作成」が選ばれていることを確かめる。
- 「ワークスペースの変更」で変更内容を見る。
- 「バージョン名」と「バージョンの説明」を入れる。
- 環境を複数作っている場合だけ、「環境への公開」で公開先を選ぶ。
- 「公開」をクリックする。
バージョン名は、一覧で見たときに何をした版かがすぐ分かるように書きます。日付と、変えたことを1つだけ書くのが読みやすい形です。
| よくない名前 | 直した名前 |
|---|---|
| （空欄。番号だけになる） | 2026-10-28 電話タップとLINE追加の計測を追加 |
| 修正 | 2026-10-28 フッター電話番号のトリガー条件を先頭一致に |
| テスト用 | 2026-10-28 体験申込完了の二重発火を直す |
説明には、あとから見た人が判断できることを書きます。サンプル料理教室では次の4行を決まりにしています。
変えたこと: GA4 - 電話タップ、GA4 - LINE追加 のタグとトリガーを追加
理由: 体験レッスンの申込が電話とLINEに流れている件数を数えるため
確認したこと: プレビューとDebugViewで tel_tap（header/footer）、line_add（price_bottom）を確認
戻すとき: 1つ前のバージョン（2026-10-01 GA4 Googleタグを設置）を公開する1つの公開で変えることは1つのテーマに絞ります。電話タップの追加とテーマ改修後の直しを同じバージョンに混ぜると、壊れたときに片方だけ戻すことができません。
公開したバージョンは「バージョン」の一覧に残り、「公開済み」の列で公開した日時が分かります。公開せずに保存だけしておきたいときは、「公開」を押したあとの送信設定で「バージョンの作成のみ」を選び、名前と説明を入れて「作成」を押します。
7. 公開したあとに壊れたら、以前のバージョンへ戻す
公開したあとに「申込がゼロになった」「サイトのボタンが押せなくなった」と気づいたら、原因を探す前にまず戻します。戻し方は2つあります。
すぐ止めたいときは、以前のバージョンをそのまま公開します。
- GTMの「バージョン」をクリックする。
- 一覧から、壊れる前に公開していたバージョンをクリックする。
- 行の右端の「︙」を開き、「公開」を選ぶ。
- 普通のブラウザでサイトを開き、症状が消えたことを見る。
直してから出し直したいときは、以前のバージョンを下書きに戻します。
- GTMの「バージョン」をクリックする。
- 戻したいバージョンの行の右端の「︙」を開く。
- 「最新バージョンに設定」を選ぶ。今の下書きが、そのバージョンの中身に置き換わる。
- 必要な直しを入れ、プレビューで確かめてから公開する。
サンプル料理教室では、1つ目の方法で先に止め、2つ目の方法で直して出し直す、という2段にしています。止めるのに1分、直すのは翌日でも間に合います。バージョン名と説明を書いておくと、ここで「どれに戻せばいいか」に迷いません。
応用
制作会社や代表にプレビューを見てもらう
Tag Assistantの「その他の操作」から「共有」を選び、「デバッグ セッションの共有」でドメインとデバッグするタグを入れると、プレビュー用のURLが出ます。これを送ると、受け取った人も同じ下書きの状態でサイトを見られます。テーマの改修を制作会社に頼んだときに、改修後のサイトでタグが動くかを先方の環境で見てもらうのに使えます。保存してあるバージョンなら、「バージョン」の一覧で行の右端の「︙」から「プレビューの共有」でも出せます。
以前のバージョンをプレビューする
「バージョン」の一覧で対象のバージョンの行の右端の「︙」を開き、「プレビュー」を選ぶと、そのバージョンの状態でサイトを見られます。戻す前に「本当にこのバージョンなら動くか」を確かめるときに使います。
テーマの改修日は前後でプレビューする
サイトのテーマは制作会社が直します。テーマを直すと、ボタンの作りやリンクの書き方が変わり、GTMのトリガーが当たらなくなることがあります。改修の前日にプレビューで確認表を一通りやり、改修の当日にもう一度同じことをします。前日に通って当日に通らなければ、原因はテーマの変更だと切り分けられます。
予約システムに移ったあとは追えない
体験申込のあと、通常レッスンの予約と月謝の決済は reserve.example で行います。ここにはサンプル料理教室のGTMが入っていないので、プレビュー中にサイトから予約システムへ移ると、そこから先のイベントはTag Assistantに出ません。予約システム側の計測は「クロスドメイン計測：予約システムや決済ページへ移るサイト」で書いています。
できないことと、その代わり
| できないこと | 代わりの手 |
|---|---|
| プレビューやDebugViewで、そのイベントがどの広告・どの流入から来たかを正しく見る | DebugViewのアトリビューションは限られている。流入は公開後に「集客」のレポートで見る |
| モバイルアプリ用とAMP用のコンテナでデバッグ画面を使う | AMPはサイトのプレビューだけできる。小さな会社のWordPressサイトなら困る場面はほぼない |
| 無料のGTMで、公開の前に別の人の承認を通す | 「公開」の権限を1〜2人に絞る。説明欄に確認したことを書く決まりにする |
| 同意していない訪問をDebugViewで見る | 同意管理を入れているサイトでは、確認するときにCookieバナーで同意してから操作する |
| GTMが入っていない外部ドメイン（予約システム）の中をプレビューで見る | 予約システム側の計測の仕組みを確かめる。クロスドメインの設定を入れる |
| DebugViewで30分より前のイベントを見返す | 確認はその場で済ませる。あとから見るならリアルタイムや通常のレポートで見る |
よく詰まるところ
| 症状 | 原因 | 直し方 |
|---|---|---|
| 「接続」を押してもつながらない | そのURLにGTMのコンテナが入っていない（キャッシュ系プラグインで古いページが出ている、テーマの直しで消えた） | コンテナが入っているはずの別のページで試す。WordPressのキャッシュを消す |
| つながるまで時間がかかり、失敗と出る | タグの読み込みが、Tag Assistantがつなごうとしたときより遅かった | 「Retry」を押す |
| サイトの画面が崩れる、フォームが送れない | URLの末尾に付く _dbg がページの動きを邪魔している | 「URL にデバッグ シグナルを含める」のチェックを外して接続し直す |
| サイトの新しいウィンドウが開かない | Chromeのポップアップブロックで止まっている | アドレスバーのポップアップのブロック表示から「サイトのポップアップとリダイレクトを常に許可する」を選ぶ。Tag Assistantの拡張機能を入れると新しいタブで開く |
| タグが何も発火しない | 広告ブロッカーがタグを止めている | 確認するページで広告ブロッカーを止める |
| 拡張機能を入れたのに動かない | 拡張機能にそのサイトのデータを読み書きする権限がない | 拡張機能の設定で対象サイトへのアクセスを許可する |
| Cookieバナーを入れてからタグが動かない | 同意管理ツールがGoogleタグを止めている | 同意してから確認する。同意管理ツールをGoogleの同意の仕組みに合わせる |
| Tag Assistantでは発火しているのにDebugViewに出ない | 教室のWi-Fiが内部トラフィックとして除外されている／別のデバイスを見ている | テザリングなど除外対象外の回線で確認する。「デバッグに使用するデバイス」を選び直す |
| DebugViewに知らないデバイスが大量に出る | Googleタグに debug_mode を入れたまま公開した | debug_mode を消して公開し直す（false では止まらない） |
| ページビューが2回ずつ数えられる | テーマに直接書いたgtag.jsとGTMのGoogleタグが両方動いている | Tag Assistantで G-XXXXXXXXXX のヒットが2回出ていないか見る。テーマ側の直書きを制作会社に外してもらう |
| リダイレクトのあるページで画面が出ない | 何度もリダイレクトするページはデバッグ画面が読み込めないことがある | リダイレクトしたあとの最終URLで接続する |
| プレビューで動いたのに本番で動かない | 公開していない、別のワークスペースで直した、公開先の環境が違う | 「バージョン」で最新の公開日時と中身を見る |
| 公開ボタンが押せない | 自分の権限が「編集」か「承認」 | 「公開」の権限を持つ人に公開してもらう |
次にやること
- GTMの導入と初期設定：コンテナを作ってサイトに入れ、GA4タグを1つ置く
- GTMでボタンのクリックを計測する：電話・LINE追加・資料請求
- GTMでフォーム送信を計測する：サンクスページ型と送信イベント型
- 計測が取れていないときの点検手順：タグ・トリガー・フィルタ・権限を順に見る