基於jQuery或Zepto實現即時監控使用者瀏覽資訊

標籤：ott   lis   條件   false   情境   component   win   tar   nod   

對於一些大型公司，想要有一些監控使用者行為的分析，怎麼辦？

比如一個情境，A公司想要監控使用者瀏覽當前螢幕有哪些資料怎麼辦？

那麼就用到本文所提的監控解決方案了：

1.首先要監控使用者到底在該屏停留了多久；

2.基於1確定使用者是停留在了本頁面而沒有滑動手機螢幕；

3.在使用者未達到條件後的callback機制。

基於以上的問題，我們可以想到時間分區

 

 1 /* This is a expose advertisements component. 2  * Base on some class libraries that has dom selector such as jQuery or Zepto. 3  * The bind dom must be a block element. 4  * use as $(‘.class‘).exposure(settings); 5  * The bottom expose proportion use ($(window).height() + $(window).scrollTop() - $(‘.class‘).eq(index).offset().top)/$(‘.class‘).eq(index).height() 6  * The top expose proportion use (1 - ($(window).scrollTop() - $(‘.class‘).eq(index).offset().top)/$(‘.class‘).eq(index).height()) 7  * settings: object 8  * { 9  *      ‘exposeSecond‘: 2 // 2 seconds for advertisement to expose10  *      ‘timePeriod‘: 100 // 100 Millisecond for every time period11  *      ‘sendFunction‘: function(){} // callback for each expose time12  * }13  */14 (function($, window){15     $.fn.exposure= function(settings) {16         var $this = $(this), el = {}, _winScrollTop = _winScrollTop = $(window).scrollTop(), _winHeight = $(window).height(), watcher = null, sendQueue = [], checkOldTop = checkNewTop = 0, timePeriod = settings.timePeriod || 100, topThis = this, staySecond = settings.exposeSecond || 4, nowTime = 0, sendedQueue = [], turnFlag = true, proportion = 0.8;17         var stayTime = timePeriod * 10 * staySecond;18         var _bindElement = function() {19             el = {20                 $ads: $this21             };22         },23         _bindAction = function() {24             $(window).on(‘scroll.ad‘, function(eve){25                 _winScrollTop = $(window).scrollTop();26                 _winHeight = $(window).height();27                 _checkAdSection();28             });29         },30         _checkAdSection = function() {31             sendQueue = [];32             turnFlag = true;33             var _checkNewTop = 0;34             el.$ads.each(function() {35                 var $self = $(this);36                 var _offsetTop = $self.offset().top;37                 var _eleHeight = $self.height();38                 if (_offsetTop <= _winScrollTop && _offsetTop + _eleHeight > _winScrollTop && (_offsetTop + _eleHeight * (1 - proportion)) >= _winScrollTop) {39                     sendQueue.push($self);40                     _checkNewTop = _checkNewTop ? _checkNewTop : _offsetTop;41                 }42 43                 if (_offsetTop > _winScrollTop && _offsetTop <= (_winHeight + _winScrollTop) && (_offsetTop + _eleHeight * proportion) <= (_winHeight + _winScrollTop)) {44                     _checkNewTop = _checkNewTop ? _checkNewTop : _offsetTop;45                     sendQueue.push($self);46                 } else if (_offsetTop > (_winHeight + _winScrollTop)){47                     return false;48                 }49             });50             checkNewTop = _checkNewTop;51         },52         _startWatcher = function() {53             if (watcher) {54                 return;55             }56 57             watcher = setInterval(function(){58                 if (!turnFlag) {59                     return true;60                 }61 62                 if (nowTime >= stayTime) {63                     turnFlag = false;64                     nowTime = 0;65                     _sendQueueHandler($.extend({}, sendQueue));66                     return true;67                 }68 69                 if (checkOldTop == checkNewTop) {70                     nowTime += timePeriod;71                 } else {72                     checkOldTop = checkNewTop;73                     nowTime = 0;74                 }75             }, timePeriod);76         },77         _sendQueueHandler = function(sendQueueArray) {78             settings.sendFunction(sendQueueArray);79         },80         _init = function() {81             _bindElement();82             _bindAction();83             setTimeout(function() {84                 _winHeight = $(window).height();85                 _checkAdSection();86             }, stayTime);87 88             _startWatcher();89         };90         _init();91     }92 })($, window);

$(‘.expose-node‘).exposure({
exposeSecond: 2,//曝光時間2s
sendFunction:function(nodes){//do what you want}//兩秒到了回傳的notes，自己處理具體要幹什麼
});

基於jQuery或Zepto實現即時監控使用者瀏覽資訊