関連記事
機能面での進化について解説 「GTMプレビューモードに大幅アップデート」
→ 「GTMプレビューモードに大幅アップデート」
目次
プレビューモード利用開始前の準備
1.権限の確認
プレビューモードを起動することができるのは目的のGTMコンテナに対し編集権限以上を持っているユーザーです。権限を持っていない人やシークレットブラウジングでも後述の共有機能によりプレビューモードを利用することができます。2.拡張機能Tag Assistant (by Google)の導入
必須ではありませんが、動作安定性と使い勝手の向上のため可能ならプレビューモードは「Tag Assistant (by Google)」をインストールしたGoogle Chromeから実行します。 以下のコラムを参考に拡張機能をインストールします。 プライベートブラウジング(シークレットモード)時でも快適にGTMプレビューモードを利用したい方は拡張機能をインストール後、下記URLからTag Assistant拡張機能の設定詳細を開き、「シークレットモードでの実行を許可する」オプションをオンにします。 Tag Assistant拡張機能の設定詳細画面 chrome://extensions/?id=kejbdjndbnbjgmefkgdddjlbokphdefk Tag Assistantをインストールするメリット- プレビュー対象ページを通常のタブとして開ける(進む、戻る、URLの変更などの操作が楽)
- プレビュー対象のタブでChromeのモバイルエミュレーション機能が使える 「target=”_blank”」属性を持つリンクにより新たに開いたタブもプレビュー可能
- iframeの中で動作したタグもプレビュー可能
- プレビューモードの動作安定性の向上
3.Googleアナリティクスの準備(任意)
必須ではありませんが、従来のユニバーサルアナリティクスプロパティを利用しており、プレビューモードによる特殊な参照元情報やパラメータ情報が記録されることが気になる方は以下の設定を行います。- プロパティの「参照元除外リスト」の設定に `tagassistant.google.com` を追加
- ビュー設定の「除外するURLパラメータ」に`gtm_debug`を追加
プレビューモードの起動方法
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」のフローティングウィンドウが表示されていることを確認します。 プレビューモードを終了するときはフローティングウィンドウ右上の×ボタンをクリック、フローティングウィンドウが邪魔なときは隣の最小化ボタンをクリックすればプレビューモードを終了することなくフローティングウィンドウのみを消すことができます。4.デバッグUIタブを確認
先ほどのデバッグUIが表示されたタブに戻り「Connected!」と表示されていればプレビューモードを正常に起動完了しています。「Continue」ボタンをクリックしてプレビュー対象のタブで発火したタグの情報を確認しましょう。プレビューモードの共有方法
以下の何れかの方法で発行したURLを共有することでGTMコンテナの編集権限を持っていない人やプライベートブラウジング(シークレットモード)時でもプレビューモードを利用することが可能になります。 共有機能によりスマートフォン実機でプレビューモードを動かすこともできます。編集中のワークスペースのプレビューモードを共有したい場合
右上の3点メニュー内の「Share」からプレビューモードのリンクを共有できます。 「Share」をクリックして表示されたポップアップの「Copy Link」からプレビューモードのリンクを共有 あるいは「プレビュー」ボタンを押したときに開くタブの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変数の読込 ※対応するトリガーなし |
プレビューモードの見方(タグ情報の詳細確認)
タグ詳細画面:「Summary」「各ページ単位」での確認時
Summaryか各ページ単位の画面を表示中にリスト内のタグ情報をクリックすることで選択したタグ設定の概要を確認することができます。 スクリーンショット内の各項目の解説 1. プレビュー中にタグが発火したイベント一覧 2. タグの配信トリガー設定情報 3. タグの例外トリガー設定情報 選択したタグ設定が何れかのイベントにより発火している場合は、①の「Messages Where This Tag Fired」に発火した各イベントが表示、発火しなかった場合は「No messages」と表示されます。タグ詳細画面:イベント単位での確認時
前述のタグ設定の概要画面の「Messages Where This Tag Fired」にリストアップされたイベント名をクリックするか、表示を具体的なイベントに絞り込んだ後にタグ表示をクリックすると、タグが発火したときのより詳細な情報を得ることができます。 上記スクリーンショットではFiring Triggers(タグの配信トリガー設定)に登録されていたトリガー「PV - すべてのページ」が条件を満たし、かつ、Blocking Triggers(タグの例外トリガー設定)に登録されていたトリガー「PV - サイト管理者専用ページ」が条件を満たさなかったため、「1. Container Loaded」のタイミングでタグが発火したことが分かります。 また、右上のラジオボタンメニュー「Display Variables as」で「Values」を選択すると、Googleアナリティクスタグ設定などのフィールドで選択した変数の中身の状態を確認することができます。 上記スクリーンショットではFiring Triggers(タグの配信トリガー設定)に登録されていたトリガー「PV - 完了ページ」が条件を満たさなかったため、「1. Container Loaded」のタイミングではタグが発火しなかったことが分かります。プレビューモードの見方(gtagデバッグ機能)
新しいプレビューモードでは、gtag(グローバルサイトタグ)によって実装されたGoogleアナリティクスの計測タグやGoogle広告の計測タグによって発生した通信を分かりやすい表示で確認することができます。使い方
左上のプレビュー対象タグのIDが表示されているプルダウンメニューを展開して目的のIDをクリック gtagによって送信されたデータが並んでいるので、見たい通信をクリックすれば送信された情報の詳細を分かりやすく確認できます。 この機能はhttps://tagassistant.google.com にアクセスして対象のドメインを入力すれば、サイトに設置されているGTMやGoogleアナリティクスの管理権限の有無に関わらず使用できます。プレビューモードが動かないとき
プレビューモードがうまく動作しない場合、以下のような理由が考えられます。ブラウザのセキュリティ機能によるポップアップブロック
はじめてプレビューモードを実行するときにブラウザのセキュリティ機能によってポップアップがブロックされる場合があります。 図のような警告が出ていないか確認してポップアップ・リダイレクトの許可を行います。既にプレビューモードが起動している
既にプレビューモードを実行中でデバッグ用のタブが開かれている場合、再度プレビューボタンを押すと既に開かれているタブがリロードされてプレビューモードが再実行されます。沢山タブを開いているとどこかに埋もれてしまっている可能性があるので不要なタブを整理して再度実行します。まだ一度も公開作業を行ったことがないコンテナ
もしプレビュー対象のGTMコンテナが作りたてのもので、まだ一度もワークスペースを公開したことがない場合、プレビューモードの起動に失敗する場合があります。 このようなときは新規ワークスペースを作成し、何も編集せずに一度公開すればプレビューモードが使えるようになります。Googleアカウントへのログインに問題が発生している
別のタブでGoogleアカウントからログアウトしてしまった、複数のGoogleアカウントを同時に操作している等の理由によりプレビューモードがうまく機能しない場合があります。この場合は一度すべてのGoogleアカウントからログアウトした上で、必要なGoogleアカウントにのみログインした状態でリトライします。Cookieとローカルストレージの状態がおかしくなっている
後述の「プレビューモードが終了できないとき」でご案内している方法で対応できる場合があります。その他の理由
アドブロッカーやトラッキング防止ツールが邪魔している場合、プレビュー対象のページにGTMタグが設置されていない場合、プレビュー対象のページに設置されているGTMコンテナのIDが異なる場合、管理画面をリロードし直すことで動くようになる場合、など。プレビューモードが終了できないとき
最新のプレビューモードはまだ登場したばかりなのでやや動作が不安定になることがあり、中でも「プレビューモードのフローティングウィンドウが消えない」というトラブルが稀に発生することを確認しています。このような場合、Cookieとローカルストレージの削除によって対応可能です。 Chromeブラウザの場合- プレビュー対象のドメインを開いているタブをすべて終了
- https://tagassistant.google.com にアクセス
- 右クリックして表示されるメニューの中から「検証」を選択
- ApplicationタブのLocal Storageを確認して記録されている情報をすべて削除
- フローティングウィンドウが表示されるドメインに新しいタブでアクセス(「gtm_debug=x」を含まないURLを使用)
- 右クリックして表示されるメニューの中から「検証」を選択
- ApplicationタブのCookieを確認して「__TAG_ASSISTANT」の行を探して選択、削除
- ページを更新すればフローティングウィンドウが復活しなくなっています。