JavaScript SDK DEMO

最后更新于:2018-08-02 11:42:23

  1. 一个基于 wordpress 的 饭糕网
  2. 下面我们通过神策分析 官网 这个案例,来介绍 Javascript SDK 的使用。

1. 分析统计需求

神策分析官网,是一个企业类网站的展示页,用来展示产品和引导用户使用。对于这种企业类型的网站,我大概列举几个统计需求:

  • 页面访问来源
  • 页面停留时间
  • 在页面上点击了哪些按钮

2. 开始写代码

2.1 引入 SDK

首先在神策分析官网 中引入 SDK 文件,可以参照 Javascript SDK 文档 。在html的head里引入即可。

2.2 统计页面访问来源

当打开神策分析官网首页的时候,我们想知道,用户是从什么地方跳转过来的,或者从哪个渠道过来的。

我们可以通过 document.referrer 来取当前页面是从哪里跳转过来的,也通过自己设定 URL 参数来标记是从哪个渠道过来的,比如是从微信来的 ,例如 ?from=weixin

综上所述,我们可以记录一个首页访问的事件(index_visit)。带有3个属性,页面地址,referrer 来源,参数解析出来的来源。每个属性的key不固定,可以自定义(以下的 pageUrl 等仅供参考)。

  sa.track('index_visit', {
    pageUrl: location.href,  
    referrerUrl: document.referrer,  
    fromUrl: from_url
  });

上面代码就会在每次打开页面时,把数据发送到服务器,然后在神策分析里就可以找到index_visit事件来做数据分析。

2.3 统计页面停留时间

在页面打开时记录一个时间,在页面关闭时,记录一个时间,差值就是页面停留时间
下面,我们可以记录一个首页关闭事件 index_leave,同时记录页面地址,页面停留时间,页面当前滚动位置。

  var saStartTime = new Date(); 
   window.onbeforeunload = function() {  
    var end = new Date();
    var duration = (end.getTime() - saStartTime.getTime()) / 1000;
    sa.track('index_leave', {
      pageUrl: location.href,
      pageStayTime: duration,
      pagePosition: $(window).scrollTop()
    });
  };

上面代码就会在每次关闭页面时,把数据发送到服务器,然后在神策分析里就可以找到 index_leave 事件来做数据分析。

2.4 统计页面上点击了哪些按钮或者链接

如果我们想记录用户在页面上点击了哪些按钮,可以先给这些按钮定义一些标志,同时标记这个按钮的属性。

<button class="sensors-btn" sensors-name="点击邮箱">邮箱</button>
<a class="sensors-btn" sensors-name="点击登录">登录</a>  
$('.sensors-btn').click(function(){
    sa.track('btn_click',{
        name: $(this).attr('sensors-name')
    })
})

上面代码就会在每次点击链接或者按钮时,把数据发送到服务器,然后在神策分析里就可以找到 btn_click 事件来做数据分析。