Googleアナリティクスで一定ピクセルスクロールしたらイベントトラッキング

Googleアナリティクスで一定ピクセル以上スクロールしたらイベントトラッキングする実装方法。ユニバーサルアナリティクスの生タグでの実装方法を説明する。なお現在はGoogleタグマネージャーを使えば簡単に実装できるためあまり役には立たないかもしれない。

条件は下記。

PC、スマホで特定ピクセルを超えてスクロールしたらイベント検出
- PCは800ピクセル（> 800）
- スマホは600ピクセル（> 600）
一度イベント検出したらそのPV中は再検出しない（その後のスクロールは無視）
既存のトラッキングコードとセットで設置（HTML内の別箇所ではない）

実装のポイントは、一度scrolledがtrueになったらイベント通知したうえでイベント検出関数を削除すること。

コード

いずれのコードもGoogleアナリティクスのトラッキングタグとの前後関係は問わない（どこに設置してもいい）。

// 処理で使った変数や関数がグローバルを汚染しないようにクロージャで
(function(){
  // このタイミングで実行することで、Googleアナリティクスのトラッキングタグとの前後関係は問わなくなる
  document.addEventListener('DOMContentLoaded', function(){
    // スクロール時の処理を関数で
    function f() {
      if (!window.scrolled) {
        var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
        // スマホの場合は600ピクセルで
        if (window.navigator.userAgent.toLowerCase().indexOf('mobi') > -1) {
          if (scrollTop > 600){
            window.scrolled = true;
          }
        // スマホ以外の場合は800ピクセルで
        } else if (scrollTop > 800){
          window.scrolled = true;
        }
        // フラグが立ったタイミングで
        if (window.scrolled){
          // イベント検出を無効に
          window.removeEventListener('scroll', f);
          // 一応SPとPCで分けてイベントトラッキング
          if (window.navigator.userAgent.toLowerCase().indexOf('mobi') > -1) {
            ga('send', 'event', 'scroll', 'SP');
          } else {
            ga('send', 'event', 'scroll', 'PC');
          }
        }
      }
    }
    window.scrolled = false;
    window.addEventListener('scroll', f);
  }, false);
}());