Googleタグマネージャーのプレビューモードの使い方と確認方法

Googleタグマネージャーのプレビューモードは、Webサイトに設定したタグが正しく動作しているかを確認するための便利な機能です。
このモードを使えば、タグが正確に発火しているかどうかをテストできます。

この記事では、プレビューモードの基本的な使い方から、設定方法、そしてよくある問題の解決策まで、わかりやすく解説します。
特に初心者の方でも安心して理解できるように、専門用語はできるだけ使わずに説明しています。これを読めば、Googleタグマネージャーのプレビューモードを効果的に活用し、Webサイトのタグ管理をスムーズに行うための基礎知識が身につきます。
ぜひ参考にして、実際の業務に活かしてください。

---

GA4、GTM 個別サポート（無料）のご案内

GA4・GTMの設定やデータ活用でお悩みの方へ、初回限定で無料の30分相談を実施しています。
この相談では、GA4やGTMの基本設定やデータの見方について具体的なアドバイスをおこないます。ご自身でGA4、GTMを活用する第一歩のサポートを目的に、無理な売り込みは一切ありませんので、どうぞお気軽にご利用ください。

Webマーケティング関連書籍を多数執筆、全国でわずか100人程度のプロのウェブ解析士マスターが直接アドバイスします。

---

プレビューモードの使い方と確認方法

プレビューモードの起動方法

Googleタグマネージャーのプレビューモードを使うことで、設定したタグが正しく動作しているかを確認できます。以下の手順でプレビューモードを起動しましょう。

1. Googleタグマネージャーにログイン：Googleタグマネージャーのアカウントにログインします。ログインしたら、プレビューモードを使用するコンテナを選択します。
2. プレビューモードを起動：右上の「プレビュー」ボタンをクリックします。
   
3. 新しいタブが開き、「タグアシスタント」が表示されます。
4. プレビューモードを設定：プレビューを行いたいWebサイトのURLを入力し、「開始」をクリックします。
   
5. プレビュー用のウィンドウが開きます。このウィンドウでタグの動作を確認できます。

タグの確認手順

プレビューモードを起動したら、次はタグの確認手順です。

1. プレビューウィンドウを確認：プレビューウィンドウが開いたら、ページを操作してタグが発火するタイミングを確認します。
2. タグアシスタントのチェック：プレビューウィンドウの下部に表示されるタグアシスタントで、発火したタグを確認できます。発火したタグは「Tags Fired」セクションに表示されます。
3. 詳細情報の確認：各タグをクリックすると、詳細情報が表示されます。ここで、タグの発火条件や送信データを確認できます。

正しい動作の確認ポイント

タグが正しく動作しているかを確認するためには、以下のポイントに注意しましょう。

• タグの発火条件の確認
  タグが指定した条件で発火しているかを確認します。
  例えば、ページビュータグがページ読み込み時に発火しているかどうかをチェックします。
• 送信データの確認
  タグが正しいデータを送信しているかを確認します。
  送信されたデータが目的通りの内容になっているかをチェックします。
• エラーメッセージの確認
  タグアシスタントにエラーメッセージが表示されていないか確認します。
  エラーメッセージがある場合、その内容を確認して対処します。

表とリストの使用例

タグの発火条件チェックリスト

正しい動作の確認リスト

• タグの発火条件の確認
  • ページ読み込み時の発火
  • ボタンクリック時の発火
  • フォーム送信時の発火
• 送信データの確認
  • 正しいデータが送信されているか
  • データ形式が適切か
• エラーメッセージの確認
  • エラーが表示されていないか
  • エラーの原因を特定し、修正する

さらに詳しい情報が必要な場合は、以下のリンクを参考にしてください：

• Googleタグマネージャー公式ドキュメント

これらのステップを踏むことで、Googleタグマネージャーのプレビューモードを効果的に活用し、タグの設定と動作を確認できます。

タグの発火をデバッグモードで確認する

デバッグモードの設定方法

デバッグモードは、Googleタグマネージャーで設定したタグが正しく動作しているかを確認するための機能です。
以下の手順でデバッグモードを設定します。

1. Googleタグマネージャーにログイン：Googleタグマネージャーにログインします。使用するコンテナを選択します。
2. プレビューモードを起動：左側のメニューから「プレビュー」をクリックします。新しいタブが開き、「タグアシスタント」が表示されます。
3. デバッグモードを設定：プレビューするWebサイトのURLを入力し、「開始」をクリックします。
   
4. プレビューウィンドウが開きます。このウィンドウでデバッグモードが有効になります。

タグ発火の確認方法

デバッグモードを設定したら、次にタグが正しく発火しているかを確認します。

1. プレビューウィンドウを操作：プレビューウィンドウが開いたら、Webサイトを通常通り操作します。タグが発火するアクション（ページ読み込み、ボタンクリックなど）を実行します。
2. タグアシスタントの確認：プレビューウィンドウの下部に表示される「タグアシスタント」パネルを確認します。発火したタグは「Tags Fired」セクションに表示されます。
3. 詳細情報の確認：発火したタグをクリックすると、詳細情報が表示されます。タグの発火条件や送信データが正しいかを確認します。

