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

2020年10月16日頃、GTMのプレビューモード機能に大幅な変更がありました。
本コラムでは新しくなったプレビューモードの進化したポイントを解説します。
具体的な使用方法については別コラムにてご紹介いたします。

3rd Party Cookieに依存しない動作

これまでのプレビューモードはデフォルト設定のSafariやFirefox、Chromeのプライベートブラウジング（シークレットモード）で動作できませんでしたが、新しいプレビューモードでは 3rd Party Cookieに依存せず動作できるようになったため、これらのブラウザでも問題なく機能します。

Chrome拡張機能「Tag Assistant」との連携

新しいプレビューモードはChrome拡張機能「Tag Assistant (by Google)」をインストールしたChromeブラウザで利用することを前提に作られています。もちろん拡張機能なしのChromeやFirefox、Safari上でも動作しますが、組み合わせて使うことで全体的な使い勝手が大幅に向上します。

gtagデバッグ機能の追加

新しいプレビューモードではgtag（グローバルサイトタグ）で実装されたGoogleアナリティクスタグやGA4（App+Webプロパティ）タグが送信しているデータを簡単に確認できるようになりました。この機能は https://tagassistant.google.com にアクセスすればアクセス権限の所持に関わらず誰でもどんなサイトに対しても使用できます。

GA4（App+Webプロパティ）のDebugViewへのデータ送信

プレビューモード実行中のGA4タグによって送られた通信はGoogleアナリティクスのDebugViewタブで通信結果を詳しく確認できます。

マルチウィンドウ化

これまでGTMのプレビューモードを起動すると、プレビュー対象のページ下部に「デバッグペイン」が埋め込まれて表示されていましたが、新しくなったプレビューモードではサーバーサイドコンテナのプレビューモードと同じく、ウィンドウが完全に別のものに分かれて見やすくなりました。
マルチディスプレイ環境であれば「右の画面でサイトを操作・左の画面でプレビューモードを全画面表示でサクサク確認」という使い方が可能です。

ブラウザ拡張機能「Tag Assistant (by Google)」を導入済みのChromeブラウザでプレビューモードを実行した場合、プレビュー対象ページのタブのファビコン（タブ内左に表示されている小さなアイコン）が専用のものに変わり、ページ右下に小さく「Debugger connected」のフローティングウィンドウが表示されます。

フローティングウィンドウ右上の「×」ボタンをクリックするとプレビューモードが終了、隣の最小化ボタンをクリックするとプレビューモードは終了せずにフローティングウィンドウだけが消えます。

複数ウィンドウでのタグ動作結果確認

Tag Assistantをインストールした状態でプレビューモードを実行するとフローティングウィンドウ内左側に「青い四角」「赤い丸」「緑の丸」「ライオン」「馬」「狐」などランダムにアイコンが表示されます。
これは複数ページでプレビューモードを同時進行で実行した場合でもそれぞれの情報がどのウィンドウから送られてきた情報なのかユーザーが識別するための機能で、以下のような場合に便利です。

• 「target=”_blank”」属性を持つリンクなどにより新しいタブが開くとき
• チェック対象のページ内にiframeが存在するとき

ページをまたいだ計測

新しいプレビューモードでは、リロードしたりリンククリックによって違うページに移動したりしても前のページでのプレビュー結果が消えず、デバッグUIのタイムライン上部に新しいページでのタグ実行結果が追加表示されます。
リンククリック時など、これまで困難だったページの移動を伴うアクションにより動作するタグについて誰でも詳細な確認が可能になりました。