という話

技術ブログにしたい

ある要素が画面内に入ったらGoogleAnalyticsにイベントを送信する

同僚から聞きましたが、今の広告業界では1インプレッションは画面内に表示された回数らしいです。
PV=インプレッションの時代は終わってたんですね。。

そんな感じで動作するものを実装しなくてはいけなくなったのでメモ。


いつも通りjQuery使います。
宗教でDOMの直接操作を禁止されてる方には申し訳ないですがここで終わりです。


jquery.inview

要素が画面内にあったときにイベントを発生させてくれるjqueryプラグインです。

使い方とかは以下の記事が大変詳しく、参考になりました。




この記事でほぼ終わってるんですが、ハマるポイントがありました。
このプラグインでは画面内に入った時も出た時もイベントが発生しますし、画面内に既に入ってる状態でも更にイベントが発生したりします。

$('target_dom').on('inview', function(e, isInView, visiblePartX, visiblePartY)
{
  // GoogleAnalyticsに通知する処理
  ga('send', 'event', {'eventCategory':'category', 'eventAction':'action', 'eventLabel': 'event'});
});

例えばこんな書き方をして、上からスクロールしていった場合
1. 要素の上辺が画面内に入った時
2. 要素全てが画面内に入った時
3. 要素の上辺が画面外に出た時
4. 要素の下辺が画面外に出た時

という感じで4つイベントが発生する可能性があります。

今回は
・画面内に要素が入ったら1カウントし、画面外に出るまでカウントしない
・画面外に出てから再度画面内に入った場合は再度カウントする
という仕様にしたいので以下のようにします。

inviewFlag = false; // 画面内に入ってるかどうかのフラグ
$('target_dom').on('inview', function(e, isInView, visiblePartX, visiblePartY)
{
  if (isInView)
  {
    if (!inviewFlag)
    {
      // GoogleAnalyticsに通知する処理
      ga('send', 'event', {'eventCategory':'category', 'eventAction':'action', 'eventLabel': 'event'});
    }
    inviewFlag = true;
  }
  else
  {
    inviewFlag = false;
  }
});


これで画面内に入ったらGoogleAnalyticsに通知できます。

GoogleAnalyticsでイベントをトラッキングする場合は以下のURLを参考に設定します。
analytics.js のフィールドに関するリファレンス - Google アナリティクス — Google Developers

僕はイベントが発生したページとか、DOMを取得したいので以下のようにしてます。

ga('send', 'event', {'eventCategory':'category', 'eventAction':location.href, 'eventLabel': e.target.id || e.target.className});


これでインプレッションを出せるようになりました。