aタグを使ってイベントトラッキングする時は子要素にも注意

2018年10月22日タグマネ・解析コラム

前々回の投稿に続いて、イベントトラッキングに関するGTM不具合相談の事例をご紹介します。


ページに複数個設置しているプルダウンボタン (下図赤枠部分) のクリック回数を、ボタンごとに測定するために、

↓下記のソースのように、<a> タグに「plan01」「plan02」のクラス名を追加して、GTMのClick Classes変数を使って測定しようとしたが上手くいかなかったとのこと。

今回は、先日の事例のような「javascript:void(0)」の記述もありません。


本件の不具合の原因は <a> タグの中に、子要素としての <span> タグがあったために「 <a> タグではなく、その中の <span> タグがクリックされた」とGTMが判断したことでした。

そこで今回は下記のように、各ボタンごとに2つのトリガーを設置し、イベントトラッキングが発火するように調整しました。

▼Plan1ボタン
 ・すべての要素:Click Element「CSSセレクタに一致する .plan01」
 ・すべての要素:Click Element「CSSセレクタに一致する .plan01 span」

▼Plan2ボタン
 ・すべての要素:Click Element「CSSセレクタに一致する .plan02」
 ・すべての要素:Click Element「CSSセレクタに一致する .plan02 span」

トリガーは「.plan01 span」のみに設定しても良かったのですが、クリック箇所によっては「.plan01」がクリックされたと認識される可能性もあるため、念のため両方設定しています。

以上、ご参考になりましたら幸いです。