GTMで子要素のクリックイベントも併せて取得したい場合は？

Question

前提・実現したいこと

<span>テキスト</span>という子要素が含まれる<button class="hoge">のクリックイベントをGAに送りたいと考えています。
つまり、
・親要素の<button class="hoge">のクリック時（button内のspan部分以外の隙間）
・子要素のspanのクリック時
このどちらも場合も同じタグが発火されるようなトリガー記述を実現したいです。

発生している問題・エラーメッセージ

発火のトリガーを下記に指定した場合、spanタグ以外の部分のクリックで発火します。
しかし、spanタグで囲まれたテキスト（子要素）をクリックしてしまうと発火しません。

【トリガー条件】{{click classes}} hoge　を含む

該当のソースコード

<button class="hoge type="submit">
　　<span>ほげほげ</span>
　　<span>ほげほげ２</span>
</button>

試したこと

そこで、GTMのデータレイヤー変数で「gtm.element.offsetParent.className」を作成し、
spanタグの親要素を取得するよう指定しました。

しかし、こうしてしまうと先ほどとは逆で、
spanタグ部分で発火を確認できたものの、spanタグ以外の部分では発火しなくなってしまいました。

この場合、子要素のspanの幅を<button>内いっぱいに広げてやれば一定は解決だとは思います。
ただ、親要素のpaddingがある場合などクリック領域の漏れもあるなど物理的に解消しているにすぎないため、
きちんとソースレベルで解消したく思います。

Comments

[yambejp]

「GAに送りたい」が具体的に何を指すか例示ください

[Pottan]

yambejpさま
この度は早速のご回答ありがとうございます。
GAに送りたい値は、GTMのタグで指定するイベントカテゴリ、イベントアクション、イベントラベルの3つです。

Answer 1

document.addEventListener('click',e=>{
  const t=e.target.closest('.hoge');
  var flg=t!==null && t.querySelector('span')!==null;
  console.log(flg);
});

ちょっと修正