GTMで設定したタグがちゃんと動作するために、デバッグ機能がGTMには用意されており、これを使うと自分のブラウザだけに、GTMの変更を適用することができます。

ここではデバッグ機能の使い方について簡単に紹介しようと思います。

公式マニュアルはここを参照。

ホーム画面のプレビューボタンを押すとデバッグモードになる

ホーム画面の右上にある「プレビュー」ボタンを押すと、プレビューモードとなりデバッグすることができます。

プレビューモードにすると、まだ公開していないタグが自分のブラウザで動くように、実際にWEB画面を使って動作確認します。

再度GTMの設定を変更した場合は、GTM画面の「更新」ボタンを押します。

「プレビューの共有」を押すと、URLが表示され、ほかの端末やブラウザからこのURLにアクセスするとプレビューモードを利用できます。

別タブを開いて動作確認したいWEB画面を開く

GTMをプレビューモードにしたあとに、同一ブラウザの別タブを開いてデバッグ対象のWEB画面を開きます。

WEB画面下部にGTMのプレビューエリアがでれば、プレビューモードで動いていることになります。

プレビューエリアの見方

WEB画面下部に表示されるプレビューエリアには3つのタブがあります。

「Tags」タブはそのページで実行されたタグ、実行されていないタグが分かります。主に利用するのはこのタブになります。

「Variables」タブは変数の種類、返されたデータの種類、解決値など、選択したイベントの変数に関する詳細情報が表示されます。

「Data Layer」タブは選択したイベントに応答してデータレイヤーにプッシュされたメッセージ オブジェクトと、そのメッセージのトランザクションが完了した後のデータレイヤーの状態が表示されます。

以上がGTMのプレビューモードを使ったデバッグ方法になります。