![新しいGTMプレビューモードの使い方](https://ayudante.jp/wp-content/uploads/2020/06/icon_gtm.png)
関連記事
機能面での進化について解説 「GTMプレビューモードに大幅アップデート」
→ 「GTMプレビューモードに大幅アップデート」
![新しくなったGTMプレビューモード](/wp-content/uploads/2020/10/pic_20201027_01.png)
目次
プレビューモード利用開始前の準備
1.権限の確認
プレビューモードを起動することができるのは目的のGTMコンテナに対し編集権限以上を持っているユーザーです。権限を持っていない人やシークレットブラウジングでも後述の共有機能によりプレビューモードを利用することができます。![GTMのコンテナ権限](/wp-content/uploads/2020/10/pic_20201028_02.png)
2.拡張機能Tag Assistant (by Google)の導入
必須ではありませんが、動作安定性と使い勝手の向上のため可能ならプレビューモードは「Tag Assistant (by Google)」をインストールしたGoogle Chromeから実行します。![Chrome拡張機能_TagAssistant](/wp-content/uploads/2020/10/pic_20201028_03.png)
![Chrome拡張機能_シークレットモードでの実行を許可するオプション](/wp-content/uploads/2020/10/pic_20201028_04.png)
- プレビュー対象ページを通常のタブとして開ける(進む、戻る、URLの変更などの操作が楽)
- プレビュー対象のタブでChromeのモバイルエミュレーション機能が使える 「target=”_blank”」属性を持つリンクにより新たに開いたタブもプレビュー可能
- iframeの中で動作したタグもプレビュー可能
- プレビューモードの動作安定性の向上
3.Googleアナリティクスの準備(任意)
必須ではありませんが、従来のユニバーサルアナリティクスプロパティを利用しており、プレビューモードによる特殊な参照元情報やパラメータ情報が記録されることが気になる方は以下の設定を行います。![プレビューモード実行によりGAに記録された情報](/wp-content/uploads/2020/10/pic_20201028_05.png)
- プロパティの「参照元除外リスト」の設定に `tagassistant.google.com` を追加
- ビュー設定の「除外するURLパラメータ」に`gtm_debug`を追加
![GAで参照元除外](/wp-content/uploads/2020/10/pic_20201028_06.png)
![GAのビューからパラメータ除外](/wp-content/uploads/2020/10/pic_20201028_07.png)
プレビューモードの起動方法
1.プレビューモードの開始
まず、GTMの管理画面の右上にある「プレビュー」ボタンをクリックしてプレビューモードを起動します。ボタンをクリックしても何も起きないときは後述の「プレビューモードが動かないとき」をご確認ください。![プレビューモード実行ボタン](/wp-content/uploads/2020/10/pic_20201028_08.png)
2.デバッグUIからプレビュー対象URLを指定
新しく開いたタブにプレビュー対象ページのURLを入力します。ここで入力したURLのドメインがプレビュー対象になります。 (サブドメイン違いのページまでは問題なくプレビューできる様子です)![別タブで開いたデバッグUI](/wp-content/uploads/2020/10/pic_20201028_09.png)
- パラメータ「gtm_debug」が付くことによりページの挙動がおかしくなるとき
- プレビューモードの起動に失敗してしまうとき
3.プレビュー対象のページを確認
「Start」ボタンを押すと新しいタブ、あるいはポップアップによりプレビュー対象のページが開くので、ページ右下に「Debugger connected」のフローティングウィンドウが表示されていることを確認します。![プレビュー対象のタブ_TagAssistant有](/wp-content/uploads/2020/10/pic_20201028_10.png)
![プレビュー対象のタブ_TagAssistant無](/wp-content/uploads/2020/10/pic_20201028_11.png)
4.デバッグUIタブを確認
先ほどのデバッグUIが表示されたタブに戻り「Connected!」と表示されていればプレビューモードを正常に起動完了しています。「Continue」ボタンをクリックしてプレビュー対象のタブで発火したタグの情報を確認しましょう。![プレビューモードの接続に成功した画面](/wp-content/uploads/2020/10/pic_20201028_12.png)
プレビューモードの共有方法
以下の何れかの方法で発行したURLを共有することでGTMコンテナの編集権限を持っていない人やプライベートブラウジング(シークレットモード)時でもプレビューモードを利用することが可能になります。 共有機能によりスマートフォン実機でプレビューモードを動かすこともできます。![スマートフォンでプレビューモードを実行](/wp-content/uploads/2020/10/pic_20201028_13.jpg)
編集中のワークスペースのプレビューモードを共有したい場合
右上の3点メニュー内の「Share」からプレビューモードのリンクを共有できます。![](https://ayudante.jp/wp-content/uploads/2020/10/gtmPreviewShare.png)
![](https://ayudante.jp/wp-content/uploads/2020/10/gtmPreviewShare2.png)
![プレビューモードの共有方法_1](/wp-content/uploads/2020/10/pic_20201028_14.png)
過去に公開したことがあるワークスペースを共有したい場合
![プレビューモードの共有方法_2](/wp-content/uploads/2020/10/pic_20201028_15.png)
プレビューモードの更新方法
プレビューモードを開始した後にワークスペース内の設定を変更した場合は、もう一度「プレビュー」ボタンをクリックすることでプレビューモード内で動作するGTMに変更を反映できます。既に共有済みのプレビューモードにも反映されるので共有リンクの再発行は不要です。 共有されたプレビューモードを誰かが利用している最中に更新を行ってしまった場合、(プレビューの再スタートなどしなくても)ページを跨いだ瞬間に変更が反映されてしまうので、同時並行で誰かにテストをお願いしているときは注意が必要です。![プレビューの更新](/wp-content/uploads/2020/10/pic_20201028_16.png)
プレビューモードの見方(全体)
プレビューモードUIでは、プレビューモードを起動してからプレビュー対象のページで起きた各イベントにより呼び出されたタグ、そのときの変数、Data Layerの状態を確認することができます。![デバッグUI解説](/wp-content/uploads/2020/10/pic_20201028_17.png)
![タグ名とタグ設定のタイプと発火した回数](/wp-content/uploads/2020/10/pic_20201028_18.png)
![各ページ単位でのタグ発火確認](/wp-content/uploads/2020/10/pic_20201028_19.png)
![各イベントでのタグ発火確認](/wp-content/uploads/2020/10/pic_20201028_20.png)
イベント名 | _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変数の読込 ※対応するトリガーなし |
![新規トリガー設定作成画面](/wp-content/uploads/2020/10/pic_20201028_21.png)
![イベント発生時の変数の状態確認](/wp-content/uploads/2020/10/pic_20201028_22.png)
プレビューモードの見方(タグ情報の詳細確認)
タグ詳細画面:「Summary」「各ページ単位」での確認時
Summaryか各ページ単位の画面を表示中にリスト内のタグ情報をクリックすることで選択したタグ設定の概要を確認することができます。![Summary画面で確認したいタグをクリック](/wp-content/uploads/2020/10/pic_20201028_23.png)
![発火したタグの概要情報](/wp-content/uploads/2020/10/pic_20201028_24.png)
![発火が確認できていないタグの表示](/wp-content/uploads/2020/10/pic_20201028_25.png)
タグ詳細画面:イベント単位での確認時
前述のタグ設定の概要画面の「Messages Where This Tag Fired」にリストアップされたイベント名をクリックするか、表示を具体的なイベントに絞り込んだ後にタグ表示をクリックすると、タグが発火したときのより詳細な情報を得ることができます。![発火したタグの詳細情報](/wp-content/uploads/2020/10/pic_20201028_26.png)
![タグ詳細_変数の値を表示](/wp-content/uploads/2020/10/pic_20201028_27.png)
![発火しなかったタグの概要情報](/wp-content/uploads/2020/10/pic_20201028_28.png)
プレビューモードの見方(gtagデバッグ機能)
新しいプレビューモードでは、gtag(グローバルサイトタグ)によって実装されたGoogleアナリティクスの計測タグやGoogle広告の計測タグによって発生した通信を分かりやすい表示で確認することができます。使い方
左上のプレビュー対象タグのIDが表示されているプルダウンメニューを展開して目的のIDをクリック![gtagデバッグ機能の起動方法](/wp-content/uploads/2020/10/pic_20201028_29.png)
![gtagデバッグ機能でタグの送信した情報を確認](/wp-content/uploads/2020/10/pic_20201028_30.png)
プレビューモードが動かないとき
プレビューモードがうまく動作しない場合、以下のような理由が考えられます。ブラウザのセキュリティ機能によるポップアップブロック
はじめてプレビューモードを実行するときにブラウザのセキュリティ機能によってポップアップがブロックされる場合があります。 図のような警告が出ていないか確認してポップアップ・リダイレクトの許可を行います。![ポップアップがブロックされた場合](/wp-content/uploads/2020/10/pic_20201028_31.png)
既にプレビューモードが起動している
既にプレビューモードを実行中でデバッグ用のタブが開かれている場合、再度プレビューボタンを押すと既に開かれているタブがリロードされてプレビューモードが再実行されます。沢山タブを開いているとどこかに埋もれてしまっている可能性があるので不要なタブを整理して再度実行します。![大量のタブが開かれている様子](/wp-content/uploads/2020/10/pic_20201028_32.png)
まだ一度も公開作業を行ったことがないコンテナ
もしプレビュー対象のGTMコンテナが作りたてのもので、まだ一度もワークスペースを公開したことがない場合、プレビューモードの起動に失敗する場合があります。![一度もデプロイされていないコンテナ](/wp-content/uploads/2020/10/pic_20201028_33.png)
![最初のワークスペースを作成して公開](/wp-content/uploads/2020/10/pic_20201028_34.png)
Googleアカウントへのログインに問題が発生している
別のタブでGoogleアカウントからログアウトしてしまった、複数のGoogleアカウントを同時に操作している等の理由によりプレビューモードがうまく機能しない場合があります。この場合は一度すべてのGoogleアカウントからログアウトした上で、必要なGoogleアカウントにのみログインした状態でリトライします。Cookieとローカルストレージの状態がおかしくなっている
後述の「プレビューモードが終了できないとき」でご案内している方法で対応できる場合があります。その他の理由
アドブロッカーやトラッキング防止ツールが邪魔している場合、プレビュー対象のページにGTMタグが設置されていない場合、プレビュー対象のページに設置されているGTMコンテナのIDが異なる場合、管理画面をリロードし直すことで動くようになる場合、など。プレビューモードが終了できないとき
最新のプレビューモードはまだ登場したばかりなのでやや動作が不安定になることがあり、中でも「プレビューモードのフローティングウィンドウが消えない」というトラブルが稀に発生することを確認しています。このような場合、Cookieとローカルストレージの削除によって対応可能です。![消えないフローティングウィンドウ](/wp-content/uploads/2020/10/pic_20201028_35.png)
- プレビュー対象のドメインを開いているタブをすべて終了
- https://tagassistant.google.com にアクセス
- 右クリックして表示されるメニューの中から「検証」を選択
- ApplicationタブのLocal Storageを確認して記録されている情報をすべて削除
- フローティングウィンドウが表示されるドメインに新しいタブでアクセス(「gtm_debug=x」を含まないURLを使用)
- 右クリックして表示されるメニューの中から「検証」を選択
- ApplicationタブのCookieを確認して「__TAG_ASSISTANT」の行を探して選択、削除
- ページを更新すればフローティングウィンドウが復活しなくなっています。
まとめ
全体的な使用感は旧プレビューモードとほとんど変わりませんが、「Summary」で表示されるタグが「プレビュー対象のタブ内で開いた複数ページで1度でも発火したタグ」に変わるなど細かい部分で変化が見られます。 まだβ版ということもあり不便になってしまった部分もありますが、使い勝手を良くするためのアップデートがちょこちょこ掛かっている様子です。 首を長くして待つか、気になったことがあれば管理画面右上の「…」ボタンをクリックして「フィードバックを送信」しても良いかも知れません。![フィードバックを送信](/wp-content/uploads/2020/10/pic_20201028_38.png)