よくあるエラーと対策

デバッグモードでタグを確認していると、エラーが発生することがあります。
以下は、よくあるエラーとその対策です。

• タグが発火しない
  • 原因：設定したトリガーが正しく動作していない可能性があります。
  • 対策：トリガーの条件を再確認し、必要に応じて修正します。
• データが送信されない
  • 原因：タグの設定が間違っているか、必要なデータが欠けている可能性があります。
  • 対策：タグの設定を見直し、送信するデータが正しく設定されているか確認します。
• エラーメッセージが表示される
  • 原因：タグの設定に誤りがあるか、他のタグとの競合が発生している可能性があります。
  • 対策：エラーメッセージの内容を確認し、指示に従って設定を修正します。

リストの使用例

タグ発火の確認手順

1. ページ読み込み時の発火を確認
2. ボタンクリック時の発火を確認
3. フォーム送信時の発火を確認

エラー対策のステップ

1. トリガー設定の再確認
2. 送信データの検証
3. エラーメッセージの分析と修正

デバッグモードを正しく使うことで、Googleタグマネージャーで設定したタグが期待通りに動作しているかを確認し、問題が発生した場合には迅速に対応できます。

Chrome拡張機能を使ったデバッグ

Chrome拡張機能のインストール方法

Chrome拡張機能を使ってデバッグするためには、まず拡張機能をインストールする必要があります。
ここでは、Googleタグアシスタントのインストール方法を説明します。

1. Chromeウェブストアにアクセス：Chromeウェブストアにアクセスします。
2. Googleタグアシスタントを検索：検索バーに「Googleタグアシスタント」と入力し、検索します。
3. 検索結果から「[DEPRECATED] Tag Assistant Legacy」を選択します。
   
4. 拡張機能を追加：「Chromeに追加」ボタンをクリックします。
5. ポップアップが表示されたら「拡張機能を追加」をクリックしてインストールを完了します。

拡張機能を使ったデバッグ手順

拡張機能をインストールしたら、次はデバッグ手順です。
拡張機能を使うことで、タグの発火状況やエラーを簡単に確認できます。

1. 拡張機能を起動：Chromeブラウザの右上にあるパズルピースのアイコンをクリックし、インストールした「タグアシスタント」を選択します。
2. デバッグを開始：デバッグしたいWebサイトにアクセスします。
3. タグアシスタントのアイコンをクリックし、「Record」を選択します。
   
4. Webサイトの操作：Webサイトを操作し、タグが発火するアクションを実行します（例：ページ読み込み、ボタンクリックなど）。
5. デバッグ情報の確認：記録が終了したら、タグアシスタントのアイコンをクリックして「記録停止」を選択します。
6. タグアシスタントが記録したデータを確認し、タグの発火状況やエラーをチェックします。

プレビューモードとの連携

Chrome拡張機能とプレビューモードを連携させることで、より詳細なデバッグが可能になります。

1. プレビューモードを起動：Googleタグマネージャーにログインし、プレビューモードを起動します（詳細は前述の「プレビューモードの起動方法」を参照）。
2. 拡張機能の起動：Chromeブラウザでプレビューモードが有効になったWebサイトにアクセスします。
3. タグアシスタントの拡張機能を起動し、「記録開始」を選択します。
   
4. タグの発火確認:プレビューモードとタグアシスタントを使用して、タグが正しく発火しているかを確認します。
5. エラーチェック：タグアシスタントで記録したデータを確認し、エラーメッセージが表示されていないかチェックします。エラーがあった場合、その詳細を確認し、必要な修正を行います。

リストの使用例

Chrome拡張機能のインストール手順

1. Chromeウェブストアにアクセス
2. Googleタグアシスタントを検索
3. 「Chromeに追加」をクリック
4. 「拡張機能を追加」をクリック

拡張機能を使ったデバッグ手順

1. 拡張機能を起動
2. デバッグ開始
3. Webサイトの操作
4. デバッグ情報の確認

プレビューモードとの連携手順

1. プレビューモードを起動
2. 拡張機能の起動
3. タグの発火確認
4. エラーチェック

Chrome拡張機能を使うことで、Googleタグマネージャーのデバッグ作業がより効率的になります。
これにより、タグの設定ミスを防ぎ、正確なデータ収集を実現できます。

タグの設定と公開までの流れ

タグの設定方法

タグの設定は、Googleタグマネージャーを使って簡単に行うことができます。
以下の手順で進めてみましょう。

1. Googleタグマネージャーにログイン：Googleタグマネージャーにログインします。使用するコンテナを選択します。
2. 新しいタグの作成：「タグ」タブをクリックし、「新しいタグ」を選択します。
   
   • 「タグの設定」をクリックし、タグタイプを選択します。例えば、Googleアナリティクスのタグを追加する場合は「Google アナリティクス」を選びます。
     
3. タグの設定：必要な情報を入力します。Googleアナリティクスの場合は「タグID」を入力します。
   
   • 「トリガー」セクションをクリックし、タグを発火させる条件を設定します。例えば、全ページでタグを発火させたい場合は「全ページ」を選択します。
     
     
