Googleアナリティクスで一定以上スクロールしたらイベントトラッキング(PC/スマホ別)


条件は下記。

  • PC、スマホで特定ピクセルを超えてスクロールしたらイベント検出
    • PCは800ピクセル(> 800
    • スマホは600ピクセル(> 600
  • 一度イベント検出したらそのPV中は再検出しない(その後のスクロールは無視)
  • 対象URLは
    • /aaa/
    • /aaa/sp/
    • /aaa/index.html
    • /aaa/sp/index.html
      PCもスマホも対応、index.htmlの有無に両対応
  • 既存のトラッキングコードとセットで設置(HTML内の別箇所ではない)

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

コード

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

IE9以降のみ対応でいいなら

// 処理で使った変数や関数がグローバルを汚染しないようにクロージャで
(function(){

  // ここから本実装
  // 特定の階層のみ指定
  if(/^\/aaa\/(sp\/)?(index\.html)?/.test(window.location.pathname)){

    // このタイミングで実行することで、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);

  }
}());

IE8以前対応の場合

イベントハンドリング用のライブラリを使う。

// ここからイベントトラッキングのコード
// 処理で使った変数や関数がグローバルを汚染しないようにクロージャで
(function(){

  // ライブラリ
  // イベントに対して処理を付加(他と共通で使っている)
  function ae(el, ev, fn){
    if (window.addEventListener) {
      el.addEventListener(ev, fn, false);
    } else if(window.attachEvent) {
      el.attachEvent('on' + ev, fn);
    }
  }

  // イベントに対して処理を削除
  function re(el, ev, fn){
    if (window.removeEventListener) {
      el.removeEventListener(ev, fn, false);
    } else if(window.detachEvent) {
      el.detachEvent('on' + ev, fn);
    }
  }

  // ここから本実装
  // 特定の階層のみ指定
  if(/^\/aaa\/(sp\/)?(index\.html)?/.test(window.location.pathname)){

    // このタイミングで実行することで、Googleアナリティクスのトラッキングタグとの前後関係は問わなくなる
    ae(window, 'load', 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){
            // イベント検出を無効に
            re(window, '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;
      ae(window, 'scroll', f);
    );
  }
}());

Googleアナリティクス関連Tips

イベント計測

ページビュー計測

eコマース計測