JavaScript SDK DEMO

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

一个基于 wordpress 的饭糕网
下面我们通过神策分析官网这个案例，来介绍 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 事件来做数据分析。