Googleタグマネージャー（GTM）のプレビューモードの基本の使い方

イベント設定が終わったら、Googleタグマネージャーの右上にある「プレビュー」ボタンをクリックします。

新たにタブが立ち上がり、以下のような画面が表示されたら、URLを入力し「リンク（またはconnect）」ボタンをクリックします。

さらにタブが立ち上がり、前のステップで入力したURLのページが開きます。

このページの右下に、「Tag Assistantに接続しました」という表示が出ていることを確認しましょう。この表示のあるページはGTMのプレビューモードと繋がっていますので、未公開のタグも動かすことができます。

一度、前のステップで開いた「Tag Assistant」のタブに戻り、表示されているポップアップ内の「続行」ボタンをクリックします。

これで検証の準備が整いました。

まずはタグの配信状況を確認してみましょう。

以下の画像に表した3つのエリアをざっくりと見ておきます。

中央のエリアは、上下に2つに分かれています。

上部の「配信されたタグ（またはTags Fire）」のエリアは、サイト上で動いているタグが表示されます。例えばGoogleアナリティクスの計測用タグ（Googleタグ）は、すべてのページで最も早く動きます。なので、プレビューモードを立ち上げた瞬間に動いているはずです。

一方の「未配信のタグ（またはTags Not Fire）」のエリアは、サイト上でまだ動いていないタグが表示されます。例えば今回検証するボタンクリックイベントはこちらに表示されています。まだサイト上でボタンをクリックしていないからです。

GTMに接続されているページ上で、検証したいイベントを発生させます。

以下の画像の例では、これまで「未配信のタグ」のエリアにあった「ボタンAクリック」のタグが「配信されたタグ」のエリアに移動しました。

イベントを発生した時に、意図通りのタイミングでタグが動けば、設定が正しいと判断できます。

タグが動いたタイミングを、より詳しく確認したい場合には、プレビュー画面のタグ自体をクリックします。

タグをクリックすると、以下のように「配信トリガー」にタグが動いた際の条件が表示されます。

今回の例では、「Click ElementのCSSセレクタの一致」と「その要素がクリックされたこと」という2つの条件が揃ったことでタグが動いたことがわかります。

タグの中には、詳細情報を含めて設定している場合もあります。

例えばGA4の場合には「イベントパラメータ」という詳細情報を変数に保持させて、Googleアナリティクスのデータとして記録します。そうしたタグと一緒に送られた詳細情報についてもプレビューモードで確認できます。

左側のサイドバーで目的のタグが動いた時のイベントを選択（今回は「クリック」）し、中央の画面の「変数」タブに移動すると、タグ内の詳細情報が表示されます。

イベントに設定した変数に正しく情報が入力されているかどうか確認してみましょう。例えば以下の例では、クリックした場所に含まれるテキスト情報（Button-A）が「Click Text」という変数に格納されていることがわかります。

プレビューモード上で発生させたイベントは、Googleアナリティクスのリアルタイムレポートでも確認できます。

GA4の「レポート > リアルタイムの概要」と進み、「イベント数」のブロックに設定したイベントが表示されるかを確認してみましょう。

プレビューモードでタグが正しく動いていることが確認できたら、忘れずにGoogleタグマネージャーの設定を公開します。公開設定は2つのステップに分かれているので注意してください。

まずは、管理画面の右上にある「公開」ボタンを押します。

表示された画面で「バージョン名」を入力します。バージョン名には、Googleタグマネージャーにどのような設定を加えたのかを書いておきましょう。

バージョン名を入力したら、再度右上の「公開」ボタンを押します。