4. タグの名前を設定：タグにわかりやすい名前を付けます。例えば、「GA – 全ページビュー」とします。
5. 「保存」をクリックして設定を完了します。

公開前のチェックポイント

タグを設定したら、公開前に必ず確認しておくべきポイントがあります。
以下のチェックリストを参考にしてください。

チェックリスト

公開手順の詳細

すべてのチェックが完了したら、タグを公開します。以下の手順でタグを公開しましょう。

1. 公開の準備：「公開」ボタンをクリックします。
2. 「バージョンを作成して公開」を選択します。
3. バージョンの作成：バージョン名とバージョン説明を入力します。例えば、バージョン名は「初回公開」、説明は「全ページビュータグの設定」とします。
   
4. 公開の確認：「公開」ボタンをクリックします。
5. 公開が完了すると、タグが設定されたすべてのページで有効になります。

リストの使用例

タグ設定の手順

1. Googleタグマネージャーにログイン
2. 新しいタグを作成
3. タグの設定（トラッキングID、トリガーの設定）
4. タグの名前を設定して保存

公開前のチェックポイント

1. タグの名前を確認
2. トラッキングIDを確認
3. トリガーの設定を確認
4. プレビューモードでテスト

公開手順の詳細

1. 公開の準備（「公開」ボタンをクリック）
2. バージョンの作成（バージョン名と説明を入力）
3. 公開の確認（「公開」ボタンをクリック）

この手順に従うことで、Googleタグマネージャーで設定したタグを正確に管理し、問題なく公開することができます。
これにより、Webサイトのパフォーマンス向上に役立つデータを収集できます。

GTMプレビューモードのよくある問題と解決策

プレビューモードが動作しない原因

GTM（Googleタグマネージャー）のプレビューモードが動作しない場合、いくつかの原因が考えられます。
ここでは、よくある原因をいくつか挙げてみます。

• ブラウザのキャッシュが原因
  ブラウザのキャッシュが原因で、最新のタグ設定が反映されないことがあります。
• 拡張機能の競合
  Chromeなどのブラウザにインストールされている他の拡張機能がGTMの動作を妨げている可能性があります。
• タグの設定ミス
  タグの設定が正しく行われていないと、プレビューモードが正しく動作しません。
  特に、トリガーの設定が間違っている場合が多いです。
• サードパーティーCookieの無効化
  プレビューモードはサードパーティーCookieを使用して動作します。
  ブラウザでこれが無効化されていると、プレビューモードが動作しません。

問題解決の手順

プレビューモードが動作しない場合、以下の手順で問題を解決できます。

1. ブラウザのキャッシュをクリアする：ブラウザの設定メニューからキャッシュをクリアします。キャッシュをクリアした後、再度プレビューモードを試してみてください。
2. ブラウザの拡張機能を無効化する：一時的にすべての拡張機能を無効化し、プレビューモードを試します。これで問題が解決した場合は、特定の拡張機能が原因であることがわかります。
3. タグとトリガーの設定を確認する：Googleタグマネージャーで設定したタグとトリガーが正しいか確認します。特に、トリガーの条件が正しく設定されているかを確認します。
4. サードパーティーCookieを有効にする：ブラウザの設定でサードパーティーCookieを有効にします。これが原因の場合、プレビューモードが正常に動作するようになります。

リストの使用例

キャッシュのクリア手順

1. Chromeブラウザを開く
2. 右上のメニューから「設定」を選択
3. 「プライバシーとセキュリティ」を選択
4. 「閲覧履歴データの削除」をクリック
5. キャッシュとCookieを選択し、「データを削除」をクリック

拡張機能の無効化手順

1. Chromeブラウザを開く
2. 右上のメニューから「その他のツール」→「拡張機能」を選択
3. すべての拡張機能のスイッチをオフにする

これらの手順に従うことで、GTMのプレビューモードが正常に動作するようになります。
問題が発生した場合は、上記のチェックリストと手順を参考にして対処してください。

まとめ

Googleタグマネージャーのプレビューモードは、設定したタグが正しく動作しているかを確認するための重要な機能です。プレビューモードを使うことで、ページを実際に公開する前に、タグが正確に発火しているかを確認できます。プレビューモードが動作しない場合は、ブラウザのキャッシュをクリアしたり、拡張機能を無効化することで解決することが多いです。また、トリガーの設定やサードパーティーCookieの有効化もチェックポイントです。

Chrome拡張機能を使うことで、さらに詳細なデバッグが可能になります。拡張機能をインストールし、タグアシスタントを使ってデバッグすることで、タグの発火状況やエラーを簡単に確認できます。プレビューモードと併用することで、より効果的なデバッグが可能です。

最後に、タグの設定から公開までの流れを理解することが大切です。タグの設定方法を正しく行い、公開前には必ずチェックリストを使って確認しましょう。公開手順もシンプルですが、バージョン管理をしっかり行うことで、タグの管理が楽になります。

これらのステップをしっかりと理解し実行することで、Webサイトのタグ管理がスムーズに行え、マーケティング活動の効率化が期待できます。ぜひ実際の作業に活かしてみてください。