2024年05月09日追記：
本記事の内容を動画にして公開いたしました。こちらもあわせてご覧いただければ幸いです。
こんにちは、連久実子です。
GTMタグ設定したら動作確認しよう。
非常に大事なことなので100回いう、GTMタグ設定したら動作確認…（以下略）
— 連 久実子 (@shuhu_marketing) June 30, 2023
日頃からWebマーケティングスクールの生徒さんとの面談でも上記のようにつぶやいていたら、生徒さんが動作確認をしてくれるようになりました。喜ばしいことです。
ただ、生徒さん曰く「タグが発火していないのは分かりました（が、何で発火しないのか分からん）。」という事。原因は色々考えられるものの、短い面談時間では原因究明〜修正までできないので、ケース別の修正方法をまとめてくれている記事がないかと探してみましたが、Googleタグマネージャを最近使い始めた方には少し難易度高めなものが多い印象。
ですので、これまでにWebマーケティングスクールの生徒さんから寄せられた質問をもとに、超初心者向けにGoogleタグマネージャのタグが発火しない原因別の修正方法をまとめてみました。
これから増えるであろうYahooタグマネージャからGoogleタグマネージャへの移行作業の際、普段Googleタグマネージャをあまり使うことのない事業会社の方や広告代理店の営業さんもGoogleタグマネージャを触る機会が増えるのではないかと思いますので、その際にぜひ参考にして頂ければと思います。
確認したいページに打ち消し線が引かれている場合
プレビューボタンを押すと表示される下の画面を「デバッグインターフェース」と呼びますが、このデバッグインターフェースのナビゲーションサマリーバー（左のメニューの部分）に表示されるページタイトルに下の図のように打ち消し線が引かれて、動作検証ができない場合があります。
デバッグインターフェース上に表示されるポップアップで「Continue」を押していない場合も、ページ遷移したページタイトルに打ち消し線が引かれる事が多いため、プレビューを使う場合は必ず「Continue」を押してから動作検証を始めましょう。
その上で、まずはGoogleタグマネージャースニペットが正しく設定されているかを確認するため、「Tag Assistant Legacy」というChromeの拡張機能を使います。下記のWebサイトから、Tag Assistant LegacyをChromeにインストールしてください。
インストールできたら、打ち消し線が引かれていたページをChromeで開き、Chromeのメニューバーに表示されているTag Assistant Legacyのアイコンをクリックしてください。
上のような画面が表示されますので、この中に動作検証しているGoogleタグマネージャのコンテナIDがあるかを確認しましょう。
コンテナIDがあり、その横に緑色のタグアイコンが表示されていれば、Googleタグマネージャースニペットが正しく設定されていると考えられるため、修正方法①を試してみてください。一方、コンテナIDがない、もしくはコンテナIDはあるもののその横のタグアイコンが黄色や赤の場合は、Googleタグマネージャースニペットが正しく設定されていないと考えられるため、修正方法②を試してみてください。
修正方法① -Tag AssistantでGoogleタグマネージャが正しく設定できていることを確認できた場合-
この場合は、Googleタグマネージャースニペットが正しく設定されてはいるものの、Chromeの設定や他の拡張機能がプレビュー機能の邪魔をしている可能性が高いです。そのため、別のChromeプロファイルで動作検証をすることをおすすめします。
Chromeプロファイルで動作検証をするには、まずChromeの右上に表示されているアイコンをクリックし、「+追加」をクリックします。
下のような画面が表示されますので、「アカウントなしで続行」を押してください。
プロファイル名は何でも良いですが、今回は仮に「GTM動作検証」と入力しておきます。その後「完了」を押してください。
ここまで終えると、まっさらの状態のウィンドウが立ち上がります。このウィンドウを開いたまま、動作検証をしていたウィンドウに戻ってください。
Googleタグマネージャを開き、「プレビュー」を押してください。
「Your website’s URL」に打ち消し線が引かれていたページのURLを入力し、「Connect」を押してください。
デバッグインターフェースが立ち上がりますので、「Continue」を押してください。
画面右上の三点リーダーをクリックすると、「Share」というメニューが表示されますので、こちらをクリックしてください。
下のようなポップアップが評されますので、「Copy Link」をクリックしてください。クリックすると別のウィンドウでプレビューを使うためのURLがコピーされます。
「Your website’s URL」には既に打ち消し線が引かれていたページのURLが入力されていると思いますので、そのまま「Connect」を押してください。
コピーされたURLを、先に立ち上げていたまっさらの状態のウィンドウのURLバーに入力してください。そうすると、下記のようにまっさらな状態のウィンドウでもデバッグインターフェースが立ち上がりますので、「Continue」を押してみて、こちらのウィンドウでも打ち消し線が引かれているかを確認してください。
打ち消し線が引かれていなければ、Googleタグマネージャースニペットは正しく設定されていると言えます。逆にまだ打ち消し線が引かれているようであれば、Googleタグマネージャースニペットが正しく設定されていない可能性が高いため、修正方法②を試してみてください。
修正方法② -Tag AssistantでGoogleタグマネージャが正しく設定できていることを確認できなかった場合-
この場合は、Googleタグマネージャースニペットが正しく設定されていない可能性が高いです。もう一度Googleタグマネージャースニペットの設定を見直してみてください。
WordPress等のCMSやカートシステムを利用されている場合、GoogleアナリティクスやGoogleオプティマイズのID入力欄に誤ってGoogleタグマネージャのコンテナIDを入力していることがよくあります。
また、<head>と<body>それぞれに設定するべきGoogleタグマネージャースニペットの、どちらかが設定されていないケースや、Googleタグマネージャースニペットのソースコードの一部が全角表記になっているケースもあります。全角か半角かの違いがわからない場合は、後述の「タグ内の記号が半角になっているか確認しましょう」を参考にして見てください。
イベント計測用のタグが発火しない場合
リンクのクリックなど、ユーザーが特定の操作をした場合に発火するイベント計測用タグの動作検証は、プレビュー画面を立ち上げただけでは検証ができません。プレビュー画面を立ち上げてそのままの状態では、イベント計測用タグは下のように「Tags Not Fired」に表示されています。
修正方法
この場合は、プレビュー画面で計測したいイベントを発生させていないことが原因です。今回はリンクのクリックを計測するためのイベント計測用タグが発火しないと仮定して、手順を説明していきます。
まずプレビュー画面を立ち上げます。その後、動作検証するページが表示されているタブにて、イベントとして計測したいリンクをクリックします。
そうすると下のように、ナビゲーションサマリーバーに「Link Click」という表記が追加され、「Tags Fired」に発火させたいタグが表示されます。
ナビゲーションサマリーバーの表記は、タグに設定したトリガーのタイプによって異なります。トリガーのタイプ別のナビゲーションサマリーバーでの表記は以下の表の通りですので、事前に設定されたトリガーのタイプによって、対応する表記がナビゲーションサマリーバーにあるかどうかを確認しましょう。
| トリガーのタイプ | ナビゲーションサマリーバーでの表記 |
|---|---|
| ページビュー | |
| DOM Ready | DOM Ready |
| ウィンドウの読み込み | Windows Loaded |
| ページビュー | Container Loaded |
| 初期化 | Initialization |
| 同意の初期化 | Consent Initialization |
| クリック | |
| すべての要素 | Click |
| リンクのみ | Link Click |
| ユーザーエンゲージメント | |
| Youtube動画 | YouTube Video |
| スクロール距離 | Scroll Depth |
| フォームの送信 | Form Submit |
| 要素の表示 | Element Visibility |
| その他 | |
| カスタムイベント | 設定したイベント名 |
トリガーの設定条件に問題がある場合
プレビュー画面を立ち上げてプレビュー画面で計測したいイベントを発生させたのに、イベント計測用タグが下のように「Tags Not Fired」に表示されている場合は、トリガーの設定条件に誤りがある可能性が高いです。
修正方法
この場合は、タグを発火させたいタイミングで出力されている各変数の値と、発火しないタグで設定している条件を照らし合わせます。今回もリンクのクリックを計測するためのイベント計測用タグが発火しないと仮定して、手順を説明していきます。
まずプレビュー画面を立ち上げます。その後、発火しないタグ名の書かれた部分をクリックすると、下のような内容が確認できます。
この画面の_eventの値と、その下に書かれたトリガーの条件（タグ作成時にトリガーで設定した「Click Classes」という変数名と「side_otoiawase_btn」という値）をメモしておきましょう。
次に、動作検証するページが表示されているタブにて、イベントとして計測したいリンクをクリックします。そうすると下のように、ナビゲーションサマリーバーに「Link Click」という表記が追加されますので、「Link Click」の部分をクリックした後「Variables」をクリックします。
下のような内容が確認できますので、この中の_eventの値と、先程確認した「Click Classes」の値が同じかどうかを確認します。
同じであればトリガーの設定は正しくできているのですが、異なる値であれば「Variables」に表示されている値に合わせてトリガーの条件を修正しましょう。
画像では、「Variables」の「Click Classes」の値には何も入っていませんので、トリガーで「Click Classes」を指定して条件設定することはできないと分かります。（こういった場合は「Click Element」を使うことが多いです）
_eventの値は、タグに設定したトリガーのタイプによって異なります。トリガーのタイプ別の_eventの値は以下の表の通りですので、タグを発火させたいタイミングで出力されている_eventの値の値によって、対応するトリガーのタイプがトリガーにて設定されているかどうかを確認しましょう。
| トリガーのタイプ | _eventの値 |
|---|---|
| ページビュー | |
| DOM Ready | gtm.dom |
| ウィンドウの読み込み | gtm.load |
| ページビュー | gtm.js |
| 初期化 | gtm.init |
| 同意の初期化 | gtm.init_consent |
| クリック | |
| すべての要素 | gtm.click |
| リンクのみ | gtm.linkClick |
| ユーザーエンゲージメント | |
| Youtube動画 | gtm.video |
| スクロール距離 | gtm.scrollDepth |
| フォームの送信 | gtm.formSubmit |
| 要素の表示 | gtm.elementVisibility |
| その他 | |
| カスタムイベント | 設定したイベント名 |
下のソースコードは<head>に設定するGoogleタグマネージャースニペットですが、上のソースコードと下のソースコードの違いはおわかりになるでしょうか？
<script>(function(w，d，s，l，i){w[l]＝w[l]||[]；w[l].push({’gtm.start’:
new Date().getTime()，event:’gtm.js’})；var f＝d.getElementsByTagName(s)[0]，
j＝d.createElement(s)，dl＝l!＝’dataLayer’?’&l＝’+l:’’；j.async＝true；j.src＝
’https://www.googletagmanager.com/gtm.js?id＝’+i+dl；f.parentNode.insertBefore(j，f)；
})(window，document，’script’，’dataLayer’，’GTM-XXXXXX’)；</script><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>答えは、「’」「=」「;」「,」が上のコードは全て全角、下のコードは全て半角という違いがあります。
Googleタグマネージャースニペットのソースコードや広告のソースコードはほとんどが半角で記述されているのですが、タグの発行者からタグの設定者にソースコードが渡される際にコピー&ペーストの仕方を誤って、全角に変換されてしまうといった問題が発生する事があります。
この場合、プレビュー画面ではエラーが確認できないのですが、広告運用開始後広告の管理画面にコンバージョンデータが反映されない時点で初めて設定ミスが発覚するケースが多いです。
このようなミスによってデータの計測漏れが発生しないよう、事前に設定したタグのソースコードが半角であるかを入念にチェックしておくと良いでしょう。
コメント