Edited at

クリックイベントが取れなくて詰んだ

More than 1 year has passed since last update.


今回起きた事象


  • サイトのページ内にあるページ内リンクのクリック数を取得するためにイベントトラッキングの設定を行ったが、タグが発火しない

  • クリックイベントを取得できないためGAにクリックされた回数の数字も送られていない状態


やったこと


1. Googleタグマネージャーの設定を見直す

例:ボタン風テキストリンクのクリック数を取得

* ボタン風テキストリンクのaタグにid属性を付与し、値にhogeを設定していました

* hogeのクリック数を取得できたら成功


タグ

タグタイプ
トラッキングタイプ
カテゴリ
アクション
ラベル
非インタラクションヒット
配信トリガー

ユニバーサルアナリティクス
イベント
foo
{{Page Path}}
{{Click ID}}

下記参照


  • GAのラベルにClickされたIDの値を表示したかった


トリガー

トリガー名
トリガーの種類
トリガーの発生場所

テキストカラム
クリック-すべての要素-
Click ID 等しい hoge


  • クリックしたIDの値がhogeに等しいときをタグが発火する条件にしていました


結論

タグの設定自体はあまり原因ではなさそう


2. GTMでどの要素が取得できているのかを確認する


  • Googleタグマネージャーをプレビューモードにし、どの要素が取得できているのかを確認


    • ClickElementが取得できている

    • Click Textも取得できている(取得できた値:ボタン風リンク)

    • Click IDに表示されている値を見ると、""となっていました

    • 期待値はhogeなんだけどなぁ...




結論

どうやら、ClickされているID自体を取得できていないっぽい

でもElementは取得できてるっぽい


3. 対象のテキストリンクがどんな構造になっているのかを確認

<a href="#" name="bar" id="hoge">

<span>ボタン風リンク</span>
</a>


  • aタグにidを付与して、値もちゃんとhogeになっている

  • aタグの下にspanタグがインライン要素として入っている


仮説


  • クリックしたときにaタグに入っている値がごっそり取得できていない
    ->spanタグに入っている要素をクリックイベントで取得してる...?

->HTML?GTM?の仕様で、クリックしたときにインライン属性に含まれている要素から取得するらしい。そのため、spanタグの値を先に取得し、aタグに入っている要素を取得できていなかった


解決方法


GTMの設定を変更した


変数を作る


  • Googleタグマネージャーに変数を新しく作った

  • 今回はoffsetParent.idという変数を作成


変数の設定

変数の選択
変数名
データレイヤーの変数

データレイヤーの変数
offsetParent.id
gtm.element.parentElement.id

gtm.element.parent.idは、

GTMで取得できているElementの親要素にあるidを取得する

という設定にしている


  • offsetParent.id:クリックしたときにspanタグがターゲットになっているので、ターゲット要素の親要素に含まれる属性をみにいく設定


トリガーを変更

Click IDにしていたものをoffsetParent.idに変更

で、解決した


まとめ


  • インライン属性には注意する

  • データレイヤーはとても便利

  • * aタグ要注意