今回起きた事象
- サイトのページ内にあるページ内リンクのクリック数を取得するためにイベントトラッキングの設定を行ったが、タグが発火しない
- クリックイベントを取得できないため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タグ要注意