アクセス解析担当者がGTMについて語るブログ

GTM(Google Tag Manager)・GA(Google Analytics)の中~上級者向け情報を中心に発信

クリックトリガーで「すべての要素」は反応するのに「リンクのみ」が反応しない時の対処法

この記事は Google Tag Manager Advent Calendar 2018 - Adventar 1日目の記事です

前提

  • gtm.clickイベント(すべての要素トリガー)は発生(反応)している
  • 対象の要素はaタグ、areaタグのいずれかとなっている
  • gtm.linkClickイベント(リンクのみトリガー)は発生(反応)しない

結論

設定したエンジニアにpreventDefaultを使ってもらうように依頼してください。

もしくは {{Click Elements}} [CSSセレクタに一致] [a,a *](areaタグの場合は[area,area *])のように設定しましょう。

ざっくり解説

ページ内リンクをクリックしたときなどにページを再読み込みさせず、アニメーションを用いてスムーズなスクロールを行うような設定を入れることがよくあります。そのような処理を書く場合は、リンク要素の本来の挙動である再読み込み、ページ遷移を行う動作を強制的に無効にする必要があります。

jQueryの場合、return falseを入れることで本来の挙動の無効化が可能となります。

しかし、jQueryにてreturn falseを用いると同時に他のイベントリスナーの発生、つまりGTM等の検知システムも止めてしまうことになります。

よって、「ページ遷移は止めてください。他のイベントリスナーは発生してよいです」という設定を行うために、return falseではなくpreventDefaultを用いる必要があります。

ので、そのように設定したエンジニアに伝え、GTMにイベントを伝播させるよう依頼すればよいでしょう。

イベントの伝播の詳細については以下のリファレンスを参考にするとよいでしょう。

例 - Web API | MDN

仮にライブラリ等ソースコードがいじれない場合は次項を参照してください。

現実的回避方法

残念ながらエンジニアへ依頼しての修正は、政治的納期的経済的に許されないことがかなりよくあります。

その場合はClick Elementsに対してCSSセレクタでa,a *というように指定するとよいです。

これはaタグ要素、もしくはその子要素を指し示すCSSセレクタであるため、実質リンクのみトリガーと同様のタイミングで起動します。

ただし、Click Elementsはaタグ要素ではなくクリックした要素となっている点については注意が必要です。Click Textが思わぬところを取得していた、などがないようにきちんと検証することが大切です。