【GTM】クリック箇所を限定したリンククリックイベントの取得方法

海外でjQueryを使ってゴチャゴチャやっていたけど、実は単純に実装できるよ!というパターンです。
まずはページのソースですが、例えばこんな状態だったとします。

【ソース例】




で、このulタグの中のリンクをクリックしたイベントだけを取得したい場合、Google Tag Managerの設定は一工夫必要になる場合があります。

この例の場合、
Auto Event VariableでElement Classを設定した後に

event = gtm.linkClick
elementClass = blogroll

の条件ではリンクのクリックイベントを取得できません。
こういうネストしている状況でリンククリックのイベントを取得する場合、aタグにElementが指定されていれば良いのですが、そうではない場合マクロにdataLayerを指定する必要があります。

即ちdataLayerの値をこういう設定にします。
gtm.element.parentElement.parentElement.className

クリックされたaタグから見て、2つ親のノードのクラス名を指定する必要があります。

event = gtm.linkClick
gtm.element.parentElement.parentElement.className = blogroll

という指定方法をすることでクリックイベントが取得できるようになります。
実際にはマクロ名が長すぎるので、全然違う名前を付けることになります。

こういうものはChromeまたはFirefoxのFirebugで調べます。
一旦gtm.linkClickをページで発動させた後にChromeのコンソールを見てみます。


gtm.linkClickというイベントが発動しているのが分かります。
それと別に、gtm.elementの下に色んな値があります。そこを調べてみるとどのような値を設定すればイベントが取得できるかが分かります。

gtm.element.parentElement.parentElement.className

【関連】
Google Tag Managerに関するまとめ

このブログの人気の投稿

ウェブサイトユーザビリティ評価のためのSUS(System Usability Scale)

離脱改善指標に関するメモ

[Google Spreadsheet]ある文字列を含むリストを表示させる