新しいGTMプレビューモードの使い方

2020年10月28日
ライター:西村 彰悟

2020年10月16日頃、GTMのプレビューモード機能に大幅な変更がありました。

本コラムではプレビューモードの具体的な使い方を解説します。
機能面での進化は以下の別コラムで解説しています。

関連記事
機能面での進化について解説 「GTMプレビューモードに大幅アップデート」

「GTMプレビューモードに大幅アップデート」

新しくなったGTMのプレビューモード
新しくなったGTMプレビューモード

プレビューモード利用開始前の準備

1.権限の確認

プレビューモードを起動することができるのは目的のGTMコンテナに対し編集権限以上を持っているユーザーです。権限を持っていない人やシークレットブラウジングでも後述の共有機能によりプレビューモードを利用することができます。

プレビューモードを起動できるユーザー権限は編集権限以上
GTMのコンテナ権限

2.拡張機能Tag Assistant (by Google)の導入

必須ではありませんが、動作安定性と使い勝手の向上のため可能ならプレビューモードは「Tag Assistant (by Google)」をインストールしたGoogle Chromeから実行します。

Tag Assistant (by Google)
Chrome拡張機能_TagAssistant

以下のコラムを参考に拡張機能をインストールします。

プライベートブラウジング(シークレットモード)時でも快適にGTMプレビューモードを利用したい方は拡張機能をインストール後、下記URLからTag Assistant拡張機能の設定詳細を開き、「シークレットモードでの実行を許可する」オプションをオンにします。

Tag Assistant拡張機能の設定詳細画面 chrome://extensions/?id=kejbdjndbnbjgmefkgdddjlbokphdefk

Chrome拡張機能_シークレットモードでの実行を許可するオプション

Tag Assistantをインストールするメリット

  • プレビュー対象ページを通常のタブとして開ける(進む、戻る、URLの変更などの操作が楽)
  • プレビュー対象のタブでChromeのモバイルエミュレーション機能が使える
    「target=”_blank”」属性を持つリンクにより新たに開いたタブもプレビュー可能
  • iframeの中で動作したタグもプレビュー可能
  • プレビューモードの動作安定性の向上

3.Googleアナリティクスの準備(任意)

必須ではありませんが、従来のユニバーサルアナリティクスプロパティを利用しており、プレビューモードによる特殊な参照元情報やパラメータ情報が記録されることが気になる方は以下の設定を行います。

プレビューモード実行によりGoogleアナリティクスに記録された情報
プレビューモード実行によりGAに記録された情報
  • プロパティの「参照元除外リスト」の設定に `tagassistant.google.com` を追加
  • ビュー設定の「除外するURLパラメータ」に`gtm_debug`を追加
目的のプロパティ>トラッキング情報>参照元除外リストから除外ドメインを追加
GAで参照元除外
目的のビュー>ビューの設定>除外するURLクエリパラメータ
GAのビューからパラメータ除外

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

1.プレビューモードの開始

まず、GTMの管理画面の右上にある「プレビュー」ボタンをクリックしてプレビューモードを起動します。ボタンをクリックしても何も起きないときは後述の「プレビューモードが動かないとき」をご確認ください。

GTM管理画面からプレビューモードを開始
プレビューモード実行ボタン

2.デバッグUIからプレビュー対象URLを指定

新しく開いたタブにプレビュー対象ページのURLを入力します。ここで入力したURLのドメインがプレビュー対象になります。
(サブドメイン違いのページまでは問題なくプレビューできる様子です)

別タブで開いたデバッグUI
別タブで開いたデバッグUI

「Start」ボタンをクリックすると入力したURLの末尾にパラメータ「gtm_debug=x」が付いた状態でページが開きます。これはプレビューモードの安定動作のために必要なパラメータですが、以下のケースでは「include debug signal in the URL」のチェックを外してから「Start」ボタンをクリックします。

  • パラメータ「gtm_debug」が付くことによりページの挙動がおかしくなるとき
  • プレビューモードの起動に失敗してしまうとき

3.プレビュー対象のページを確認

「Start」ボタンを押すと新しいタブ、あるいはポップアップによりプレビュー対象のページが開くので、ページ右下に「Debugger connected」のフローティングウィンドウが表示されていることを確認します。

