前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >页面埋点和统计

页面埋点和统计

作者头像
Tiffany_c4df
发布2019-09-04 16:19:32
2.4K0
发布2019-09-04 16:19:32
举报
文章被收录于专栏:前端小课堂前端小课堂

需求背景

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

实现

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

代码实现

打点上报代码:

代码语言:javascript
复制

/**
 * 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事件,元素滑动到可视区域内时,再进行打点。

代码语言:javascript
复制
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');
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-05-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求背景
  • 实现
  • 代码实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档