【AYUDANTE NEWS 2025年4月号】教えて畑岡さん！GTMのページビューとクリック計測のトリガーの使い分けってどう考えるの？

GTMのトリガーに入る前に、そもそもですが、どうして皆さん「発火」っていうんでしょうか？

タグを出すことを「発火」と表現されていることがままありますね。
英語で ”Fire Tags” と言うのでその直訳ですが、要は銃のモチーフです。
タグが銃弾で、トリガーは銃の引き金です。「引き金のトリガーを引いて、タグの銃弾を発火させて出す」という流れなので「発火」という用語になっているようです。
つまり「タグを出すきっかけや条件」をまとめた設定がトリガーです。
考えてみれば日本は銃よりは刀なので、抜刀の方がいいかもしれませんね。

ページビュートリガーってそもそもなんですか？どんな時に使うのでしょうか？

トリガーの種類のいちばん上にまとまってる、「ページビュー」グループの5つのトリガーですよね。
これらは名前の通り、「ページ」が「ビュー（閲覧された＝見られた）」時に反応するトリガーになっています。
もし「特定のページでユーザーが何かした時」とかであればまた別のトリガーになってきますが、特にそういった指定がないようであれば「特定のページにタグを設置したい」＝「特定のページが見られたときにタグを出したい」となりますので、このページビューグループのトリガーの出番になるわけです。

トリガーは何種類かありますが、具体的にどう使い分けるのでしょうか？

選択欄の上から順に「DOM Ready」「ウィンドウの読み込み」「ページビュー」「初期化」「同意の初期化」の5つですね。
「ページ表示」のどのタイミングで反応させるか、で使い分けます。
タイミングが早ければ早いほど、計測漏れが発生しづらくなるので、好ましいです。
しかし「じゃあ全タグで1番早いトリガーを使えばいい」と思うでしょうが、それができない場合もあります。
そのため「タグを出すべきタイミング」に応じて、使い分ける必要があります。

どうしてページが表示されたタイミングに応じて使い分ける必要があるのでしょうか？

大きくは2つですね。
一つ目は「他のタグよりも早く出す必要がある場合」
二つ目は「早すぎると必要な変数が準備されていないので利用できない。だからわざと遅らせる必要がある」
前者の「他タグよりも早く～」の場合、「他のタグの動作の前提になっているタグ」に使います。ほとんどのタグはそれ単体で完結して動作しますが、たまに「このタグを動かす前に別のタグが動作済みでなければならない」みたいなものがあったりします。

例えば「GA4の計測におけるGoogleタグとGA4イベントタグ（イベントタグよりも前にGoogleタグが動いてないと計測データがおかしくなりやすい）」であったり、「Metaタグのベースタグとイベントタグ（ベースタグが動いてないとイベントタグが動作しない）」などですね。

後者の「早すぎると必要な変数が～」については、タグやトリガー内で「ページの中のデータ」を使いたい場合に関わってきます。
ページのURLなどであればページが開かれた時点でわかってるので全く問題ないんですが、ページ内のデータは、それがブラウザにダウンロードされてからでないとわかりません。

例えばページ内の見出しテキストを参照してタグの計測内容やトリガーの条件に使いたい、といった場合です。ブラウザが肝心のその見出し箇所を読み込み終わってないと、利用できないですよね？　「確実に読み込み終わってるタイミング」を指定するために、適切なトリガーを選ばなければなりません。

反応タイミングの違いについて押さえておくべきことは何でしょうか？

まずは5トリガーそれぞれが「反応するタイミング順」と、「各トリガーの用途」を把握しましょう。 実は「リストの上から順」になっていないので分かりづらいんですが、実際に反応するのは次のような順番になっています。
また、もしページに設置しているGTMスニペットタグよりも前にカスタムイベントを呼び出すdataLayer.pushがあった場合は、下記のタイミングで呼び出されることになります。

この5つのうち、先頭の2つは役割が決まっています。

「同意の初期化」は、同意ツール、いわゆるCMPツールのタグ専用です。あらゆる他のタグよりも、早く動作しなければいけないのです。

「初期化」は、同意ツール以外で「他タグよりも先に（前に）動作させる」と指定があるタグで使います。もしGTMスニペットタグよりも前にカスタムイベントがあった場合は「ページビュー」よりも先にカスタムイベントが反応するため、「ページビュー」ではなく「初期化」を利用しましょう。

残る3つが、ページビューの基本となるトリガーです。

特に同意ツールでもなく、そういった指示がないタグについてはこの3つの中から選ぶことになります。特に理由がなければ「ページビュー」を選ぶとよいでしょう。

ただし、タグの設定欄やトリガーの条件として「ページ内のデータ」を変数として利用している場合は、「DOM Ready」や「ウィンドウの読み込み」を使わなければならない可能性があります。

「DOM Ready」と「ウィンドウの読み込み」を使うのはどんな場合ですか？

先ほど挙げた「ページ内のデータはブラウザが読み込み終えてないと利用できない」というのが関わってきます。

ひとつ目の「DOM Ready」は、「ページのHTMLがすべて読み込まれたタイミング」を示しています。また、実質的にとほぼ同じタイミングにもなります。

ふたつ目の「ウィンドウの読み込み」は、「ページのHTMLとページが読み込んでいる全ファイル」、これらすべてが読み込まれたタイミングを示しています。

ですので、タグやトリガーで利用したい「ページ内のデータ」がページ本文中（＝HTML内）にある場合、または「タグの直前」と指定がある場合は「DOM Ready」を、ページから参照している外部 JavaScript などで生成されるデータなのであれば「ウィンドウの読み込み」を選択する、といった具合です。