プレビュー対象のタブ(Tag Assistantインストール時)
プレビュー対象のタブ_TagAssistant有
プレビュー対象のポップアップ(Tag Assistantがないとき)
プレビュー対象のタブ_TagAssistant無

プレビューモードを終了するときはフローティングウィンドウ右上の×ボタンをクリック、フローティングウィンドウが邪魔なときは隣の最小化ボタンをクリックすればプレビューモードを終了することなくフローティングウィンドウのみを消すことができます。

4.デバッグUIタブを確認

先ほどのデバッグUIが表示されたタブに戻り「Connected!」と表示されていればプレビューモードを正常に起動完了しています。「Continue」ボタンをクリックしてプレビュー対象のタブで発火したタグの情報を確認しましょう。

プレビューモードの接続成功画面
プレビューモードの接続に成功した画面

プレビューモードの共有方法

以下の何れかの方法で発行したURLを共有することでGTMコンテナの編集権限を持っていない人やプライベートブラウジング(シークレットモード)時でもプレビューモードを利用することが可能になります。
共有機能によりスマートフォン実機でプレビューモードを動かすこともできます。

共有機能によりスマートフォン実機でプレビューモードを起動した様子
スマートフォンでプレビューモードを実行

編集中のワークスペースのプレビューモードを共有したい場合

「プレビュー」ボタンを押したときに開くタブのURLをコピーして共有
プレビューモードの共有方法_1

過去に公開したことがあるワークスペースを共有したい場合

管理画面グローバルナビゲーション内の「バージョン」をクリック、共有したいバージョン行の右側にある「…」をクリックすると表示される「プレビューの共有」メニューを選択してプレビュー用のURLを取得して共有
プレビューモードの共有方法_2

プレビューモードの更新方法

プレビューモードを開始した後にワークスペース内の設定を変更した場合は、もう一度「プレビュー」ボタンをクリックすることでプレビューモード内で動作するGTMに変更を反映できます。既に共有済みのプレビューモードにも反映されるので共有リンクの再発行は不要です。
共有されたプレビューモードを誰かが利用している最中に更新を行ってしまった場合、(プレビューの再スタートなどしなくても)ページを跨いだ瞬間に変更が反映されてしまうので、同時並行で誰かにテストをお願いしているときは注意が必要です。

プレビューモードを更新するためには、もう一度「プレビュー」ボタンをクリック
プレビューの更新

プレビューモードの見方(全体)

プレビューモードUIでは、プレビューモードを起動してからプレビュー対象のページで起きた各イベントにより呼び出されたタグ、そのときの変数、Data Layerの状態を確認することができます。

デバッグUIタブの内容
デバッグUI解説

スクリーンショットの各項目の解説
1. プレビューモード終了ボタン
2. プレビュー対象タグ切替メニュー:プレビュー対象のGTM・gtagを切替
3. タイムライン:各ページで発生したイベント一覧
4. Tag Fired : 発火したタグ一覧
5. Tag Not Fired : 発火しなかったタグ一覧

デバッグUIを開いたときに表示される「Summary」画面では、プレビューモードを開始してから発火が確認できたタグと呼び出された回数がまとめて表示されています。

タグの名前、タグのタイプ、タグがプレビュー中に発火した回数
タグ名とタグ設定のタイプと発火した回数

プレビュー対象のタブでページ移動を行った場合、各ページで発火したタグが全部混ざって表示されているため注意が必要です。

各ページで発火したタグを確認したい場合は、タイムラインの中のページ名が表示されている行をクリックします。

ページ名(赤枠部分)をクリックして各ページで発火したタグを確認
各ページ単位でのタグ発火確認

この図を見て、これまでのプレビューモードでは確認することが不可能だったリンククリック時に稼働したタグの発火が確認できていることにお気づきでしょうか。新しいプレビューモードではページ移動を伴うイベントで呼び出されたタグの発火状況も確認することが可能になりました。

各ページ傘下のイベント名が書かれた行をクリックすると、特定のタイミングで発生したイベントにより発火したタグのみを絞り込んで確認できます。

リンククリック時に発火したタグに絞り込んで確認
各イベントでのタグ発火確認

代表的なイベント名と対応するトリガー

