読了: 約 4 分

現在関わっているサービスで、Infinite ScrollとInfinite Scrollのリスト内に含まれるバナーの計測を行うという機能実装する中で、画面内に入った特定Classが付与されているものをscroll時に監視してトラッキングする際のメモ。

Infinite Scroll

シングルページアプリケーションが台頭し、今となっては昔ながらのページングに変わり新しいページング機能として使われているインフィニティスクロール。サービスによっても実装方法は異なるかと思いますが、ここで今一度実装方法を検討してみたい。

jQueryのプラグインでもありますが、大体独自実装している企業やサービスが多いかと思います。
autoLoad等ともの呼ばれるのでPHP等で検索すると結構情報が出て来ます。

https://github.com/infinite-scroll/infinite-scroll

自分たちのサービスでは独自実装しているのですが、リストの個数(表示したい一つのブロック)に応じて、
またはその中の画像等の要素に応じてユーザビリティを考慮した設計にする必要があります。
そういった状況を加味した上で最適なコードとは何かを考えている次第。

◆引数にデータを渡して、render関数を実行するケース
画面の高さを取得して、その高さからbodyの高さを引き、画面のどこ迄スクロールしているかを割って、
の値が0.6より上なら実行というロジック。

    var autoload = function(data) {

      var window_height = $(window).innerHeight(),
          num = 0.6,
          checkPosition = function() {
            var $body = $('body');

            if ($(window).scrollTop() / ($body.height() - window_height) > num) {
                $(window).off('scroll', checkPosition);
                render(data);
            }
          }
      $(window).on('scroll', checkPosition);
    };

もしくは、下記で紹介するjQuery.inviewプラグインを利用して、最後のリストが読み込まれた時に、renderするもの。
取得・読み込むリストの個数によって、異なるかと思いますが、li:eq(-5)とか定数にするのが微妙なので、どうすれば良いものか。

    // インフィニティスクロール
    var autoload = function(data){
      $('#target').find('li:last').one('inview', function(event, isInView, visiblePartX, visiblePartY) {
        if(isInView) render(data);
      });
    };

これに加えて、renderされるリストの中に含まれる特定classを監視して、
トラッキングを実行するという実装。

対象がスクロールして画面内に入って来た時に実行するjQueryプラグインのinview

非常に便利で助かっています。上記のようにinfiniteScrollのように使用する事も出来れば、色々な用途があると思います。
複数の対象を監視して、oneメソッドで一回だけイベントを登録。
autoloadでテンプレートがappendされる度に下記のappAnalyticsメソッドを実行する形。

function appAnalytics(){
  // Dependency jquery.inview.js (https://github.com/protonet/jquery.inview)
  var $appElm = $('.js-app');

  $appElm.each(function() {
    $(this).one('inview', function(event, isInView, visiblePartX, visiblePartY) {
      var key = '',
          index = 0,
          data = {};

      key = $(this).find('.js-ad').data('toAppKey');
      index = $appElm.has('[data-to-app-key="'+key+'"]').index(this);
      data = {
        action: 'view',
        option: trackOptions[key][index]
      };

      if(visiblePartY === 'both') tracking(data);
    });
  });
}

appendされたらAnalytics実行でえーやんという話なのですが、バナーが見られた時のみ取得したいようで。
実際広告主からしたらimp計測されていた場合マジないわーって思うので、必要ですね。