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

2020年10月28日

ライター：西村彰悟

Google Tag Manager

2020年10月16日頃、GTMのプレビューモード機能に大幅な変更がありました。本コラムではプレビューモードの具体的な使い方を解説します。機能面での進化は以下の別コラムで解説しています。

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

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

プレビューモード利用開始前の準備
プレビューモードの起動方法
プレビューモードの共有方法
プレビューモードの見方　（全体)
プレビューモードの見方　(タグ情報の詳細確認)
プレビューモードの見方　(gtagデバッグ機能)
プレビューモードが動かないとき
プレビューモードが終了できないとき
まとめ

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

1.権限の確認

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

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

2.拡張機能Tag Assistant Companionの導入

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

Tag Assistant Companionのロゴ — Tag Assistant Companion

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

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

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

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

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

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

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

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

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

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

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

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

プレビュー対象のタブ_TagAssistant有 — プレビュー対象のタブ（Tag Assistantインストール時）

プレビュー対象のタブ_TagAssistant無 — プレビュー対象のポップアップ（Tag Assistantがないとき）

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

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

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

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

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

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

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

右上の3点メニュー内の「Share」からプレビューモードのリンクを共有できます。

「Share」をクリックして表示されたポップアップの「Choose tags to debug」で「Google tags + GTM-XXXXXX （プレビュー中のGTMコンテナID）」が選択されていることを確認の上で「Copy Link」からプレビューモードのリンクを共有

あるいは「プレビュー」ボタンを押したときに開くタブのURLをコピーして共有することも可能です

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

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

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

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

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

プレビューモードの見方（全体）

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

スクリーンショットの各項目の解説

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

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

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

プレビュー対象のタブでページ移動を行った場合、各ページで発火したタグが全部混ざって表示されているため注意が必要です。各ページで発火したタグを確認したい場合は、タイムラインの中のページ名が表示されている行をクリックします。

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

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

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

イベント名 (日本語での表示名)	_event 変数での表示	対応するトリガータイプ
Container Initialization (同意の初期化)	gtm.init_consent	ページビュー > 同意の初期化
Initialization (初期化)	gtm.init	ページビュー > 初期化
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によって送信されたデータが並んでいるので、見たい通信をクリックすれば送信された情報の詳細を分かりやすく確認できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

拡張機能 Tag Assitant Companionの動作がおかしくなっている

拡張機能 Tag Assitant Companionを一度無効化して、再度有効化します。原因不明のときはこの操作で直ることがよくあります。Chromeの場合は以下のURLから拡張機能の設定画面を開くことができます。 Tag Assistant Companion拡張機能の設定詳細画面　chrome://extensions/?id=jmekfmbnaedfebfnmakmokmlfpblbfdm

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

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

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

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

その他の理由

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

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

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

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

Chromeブラウザの場合

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

まとめ

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