イベント名 _event 変数での表示 対応するトリガータイプ
Container Loaded gtm.js ページビュー > ページビュー
DOM Ready gtm.dom ページビュー > DOM Ready
Window Loaded gtm.load ページビュー >ウィンドウの読み込み
Click gtm.click クリック > すべての要素
Link Click gtm.linkClick クリック > リンクのみ
Scroll Depth gtm.scrollDepth ユーザーエンゲージメント > スクロール距離
Element Visibility gtm.elementVisibility ユーザーエンゲージメント > 要素の表示
Timer gtm.timer その他 > タイマー
History gtm.historyChange その他 > 履歴の変更
Message なし Data Layer変数の読込
※対応するトリガーなし
GTM管理画面の新規トリガー作成画面で確認できるトリガータイプ
新規トリガー設定作成画面

個別のイベントに表示を絞り込んだ状態で「Variables(変数)」「Data Layer」のタブをクリックすると、イベントが発生したときにGTMが読み込んだ変数の状態とData Layerの状態を確認できます。
各イベント発生時にタグが読み込んでいる変数が「意図した通りの値を取得できているか」確認するときに便利です。

リンククリックイベント発生時の各変数設定の値を確認
イベント発生時の変数の状態確認

プレビューモードの見方(タグ情報の詳細確認)

タグ詳細画面:「Summary」「各ページ単位」での確認時

Summaryか各ページ単位の画面を表示中にリスト内のタグ情報をクリックすることで選択したタグ設定の概要を確認することができます。

Summary表示中に確認したいタグをクリック
Summary画面で確認したいタグをクリック
表示されたタグ設定の概要情報
発火したタグの概要情報

スクリーンショット内の各項目の解説
1. プレビュー中にタグが発火したイベント一覧
2. タグの配信トリガー設定情報
3. タグの例外トリガー設定情報

選択したタグ設定が何れかのイベントにより発火している場合は、①の「Messages Where This Tag Fired」に発火した各イベントが表示、発火しなかった場合は「No messages」と表示されます。

タグの発火が確認できていないときの「Messages Where This Tag Fired」の表示
発火が確認できていないタグの表示

タグ詳細画面:イベント単位での確認時

前述のタグ設定の概要画面の「Messages Where This Tag Fired」にリストアップされたイベント名をクリックするか、表示を具体的なイベントに絞り込んだ後にタグ表示をクリックすると、タグが発火したときのより詳細な情報を得ることができます。

Container Loaded時に発火したGoogleアナリティクスタグの詳細情報
発火したタグの詳細情報

上記スクリーンショットではFiring Triggers(タグの配信トリガー設定)に登録されていたトリガー「PV - すべてのページ」が条件を満たし、かつ、Blocking Triggers(タグの例外トリガー設定)に登録されていたトリガー「PV - サイト管理者専用ページ」が条件を満たさなかったため、「1. Container Loaded」のタイミングでタグが発火したことが分かります。

また、右上のラジオボタンメニュー「Display Variables as」で「Values」を選択すると、Googleアナリティクスタグ設定などのフィールドで選択した変数の中身の状態を確認することができます。

「Display Variables as Values」で変数の中身の状態を確認
タグ詳細_変数の値を表示
Container Loaded時に発火しなかったYahoo広告のコンバージョンタグの詳細情報
発火しなかったタグの概要情報

上記スクリーンショットではFiring Triggers(タグの配信トリガー設定)に登録されていたトリガー「PV - 完了ページ」が条件を満たさなかったため、「1. Container Loaded」のタイミングではタグが発火しなかったことが分かります。

プレビューモードの見方(gtagデバッグ機能)

新しいプレビューモードでは、gtag(グローバルサイトタグ)によって実装されたGoogleアナリティクスの計測タグやGoogle広告の計測タグによって発生した通信を分かりやすい表示で確認することができます。

使い方

左上のプレビュー対象タグのIDが表示されているプルダウンメニューを展開して目的のIDをクリック

プレビューモードに加わったgtagのデバッグ機能とその起動方法
gtagデバッグ機能の起動方法

gtagによって送信されたデータが並んでいるので、見たい通信をクリックすれば送信された情報の詳細を分かりやすく確認できます。

プレビューモードでGA4の計測タグが送信した情報を確認
gtagデバッグ機能でタグの送信した情報を確認

この機能はhttps://tagassistant.google.com にアクセスして対象のドメインを入力すれば、サイトに設置されているGTMやGoogleアナリティクスの管理権限の有無に関わらず使用できます。

プレビューモードが動かないとき

