埋点技术哪家强？

重要指标:

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触发.

js页面埋点技术：

     页面埋点的作用，其实就是用于流量分析。而流量的意思，包含了很多：页面浏览数(PV)、独立访问者数量(UV)、IP、页面停留时间、页面操作时间、页面访问次数、按钮点击次数、文件下载次数等。而流量分析又有什么用处：

1、提高网站的转化率

         根据页面埋点可得到一些重要信息，它告诉你用户对网站的反应，以及如何提高网站流量、改进网站性能，了解用户访问网站的行为，为更好地满足用户需求提供支持。 

2、反应用户黏度

         即使网站吸引了很多用户访问，但是通过流量分析发现，用户停留的时间非常短，重复访问用户不多，用户平均浏览的页面也少，这样的网站用户黏度不够，有流量但是没有忠实的用户，一旦有其它可替代网站，用户随时可能流失。这样的网站，如果不采取有效的运营措施，很难有长期发展的后劲。

3、为网站内容管理和网站的产品策划提供方向

         通过流量分析，可以挖掘出整个网站哪个频道最有人气，频道之间的流量比例是多少，每个页面的流量是多少，哪个页面最受欢迎，每个页面中具体的哪个栏目点击 量最高，这样通过对频道、栏目、页面的具体流量分析和对比，可以挖掘出用户的需求，发现用户最关心什么内容，这对评估网站频道、内容、页面的价值有重要的 参考作用，也对网站内容下一步的优化有直接的参考意义。

 

埋点脚本：

借助新浪IP地址库，显示本地城市名称：

  1. <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" type="text/ecmascript"></script>    
  2. remote_ip_info.country  
  3. remote_ip_info.province  
  4. remote_ip_info.city  

 

获取客户端IP：

  1. <script type="text/javascript" src="http://www.coding123.net/getip.ashx?js=1"></script>  

 

获取用户的访问开始时间、访问结束时间、以及用户与网站的交互时间（当用户在网页无操作时间超过30秒，理解为离开网页），其中无操作包括：鼠标点击、移动、滑轮无操作，键盘无按键操作。

  1. var start = new Date();  
  2. var strStart = start.getFullYear()+"-"+(start.getMonth()+1)+"-"+start.getDate()+" "+  
  3.                 start.getHours()+":"+start.getMinutes()+":"+start.getSeconds();  
  4. var len = 0;  
  5. var end;  
  6. var status = "in";  
  7. var second = 30;  
  8. function revive(){  
  9.     if(status == "out"){  
  10.         start = new Date();  
  11.         status = "in";  
  12.     }  
  13.     second = 30;  
  14. }  
  15. window.setInterval(function(){  
  16.     second -= 1;  
  17.     if(0 == second){  
  18.         end = new Date();  
  19.         len += (end.getTime() - start.getTime())/1000;  
  20.         status = "out";  
  21.     }  
  22. },1000);  
  23. $(‘body‘).click(function(){  
  24.     revive();  
  25. });  
  26. $(‘body‘).mousedown(function(){  
  27.     revive();  
  28. });  
  29. $(‘body‘).mouseup(function(){  
  30.     revive();  
  31. });  
  32. $(‘body‘).mousemove(function(){  
  33.     revive();  
  34. });  
  35. //(Firefox)  
  36. $(‘body‘).bind(‘DOMMouseScroll‘, function() {  
  37.     revive();  
  38. });  
  39. //(IE,Google)  
  40. $(‘body‘).bind(‘mousewheel‘,function(){  
  41.     revive();  
  42. });  
  43. $(‘body‘).keydown(function(e){  
  44.     revive();  
  45. });   
  46. $(‘body‘).keyup(function(e){  
  47.     revive();  
  48. });   
  49. $(‘body‘).keypress(function(e){  
  50.     revive();  
  51. });   
  52. window.onbeforeunload = function(){  
  53.    end = new Date();  
  54.    var strEnd = end.getFullYear()+"-"+(end.getMonth()+1)+"-"+end.getDate()+" "+  
  55.                 end.getHours()+":"+end.getMinutes()+":"+end.getSeconds();  
  56.    len += (end.getTime() - start.getTime())/1000;   
  57.    var img = new Image();  
  58.    img.src = contextPath + "behavior?stayTime=" + len + "&strStart" + strStart + "&lastDate=" + strEnd;  
  59. };  

 

获取点击按钮：

  1. <a onclick="return getid(this.id)"> 按钮</a>  
  2. function getid(id) {  
  3.     var img = new Image();  
  4.     img.src = contextPath + "button?id=" + id;  
  5. }  

 

获取搜索来源：

判断从哪个搜索工具找到你的网站，document.referrer(上级URL)，这个可以获取到你上级页面，如果看到上级URL里面包含baidu，就可以粗略的判断是从百度访问的页面。

 

流量统计系统一般包括以下情况分析：

1、按在线情况分析

　　在线情况分析分别记录在线用户的活动信息，包括：来访时间、访客地域、来路页面、当前停留页面等，这些功能对企业实时掌握自身网站流量有很大的帮助。

2、按时段分析

　　时段分析提供网站任意时间内的流量变化情况.或者某一段时间到某一段时间的流量变化，比如小时段分布，日访问量分布，对于企业了解用户浏览网页的的时间段有一个很好的分析。

3、按来源分析

         来源分析提供来路域名带来的来访次数、IP、独立访客、新访客、新访客浏览次数、站内总浏览次数等数据。这个数据可以直接让企业了解推广成效的来路，从而分析出那些网站投放的广告效果更明显。

　　以上这些网站分析技巧，为网络营销人员从不同方面分析网站运营的效果提供了方便，不过，这些基本统计信息本身所能反映的问题并不全面，有些隐性问题可能并非反映出来。对一些问题的深度分析，则需要考虑更多的因素，也可能涉及到更多的专业分析手段。

 

posted @ 2017-11-28 18:36  用什么暖你一千岁！  阅读(711)  评论(0)    收藏  举报