Googleアナリティクスで特定の要素を表示したときにイベントトラッキングする

2017年3月17日

Googleアナリティクスなどでページの精読状況をトラッキングする際、
「特定ピクセル以上スクロールする」「画面の○%以上スクロールする」ことがあるが、
同様に「特定の要素を表示したとき」という条件でトラッキングしたいときもある。
コンテンツの精読だけでなく、たとえばクーポンをページに仕込んでおいて
その表示回数をカウントするなどのケースでも使える。

そのような場合にエレメントの座標を取得して、そこまでスクロールしたら発火するというアイデアがあるが、
実はスマートフォンでは機種によって画面の幅が異なるため、テキスト部分の行数が変わり、縦座標の値も変わってくるという問題がある。
単純に縦の位置を取得するだけでは使えないのである。

ここではそれを回避する方法を説明する。

element.getBoundingClientRect()というメソッド

element.getBoundingClientRect()というメソッドを使う。
element.getBoundingClientRect()の戻り値はオブジェクトで、

などとなっている。

プロパティの意味は

  • widthheightはエレメントのサイズ(固定値)、

画面の左上を起点として、

  • エレメントの上端(top)までのピクセル数がtop
  • エレメントの下端(bottom)までのピクセル数がbottom
  • エレメントの左端(left)までのピクセル数がleft
  • エレメントの右端(right)までのピクセル数がright

topbottomは起点より上にある場合はマイナスの値
leftrightは起点より左にある場合はマイナスの値

である。

特定の要素が画面に完全に表示されたとき=要素の下端が画面下端より上にあるとき

なので、

という条件になる。分かりやすくまとめると

ということになる。

コード

実際のGoogleアナリティクスのイベントトラッキングとして実装すると以下のようになる。
Googleアナリティクスのトラッキングタグとの前後関係は問わない(どこに設置してもいい)。

実際には

  • GTMでGAのトラッカーを呼び出している
  • SPとPCでエレメントIDが違う

ケースだったので

というコードになった。

用途

このスクリプトは

  • クーポンの表示
  • テキストのどの段落まで読了したか

をカウントのに使える。これらは結構実現したい用途ではないだろうか?

Googleアナリティクス関連Tips

イベント計測

ページビュー計測

eコマース計測