Google Tag Manager「要素の表示」トリガーが発火しない原因

GTMの「要素の表示トリガー」は、その名の通り「指定した要素が表示されると発火するトリガー」で、バナーやリンクのクリック率を、ページビューではなく表示数で測りたい場合なんかに使用します。

これがうまく発火しないという相談を立て続けにもらったので、メモしておきます。

原因1:「DOMの変化をモニタリング」にチェックを入れていない

だいたいの原因はこれです。特に、接客ツールでバナーを後から差し込んでいるようなケースではほぼ、これです。

DOM の変化をモニタリング: チェックボックスをオンにすると、DOM の変化によって表示有無が変化する要素も、トリガーの監視対象となります。

要素の表示トリガー – タグ マネージャー ヘルプ

DOMというのが分からない人にはなんのこっちゃだと思いますが、ざっくりいうと「HTMLを JavaScript が解釈できる状態にしたもの」のことです。正確ではないですがたぶん大体合っていると思います。それでも分かんない場合はもうDOM = HTMLだと思えば良いですw

この「解釈」というのは、通常だとページを読み込んだタイミングに1度しか行われません。そして接客ツールのバナーの類は、多くのケースでGTMより後で読み込まれます。したがってGTM側で合致する設定のトリガーを作ったとしても、後から差し込まれた img タグなり何なりをGTMが認識することができないので、「そんなの有りませんけども」となって発火しないというわけです。

では「DOMの変化をモニタリング」は何をしているかというと、要は「このページ、あとから接客ツールとかでHTML差し込まれたりするかもしれないんで、その辺よろしく」というのをあらかじめGTMに伝えておくことができる機能になります。そうすれば、GTMもそのつもりで頑張るので発火するようになります。

なお、チェックを入れるとこういう注意書きが表示されます。

指定したオプションによっては、サイトのパフォーマンスに影響が出る可能性があります。
画面上での最小表示時間を設定したり、DOM の変化をモニタリングするためのトリガを設定したりすると、選択した要素の状況を Google タグ マネージャーでモニタリングする必要があります。そのため、条件の一致する要素が 1 ページ上に複数あると、サイトのパフォーマンス(ページの読み込み)が遅くなる場合があります。そうした事態を回避するため、CSS セレクタがあまり多くの要素と一致しないようにするか、ID を指定して選択する方法をご利用ください。

ページが重くなりやすい機能のようです。ただあんまり感じたことがないので、やたらに付けないのであれば一旦気にしなくても良いと思います。

原因2:「視認の最小割合」が大きすぎる

これは画面のサイズが小さいスマホでよく起きます。

視認の最小割合とは、「指定した要素が画面に何割見えたら発火するか」を設定する項目です。デフォルトは50%、つまり半分見えたら、イコール見たってことでいいよね?扱いになります。

したがって例えば、視認の最小割合=100%、かつ、一画面に収まりきらないレベルの大きな要素を対象に指定したりすると、画面にはちゃんと見えているのに、はみ出た分が100%に到達するのを妨げてしまうので、いつまで経っても発火しないという現象が起きてしまいます。

対策としては、以下のようなものが考えられます。

  • 視認の最小割合を「50%以下」にする(1%とかでも良い)
  • ページやセクションの枠のような、大きな要素は対象として指定せず、見出しのような小さな要素を指定できないか検討する

参考ページ

読んでおくと良さそうなページたち

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です