基于jQuery或Zepto实现实时监控用户浏览信息
对于一些大型公司,想要有一些监控用户行为的分析,怎么办?
比如一个场景,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 expose 10 * 'timePeriod': 100 // 100 Millisecond for every time period 11 * 'sendFunction': function(){} // callback for each expose time 12 * } 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: $this 21 }; 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,自己处理具体要干什么
});
转载于:https://www.cnblogs.com/houMing/p/6590913.html
基于jQuery或Zepto实现实时监控用户浏览信息相关推荐
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
- 实时监控用户输入--中文输入解决方案
需求:对用户的输入进行实时监控,当用户输入的内容超出规定的字符长度时对用户输入进行截断并给予警告提示. 看到这一需求,第一想法就是对所需实时监控的input输入框绑定input/propertycha ...
- pi数据库系统中国服务器,基于PI数据库的服务器实时监控系统研究与开发
摘要: 随着智能电网发展战略的提出,电力系统信息化程度的不断提高,电力企业信息系统的服务器.网络设备等信息设备越来越多,其重要性也越来越高.现行的信息系统的运行维护工作模式--信息值班员.系统管理员人 ...
- 一起体验 skywalking+es8.5.x 实时监控应用运行信息
序言 企业应用系统发展越来越庞大,依赖越来越多的产品组件,集成越来越多系统, 整体应用系统的性能取决于"木桶短板",为了捕捉系统的短板问题,更好的持续优化,需要一套完备的" ...
- 实时监控TCP Reset信息的二进制hook手艺
玩二进制hook上瘾可以,但不能走火入魔,继监控TCP半连接队列,计数iptables DROP以后,本文来实时监控TCP Reset报文信息,我保证,本文是这个关于二进制hook手艺的最后一篇. 当 ...
- python实时监控电脑运行信息(邮件预警)
直接上代码 python在学习阶段,存在多出冗余代码 应用场景 实时监控电脑本地系统运行情况,或某个进程 内存占用过大,指定时间内,进行邮件警示,发送信息于指定运维人员 流程 程序运行 --> ...
- 基于motion的视频压缩的实时监控系统
项目说明:监控报警系统 涉及到的技术: 1.OSS/ALSA 声卡驱动的配置 2.Madplay嵌入式播放器移植 3.实现V4L2图像采集程序 4.移动监控主系统motion的移植 5.移植嵌入式we ...
- 在IE,谷歌内核的浏览器里基于VLC利用rtsp查看实时监控(大华,海康)
最近在工作中需要在web页查看大华摄像头的实时画面,在网上找了好多资料也碰了很多坑,不管过程多么痛苦,最后也终于顺利解决了,所以在问题结束后整理下,当自己以后再遇到这类问题可以参考下.第一次写博客,写 ...
- 文件服务器监控用户修改信息,文件服务器监控日志软件
文件服务器监控日志软件 内容精选 换一换 有以下几种现象:将制作好的SD卡插入开发者板并上电后,开发者板LED1与LED2灯状态信息异常.将制作好的SD卡插入开发者板,并通过USB方式连接Ubuntu ...
- 如何在SAP Spartacus里监控用户浏览了某产品明细页面的动作
源代码: export class AppModule {constructor(router: Router, events: EventService) {router.events.pipe(f ...
最新文章
- LeetCode简单题之判断国际象棋棋盘中一个格子的颜色
- 云计算使关系数据库逐渐落伍(转载)
- mysql连接报错:Unknown system variable ‘query_cache_size‘
- PHP on Windows Azure 入门教学系列(2) ——利用SQL Azure做一个简单的访问计数器...
- Layui --- [Mar]给渲染后的表格加CSS样式
- 卷烟厂招工内卷:要求本科以上,但报名的硕士太多
- spring boot + mybatis + layui + shiro后台权限管理系统
- python any all
- RHEL脚本更换YUM源(sohu)
- 【笔记】Altera - Quartus II使用方法——工程创建、Modelsim破解/仿真、Verilog编写、举例(待续)
- Linux常用基本命令详解(三)
- 结构光三维重建(一)条纹结构光三维重建
- BlumNet: Graph Component Detection for Object Skeleton Extraction阅读笔记
- mint-ui message box confirm弹框确认和取消按钮的回调
- js(EcamaScript)
- 用python爬取豆瓣某本书的前n条书评并计算评分(star)的平均值
- 去除表格背景颜色 背景变透明
- /id_xndu5otm2mdq0.html,WEUI应用之JS常用信息提示弹层的封装
- Towards Ultra-Resolution Neural Style Transfer via Thumbnail Instance Normalization
- Java+vue生成报纸排版新闻页面
热门文章
- 哈夫曼编码(Huffman coding)的那些事,(编码技术介绍和程序实现)
- Backbone.js Wine Cellar 教程
- C#生成JSON数据格式的函数
- html5中event获取data和class
- Silverlight中使用Timer的方法
- jvm-内存结构--分类索引
- web form常用控件
- 板邓:wordpress编辑器发布文章自动首行缩进
- C++ 类型转换操作与操作符重载 operator type() 与 type operator()
- 8. vue 的生命周期