页面埋点和统计

需求背景

前端页面的展示和点击经常需要统计数据,所以在前端页面中就需要记录用户点击、浏览等的数据,通过请求的方式,上传到服务器,服务器再通过计算,统计出数据。还有些需求是需要用户操作页面,滑动到某一位置时,再进行打点统计。

实现

通过对图片的加载,将需要上报的参数通过image的src进行请求,绑定图片onload事件,发出请求。

代码实现

打点上报代码:

/**
 * wapfelog
 *
 * @class
 */
function WapFelog() {
}
var wapfelogMap = this.wapfelogMap = {};
WapFelog.prototype = {
    constructor: WapFelog,
    log: function (src) {
        var t = new Image();
        var n = 'wap_log_' + Math.floor(Math.random() * 2147483648).toString(36);
        wapfelogMap[n] = t;
        t.onload = t.onerror = t.onabort = function () {
            // 清空事件,因为播放gif的话会多次触发onload事件
            t.onload = t.onerror = t.onabort = null;
            wapfelogMap[n] = null;
            // 将t置为null,防止形成闭包,造成内存泄漏
            t = null;
        };
        t.src = src;
    },
    send: function (type, options, bid, actId) {
        var me = this;
        actId = actId || 100000;
        var now = new Date().getTime();
        var ctjUrl = [];
        // 上报统计的域名
        var domain = 'https://xxx.baidu.com';
        options = options || {};

        ctjUrl = ctjUrl.concat([
            'isSync=' + isSync,
            'url=' + encodeURIComponent(location.href),
            't=' + now,
            'refer=' + (document.referrer ? encodeURIComponent(document.referrer) : '')
        ]);
        if (options) {
            for (var i in options) {
                if (!options.hasOwnProperty(i)) {
                    continue;
                }
                ctjUrl.push(i + '=' + encodeURIComponent(options[i]));
            }
        }
        this.log(ctjUrl.join('&'));
    }
};
this.wapfelog = new WapFelog();

滑动到某一位置进行打点,监听onScroll事件,元素滑动到可视区域内时,再进行打点。

function onScroll(e) {
    $.each(config.elView, function (k, v) {
        var $el = $(k);
        $el.each(function () {
            var el = this;
            if (!el || !el.getBoundingClientRect) {
                return;
            }
            // 元素顶端到可见区域顶端的距离
            var top = el.getBoundingClientRect().top;
            // 元素底部端到可见区域顶端的距离
            var bottom = el.getBoundingClientRect().bottom; 
            // 浏览器可见区域高度。
            var se = document.documentElement.clientHeight; 
            var viewed = $(el).data('viewed');
            var viewLogged = $(el).data('viewLogged');
            // once参数控制打点一次or重复浏览重复打点
            if (v.once && viewLogged) {
                return;
            }
            if (top < se && bottom > 0) {
                if (viewed) {
                    return;
                }
                $(el).data({
                    viewed: true,
                    viewLogged: true
                });
                var index = $.isFunction(v.index) ? v.index.apply(el, arguments) : v.index;
                var param = $.isFunction(v.param) ? v.param.apply(el, arguments) : v.param;
                var cfg = $.extend(true, {}, param, {
                    index: index
                });
                wapfelog.send('pv', cfg, 1, v.actId);
            }
            else if (top >= se || bottom <= 0) {
                $(el).data({
                    viewed: false
                });
            }
        });
    });
}
$(document).on('scroll.log', onScroll).trigger('scroll');

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏每天学点Android知识

Flutter版本玩Android(3)——文章详情页

pushXXX表示跳转到下一页面,pop表示跳出当前页面,可以携带参数跳转。具体可以参考路由管理。

16910
来自专栏苏生不惑

上班摸鱼好去处

现在各种资讯网站那么多,微博,知乎,头条,公众号等等,打开一个个APP或网站,一来浪费时间,二来也麻烦,这里推荐一些聚合网站,一个网站聚合这些网站的热榜,不怕再...

9040
来自专栏运维经验分享

下载安装Zabbix 原

(adsbygoogle = window.adsbygoogle || []).push({});

11310
来自专栏腾讯技术工程官方号的专栏

深入理解浏览器原理

? 导语:本文从市面主流的浏览器及相应的内核引擎开始,介绍了Chromium为代表的浏览器架构及Blink内核的功能架构。Chromium为多进程架构,用户从...

44820
来自专栏python爱好部落

Python结合jquery Ajax 的实例

jQuery对Ajax的操作进行了封装。jQuery中.ajax()属于最底层的方法。 先来看一个简单的例子:

29220
来自专栏python前行者

极验验证码破解分析

任何一个网站,如果在登录时网站接入的极验的接口,那么该网站就可以使用极验验证码进行登录,此时极验验证码API就会返回两个极验参数,gt和challenge,这两...

69520
来自专栏每天学点Android知识

Flutter版本玩Android客户端(5)——微信公众号tab点击跳转

在Flutter版本玩Android客户端(4)——知识体系tab点击跳转中,完成了主页面知识体系tab的点击跳转,本文主要完成微信公众号tab的跳转。效果如下...

14210
来自专栏Coco的专栏

Web 字体 font-family 再探秘

该篇文章基本没有太多移动端的字体选择及分析。并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文。

14110
来自专栏草根博客站长Live

说说网站域名备案这个事儿

在站长圈子里说起“备案”这个事儿几乎是哀鸿一片,甚至都可以用“怨声载道”来形容了。备案真的有那么可怕吗?最近,明月给几个站长做服务器代运维的时候发现不少新手站长...

65320
来自专栏苏生不惑

Chrome 浏览器扩展神器油猴

我平常工作最常用的浏览器就是 Chrome 了,Google 出品,值得信赖,用 Chrome 就不得不提浏览器扩展了,有了各种 Chrome 扩展,可以让你浏...

26120

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励