关闭

关于网页埋统计代码的一些总结

1885人阅读 评论(1) 收藏 举报
分类:

埋点样例

http://xxx.xxxxx.com/dog.gif?__hlt=www.xxxx.com&__ppp=&__had=%7B%22eventid%22%3A6912%2C%22topicid%22%3A1%2C%22type%22%3A%22emidas_activity%22%2C%22reqid%22%3A%221480478515383_ZADVG9%22%2C%22module%22%3A%22emidas_activity_close%22%2C%22source%22%3A%22%22%2C%22kid%22%3A0%2C%22note%22%3A%22%22%2C%22promoid%22%3A%22814ac22a-2c27-9106-86c4-e1cdb0a27cfb%22%2C%22latitude%22%3A%22%22%2C%22longtitude%22%3A%22%22%2C%22version%22%3A%22%22%7D&force=1480478520388&__hsr=1600x900&__hsc=24bit&__hlh=http%3A%2F%2Fevent.meituan.com%2Fmidas%2F1activities%2Fa6912RpzqEWEp1RKI%2Findex.html&__mv=%7C%7C0%7C0


背景:

一个网站上线,开发者除了保证网站功能正常,体验优好之外,还有一项重要的工作是数据收集,通过收集用户的行为数据可以帮助了解网站的功能是否满足用户的需求,导流方式是否有效,新功能上线后是否效果是否达到设计初衷,根据数据指引有效优化产品体验以及发现新的产品方向是产品经理的必备技能,而如何采集准确并且足够的网站数据则应该是开发者的责任.在大数据处理能力越来越强下,以及机器学习等依赖数据哺育的工具进化下,采集足够多的数据往往是网站向着良性方向进化的必备条件;

工具:

网站的数据采集有很多现成的工具,如google Analytics百度统计友盟+等,往往通过在页面上接入js SDK代码,如下图所示

而在实际采集过程中,数据是如何传递过去的呢,我们随便打开一个埋有百度统计的网站, 打开chrome的开发者工具,勾选Preserve log可以发现在页面点击一个链接或者做一些其他操作,在Networking tab下可以看到hm.gif的网络请求, 这里由于统计的数据发送涉及到第三方网址,涉及跨域问题,而图片请求天然是跨域的,所以业界的通用做法是构造一个空的gif用于向第三方网站, 而真正需要统计的参数往往是通过url进行传递,

如图所示的url 是http://hm.baidu.com/hm.gif?cc=0&ck=1&cl=24-bit&ds=1920x1200&ep=%5B%7Bx%3A-109%2Cy%3A1691%2Ct%3Aa%2Cu%3Ahttp%253A%252F%252Fwww.tmsf.com%252Finfo%252Fnews_newsinfo_330386914_33_1.htm%7D%5D&et=2&fl=23.0&ja=0&ln=zh-CN&lo=0<=1475204293&nv=0&rnd=1043816232&si=bbb8b9db5fbc7576fd868d7931c80ee1&st=4&su=http%3A%2F%2Fwww.tmsf.com%2F&v=1.1.29&lv=3

通过查看分析具体的请求,和业务相关的请求都跟在url里的?之后以'&a=111'对不同的参数进行传递

这些数据通过统计服务处理后在服务端整合显示的是如下图所示:

重要指标:

pv(页面展现数量), uv(访问用户数), 跳出率(在进入页面后未访问其他页面,未做任何操作后在一定时间内离开该页面的比例), 平均访问时长,访问用户的用户属性(用户特征,使用设备, 地域分布),访问来源(访问网站页面前的上一个页面,往往是导流效果的来源分析),通过以上数据的展示和分析可以得到一个网站的基本访问情况分析.


数据采集:

那么如果有些数据这些第三方服务提供方没有提供,或者不想自己网站的数据被第三方掌握,就必须自己搭建一套数据采集平台,这里来说说如果自己搭建的话在前端页面上怎么进行埋点;

首先在本质上我们还是应该创建一个最为基本的发送统计的发送函数,用于创建img,发送统计请求到数据采集平台;

function sendUrl(url) {
    let img = new Image();  // 创建一个img对象
    let key = 'project_log_' // 为本次数据请求创建一个唯一id
        + Math.floor(Math.random() * 2147483648).toString(36); 

    window[key] = img;   // 用一个数组维护img对象

    img.onload = img.onerror = img.onabort = function () {
        img.onload = img.onerror = img.onabort = null;  // 清除img元素
        window[key] = null;
        img = null;  
    };
    img.src = url;  // img对象赋值url后自动发送请求,无需插入到页面元素中去
}

然后定义一套数据格式规则,如:1.gif?q=xxx&fr=xxx&refer=xxx&p=xxxx&xxxxx

q表示页面搜索词; fr表示页面的上游页面时什么, refer是指从来源页面, p表示事件类型等;

常用指标的统计方法:

访问时长:

var st = new Date().getTime();  // 在页面加载运行js时记录当前时间

$(window).on('beforeunload', function () {
    var et = new Date().getTime();
    var stayTime = et - st;
    
}); // 在页面要unload触发'beforeunload'事件时进行时间差计算得到访问时长

聚焦时间:

与访问时间不同,由于页面可以通过tab切换导致虽然页面没有unload但实际处于失去焦点状态, 因此需要订阅focusIn与focusOut两个事件,在focusIn时开始计时, 在focusOut时停止计时,在页面unload时将focus时间进行累加得到聚焦时间;

Pv:

传统意义上每次页面刷新代表着一次新的pv, 也就是每次统计js执行时都+1, 而现在页面很多都用到了ajax技术来进行无刷新获取展现页面来替代翻页,如瀑布流页面通过下来加载新的页面,这时候页面不重新刷新,因此可以在ajax请求接口处进行埋点进行pv累加;