まとめると、下記のような感じですね。

最近よく見かけるシングルページアプリケーション（SPA)の場合の注意点はありますか？

SPAでページの表示が変わっていく場合、ブラウザ自身は「ページの表示」とはみなしません。SPAはブラウザによるページ移動ではなく、あくまでJavaScriptの処理として、ページの一部を書き換えているだけなのです。そのため、ページビューとはならず、「ページビュートリガー」が機能しません。

この課題とそれを解決する方法は、とても込み入っているので、ぜひこちらのコラムを参照してください。

次にクリックトリガーについてお聞きします。クリックトリガーは、どんな時に使うのでしょうか？

名前の通り、「ユーザーが何かをクリックした」のを引き金にタグを出す場合に使います。
例えばリンクをクリックしたときだとか、ページ上のボタンUIをクリックしたときだとか、ですね。

クリックトリガーも「申し込みボタン」などを計測したいなど、使う場面が多いですね。

クリックトリガーの種類と使い分けについて教えてください。

クリックトリガーには「クリック-すべての要素」と「クリック-リンクのみ」トリガーの２種類があります。

リンクの計測であれば「クリック -リンクのみ」を選びます。こちらが基本になります。リンクではない場所のクリックも計測したいなら、「クリック -すべての要素」を選びます。
「すべての要素」は、名前の通り「何がクリックされても」反応するトリガーになっています。
だったら「大は小を兼ねる」ので、リンクでも「すべての要素」でもいいのでは？　と考えるかもしれません。
ですが極力、リンクは「リンクのみ」で設定することを強くおすすめします。

「すべての要素」でリンクを対象にしようとした場合、問題が起こりやすいです。特に困るのは「HTMLのa タグの中に、また別のクリック要素がある」ような場合です。このケースは意外に多いです。

例えば画像を含むリンクの場合、画像がクリックされたら画像のデータが、画像以外の余白部分などがクリックされたらリンクのデータが、といった具合に「Click～」系変数で取得されるデータが変わってしまいます。これだとトリガーの条件を作るのが難しく、意図通りに動作しない、あるいは条件を何個も設定しないといけない、となってしまいます。

ただ、ややこしくなる注意事項があります。リンクであっても、ページ側などで実装されているJavaScriptによっては「クリック-リンクのみ」トリガーが反応しないことがあります。

JavaScriptの処理によってはその「リンククリック」というアクションをキャンセルしたりするものもあるんです。リンクなのに「リンクのみ」トリガーが反応しない、ということがあります。

これは実装されてるJavaScriptにもよりますので、プレビューで実際に該当箇所をクリックして確認するのがいちばん手っ取り早いです。そしてもし反応しなかった場合は、リンクであっても「すべての要素」トリガーの方を使う必要があるので、要注意ですね。

「すべての要素」のトリガーでもうまくいかないときはありますか？ その場合は、どうすればいいですか？

繰り返しになりますが、「クリック-すべての要素」トリガーを使うときの主な課題は、「リンク内に要素が複数ある」場合です。この場合トリガーが想定通り動作しないケースが起こりがちです。

必要な対応は主に二つです。
ひとつ目は「Parent Element Variable」という変数テンプレートを使い、クリックされた場所による「Click～」系変数の値のブレをなくす方法。こちらについては以下のコラムを参照ください。

ふたつ目は、「CSSセレクターに一致」という演算子を使っている場合の対応です。

「対象を示すCSSセレクタ」のみだと、「対象に含まれる子要素」が含まれません。そのため、「クリック-すべての要素」トリガーでCSSセレクタを使用する際は「対象を示すCSSセレクタ, 対象を示すCSSセレクタ 」という具合にもともとのセレクタをコピーして後ろへ「,」つなぎで貼り付け、さらに末尾へ「 *」（半角スペース＋*）を追加します。これにより、対象の子要素も含むCSSセレクタになります。

畑岡さんが動画で詳しくクリックトリガーについて紹介していますのでご興味がある方はこちらも併せてご覧ください！

タグが思ったタイミングで発火しないときのチェックポイントはありますか？

もし紐づけたトリガーが思ってたページや思ってたタイミングで反応しない（タグが発火しない）という場合は、プレビューで詳細を確認するのが良いでしょう。

プレビューで動作確認する際、デフォルトだと左側は「Summary」が表示されていますが、トリガーの動作確認では、「Summary以外に切り替えた」状態で「タグをクリックしてタグ詳細」を確認するのがおすすめです。

それぞれのトリガーの条件ごとに、チェックすることができるからです。

「出てほしいタイミングでタグが発火してない」という場合は、プレビューでタグ名をクリックしてタグ詳細を確認してみましょう。それぞれのトリガー条件の〇×から、変数の選択や値の設定が誤ってないか、が見られます。

逆に「出てほしくないタイミングでもタグが発火してる」という場合も同様に、タグが発火してしまったタイミングに切り替えてタグ詳細を見ることで、どのトリガーが反応してしまったかを確認することができます。

畑岡さんありがとうございました！
プレビュー画面は本当に最後の頼みの綱ってイメージが個人的にはあります。皆さんも是非プレビュー画面の活用は積極的に使ってみてください！特に出てほしくないタイミングでも発火してしまっている可能性のチェックは忘れずに行いましょう！発火しなくても「発火しない理由」をきちんと見つけて楽しいGTM設定ライフを楽しんでください！