IDを付与した要素の子要素がクリックされた際にもGoogle Tagでクリックイベントを測定できるようにする

こんにちは。エキサイトでエンジニアをしている奥川です。今回はGoogle Tag Managerでクリックイベントの計測を行う際のテクニックをご紹介します。

Google Tag でクリックイベントを計測する際は要素の指定をさまざま方法で行います。詳細はGoogleのドキュメントをご覧ください。

support.google.com

今回は組み込み変数 Click ID を用いて、クリックされた要素のIDが特定の値の場合にイベントを発火させる場合のテクニックを紹介します。IDを用いる場合は次のようにDOM要素にIDを指定することで、どの要素がクリックされたかを判別します。

<div id="target">
  Google Tag
</div>

この指定方法の場合、子要素をクリックしてもクリックイベントは計測されません。

<div id="target" style="background: lightgreen; padding: 20px;">
  反応する
  <div style="background: lightcoral; padding: 20px;">
    反応しない
  </div>
</div>

しかし、子要素がクリックされたときにもイベントが発火してほしいケースがあります。例えば、ボタンの中にflexで要素を並べている時などです。

そういった場合は、子要素に対してpointer-events: noneを設定すると要素がポインターイベントの対象にならなくなるため、親要素のクリックイベントを発火させることができます。 developer.mozilla.org

<div id="target" style="background: lightgreen; padding: 20px;">
  反応する
  <div style="background: lightcoral; padding: 20px; pointer-events: none;">
    反応する
  </div>
</div>