单项PV:

页面上部分元素有单独统计pv的需要,有些页面元素不是页面展现都展现,或者需要统计类似于某一广告的展现次数,这种需要需要在url里单独定义参数来标识;

事件:

以click事件为例,类似于绑定事件的过程,在click响应函数中获取元素的对象, 如下所示, tracker是定义的发送埋点数据的模块,在对应事件发生时,除了定义了事件类型之外,一般还需要获取发生事件元素的一些特征参数,如:元素名,元素包含的text, id等;

$('.topic-list a').on('click', function () {
        if (!$(this).data('tid')) {
             return;
        }
        tracker.send({
              'p': tracker.events.list.click.topic,
              'rec_topic_title': $(this).text(),
              'rec_topic_id': $(this).data('tid')
        });
});

hover这一事件需要监听元素从mouseEnter事件到mouseOut事件触发时间大于一定时间,比如500ms可以视作一次hover触发.

0
0
查看评论

vue单页应用项目加入百度统计代码

在网上各种找不到vue项目加入百度统计的代码与实现: 自己探索出了一套加入百度统计的办法,首先要明确一点,因为vue是单页应用,所以直接加百度统计代码到index.html的header里面是并没有什么用的,页面只加载一次。 首先来看一下百度统计的官方API,_trackPageview ...
  • qq_38355456
  • qq_38355456
  • 2017-08-28 20:31
  • 2863

VueJs百度统计插件

vue-ba vuejs 百度统计埋点插件 转载https://minlingchao1.github.io/2017/07/13/VueJs%E7%99%BE%E5%BA%A6%E7%BB%9F%E8%AE%A1%E6%8F%92%E4%BB%B6/ 项目参考:https://githu...
  • sinat_17775997
  • sinat_17775997
  • 2017-09-08 09:22
  • 1729

百度统计的JS脚本原理分析

<!-- p {text-indent:2em} --> 首先,百度统计会要求我们在要统计的页面中嵌入一段js语句,类似如下: var _bdhmProtocol = ((“https:” == document.location.protocol) ?...
  • iqzq123
  • iqzq123
  • 2013-05-02 21:03
  • 15550

前端埋点你知多少

和大数据的联系--埋点 正文 前言 很多人还没搞清楚PC互联网的时候,移动互联来了;我们还没搞清移动互联的时候,大数据时代又来了。伴随大数据时代的到来,我们生活中产生的数据呈现出巨大的增长,互联网每2天产生的数据相当于2003年之前产生的数据一样多。 马云说过,大数据就是...
  • u012028371
  • u012028371
  • 2017-02-20 16:36
  • 2598

代码埋点

网站统计的基本流程首先,用户的行为会触发浏览器对被统计页面的一个http请求,这里姑且先认为行为就是打开网页。当网页被打开,页面中的埋点javascript片段会被执行,用过相关工具的朋友应该知道,一般网站统计工具都会要求用户在网页中加入一小段javascript代码,这个代码片段一般会动态创建一个...
  • u012967849
  • u012967849
  • 2017-06-08 17:45
  • 1313

百度统计之百度代码引用

这几天研究了一下百度统计,现在和大家分享一下浅浅的理解: 新版访问分析代码(异步加载)  (请将代码添加至网站全部页面的标签前。) var _hmt = _hmt || []; (function() {   var hm = document.createEleme...
  • u011021006
  • u011021006
  • 2015-10-13 15:32
  • 764

网站统计中的数据收集原理及实现-埋点统计

网站数据统计分析工具是网站站长和运营人员经常使用的一种工具,比较常用的有谷歌分析、百度统计和腾讯分析等等。所有这些统计分析工具的第一步都是网站访问数据的收集。目前主流的数据收集方式基本都是基于javascript的。本文将简要分析这种数据收集的原理,并一步一步实际搭建一个实际的数据收集系统。 ...
  • u013279509
  • u013279509
  • 2016-12-05 12:07
  • 9255

js统计网站访问次数的代码

var caution = false function setCookie(name, value, expires, path, domain, secure) { var curCookie = name + "=" + escape(value) + ((expir...
  • njbayyfk
  • njbayyfk
  • 2014-09-16 09:13
  • 258

浅谈服务埋点(2)——Metrics

还是那个话题:为什么要做服务埋点?  就像我们操作系统里面的资源管理器一样,如果能够实时或者准实时的看到整个系统耗费的CPU,内存等资源,对我们快速对系统做出响应,以及优化很重要。同样,对于对外提供接口或者服务的WebService的监控,比如在哪个地方,哪台机器上,花了多少CPU,多少内存,每一个...
  • zyt425916200
  • zyt425916200
  • 2017-01-13 01:20
  • 3798

埋点统计_网站统计中的数据收集原理及实现

[摘要:网站数据统计剖析对象是网站站少战运营职员常常应用的一种对象,比拟经常使用的有谷歌剖析、百度统计战腾讯剖析等等。全部那些统计剖析对象的第一步皆是网站拜访数据的网络。现在] 网站数据统计分析工具是网站站长和运营人员经常使用的一种工具,比较常用的有谷歌分析、百度统计和腾讯分析等等。所...
  • qq_26981333
  • qq_26981333
  • 2016-01-09 22:42
  • 3398
    个人资料
    • 访问:9402889次
    • 积分:78859
    • 等级:
    • 排名:第21名
    • 原创:264篇
    • 转载:2895篇
    • 译文:3篇
    • 评论:803条
    文章分类
    最新评论