プレビューモードがうまく動作しない場合、以下のような理由が考えられます。

ブラウザのセキュリティ機能によるポップアップブロック

はじめてプレビューモードを実行するときにブラウザのセキュリティ機能によってポップアップがブロックされる場合があります。
図のような警告が出ていないか確認してポップアップ・リダイレクトの許可を行います。

ポップアップブロックの解除
ポップアップがブロックされた場合

既にプレビューモードが起動している

既にプレビューモードを実行中でデバッグ用のタブが開かれている場合、再度プレビューボタンを押すと既に開かれているタブがリロードされてプレビューモードが再実行されます。沢山タブを開いているとどこかに埋もれてしまっている可能性があるので不要なタブを整理して再度実行します。

既に開いているハズのデバッグ用のタブが行方不明になっている様子
大量のタブが開かれている様子

まだ一度も公開作業を行ったことがないコンテナ

もしプレビュー対象のGTMコンテナが作りたてのもので、まだ一度もワークスペースを公開したことがない場合、プレビューモードの起動に失敗してしまいます。

一度も公開作業を行ったことがないGTM
一度もデプロイされていないコンテナ

このようなときは新規ワークスペースを作成し、何も編集せずに一度公開すればプレビューモードが使えるようになります。

プレビューモード実行前に何も変更していないワークスペースを公開
最初のワークスペースを作成して公開

Googleアカウントへのログインに問題が発生している

別のタブでGoogleアカウントからログアウトしてしまった、複数のGoogleアカウントを同時に操作している等の理由によりプレビューモードがうまく機能しない場合があります。この場合は一度すべてのGoogleアカウントからログアウトした上で、必要なGoogleアカウントにのみログインした状態でリトライします。

Cookieとローカルストレージの状態がおかしくなっている

後述の「プレビューモードが終了できないとき」でご案内している方法で対応できる場合があります。

その他の理由

アドブロッカーやトラッキング防止ツールが邪魔している場合、プレビュー対象のページにGTMタグが設置されていない場合、プレビュー対象のページに設置されているGTMコンテナのIDが異なる場合、管理画面をリロードし直すことで動くようになる場合、など。

プレビューモードが終了できないとき

最新のプレビューモードはまだ登場したばかりなのでやや動作が不安定になることがあり、中でも「プレビューモードのフローティングウィンドウが消えない」というトラブルが稀に発生することを確認しています。このような場合、Cookieとローカルストレージの削除によって対応可能です。

「×」ボタンを押しても何度でもフローティングウィンドウが蘇るトラブル
消えないフローティングウィンドウ

Chromeブラウザの場合

  1. プレビュー対象のドメインを開いているタブをすべて終了
  2. https://tagassistant.google.com にアクセス
  3. 右クリックして表示されるメニューの中から「検証」を選択
  4. ApplicationタブのLocal Storageを確認して記録されている情報をすべて削除
    localStorageの削除
  5. フローティングウィンドウが表示されるドメインに新しいタブでアクセス(「gtm_debug=x」を含まないURLを使用)
  6. 右クリックして表示されるメニューの中から「検証」を選択
  7. ApplicationタブのCookieを確認して「__TAG_ASSISTANT」の行を探して選択、削除
    cookieを削除
  8. ページを更新すればフローティングウィンドウが復活しなくなっています。

まとめ

全体的な使用感は旧プレビューモードとほとんど変わりませんが、「Summary」で表示されるタグが「プレビュー対象のタブ内で開いた複数ページで1度でも発火したタグ」に変わるなど細かい部分で変化が見られます。 まだβ版ということもあり不便になってしまった部分もありますが、使い勝手を良くするためのアップデートがちょこちょこ掛かっている様子です。
首を長くして待つか、気になったことがあれば管理画面右上の「…」ボタンをクリックして「フィードバックを送信」しても良いかも知れません。

GoogleにGTMの使い心地について直接フィードバックを送信
フィードバックを送信

次はどんな機能が追加されるのか、これからのGTMの進化にワクワクしています。

この記事を書いた人
西村 彰悟
西村 彰悟
デジタルマーケティングエンジニア

プログラミングとキャンプ、コーヒーが趣味のデジタルマーケティングエンジニア。好きなブランドは「SONY」と「snow peak」 2020年からアユダンテに参加。DMEチームの即戦力としてフル稼働中。

最近書いた記事