JavaScript SDK 快速接入

最后更新于：2018-10-26 09:12:34

在使用前，请先阅读数据模型的介绍。

1. 事件设计表（示例）

事件设计表一般是由神策分析师和你们对接的同事，针对具体业务需求一起梳理的需要做埋点的 Excel 表。

事件和用户属性设计
事件表			用户表
事件名	事件属性	数据类型	用户属性	数据类型
搜索事件( search )	搜索关键词( searchKeyWorld )	字符串（String）	邮箱( email )	字符串（String）

2. 引入 SDK

需要采集数据的页面都需要引入这段代码，来实现全埋点的功能，默认采集三个事件即 $pageview（页面浏览事件）、$WebClick（元素点击事件，点击图功能）、$WebStay（视区停留事件，触达图）。贴异步加载的代码片段。

<script>
(function(para) {
  var p = para.sdk_url, n = para.name, w = window, d = document, s = 'script',x = null,y = null;
  w['sensorsDataAnalytic201505'] = n;
  w[n] = w[n] || function(a) {return function() {(w[n]._q = w[n]._q || []).push([a, arguments]);}};
  var ifs = ['track','quick','register','registerPage','registerOnce','clearAllRegister','trackSignup', 'trackAbtest', 'setProfile','setOnceProfile','appendProfile', 'incrementProfile', 'deleteProfile', 'unsetProfile', 'identify','login','logout','trackLink','clearAllRegister'];
  for (var i = 0; i < ifs.length; i++) {
    w[n][ifs[i]] = w[n].call(null, ifs[i]);
  }
  if (!w[n]._t) {
    x = d.createElement(s), y = d.getElementsByTagName(s)[0];
    x.async = 1;
    x.src = p;
    y.parentNode.insertBefore(x, y);
    w[n].para = para;
  }
})({
      sdk_url: '在 github 下载新版本的 sensorsdata.min.js ',
      name: 'sa',
      server_url:'数据接收地址',
      heatmap: {
         //是否开启点击图，默认 default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭
         clickmap:'default',
         //是否开启触达注意力图，默认 default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭
         scroll_notice_map:'not_collect'
      }
    });
    sa.quick('autoTrack'); //神策系统必须是1.4最新版及以上
</script>

将以上代码放入 html 的 head 里面,一般最好放在稍微靠前点的位置。您在 sa.track() 时，只要保证写在上面引用的代码的下面就可以，不需要等 window.onload 后再执行。

从 npm 获取， npm install sa-sdk-javascript , 这里获取后建议使用 webpack 等工具来打包。这里获取到的是最新版本。贴初始化代码片段。

import sa from'sa-sdk-javascript';
sa.init({
  server_url: '...',
  heatmap: {
     //是否开启点击图，默认 default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭
     clickmap:'default',
     //是否开启触达注意力图，默认 default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭
     scroll_notice_map:'not_collect'
  }
  .......
});
sa.login(user_id);
sa.quick('autoTrack');

var sa = require('sensorsdata.min.js');
sa.init({
  server_url: '...',
  heatmap: {
     //是否开启点击图，默认 default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭
     clickmap:'default',
     //是否开启触达注意力图，默认 default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭
     scroll_notice_map:'not_collect'
  }
  .......
});
sa.login(user_id);
sa.quick('autoTrack');

用 webpack 打包的话，既可以使用 amd 的方式，也可以使用 node module 的写法，最终都能被 webpack 打包成功。但是因为 SDK 需要浏览器环境，所以不能直接在 nodejs 中使用，如果需要可以使用我们的 Node SDK 。

2.1 数据接收地址 server_url 获取方式

3. 埋点示例

3.1 事件 Event

<input type="text" placeholder="输入搜索关键词" id="keyWord"/>
<button type="button" id="search">搜索</button>
<script>
document.getElementById("search").onclick = function(){
        //页面本身的搜索功能外加一个神策的自定义方法
        sa.track("search",{
            searchKeyWord:$('#keyWord').val()
        });
}
</script>

3.2 用户 Profile

sa.setProfile({email:'xxx@xx'});

3.3 匿名 ID 和真实 ID 关联

通过调用 login 方法，传入对应的用户 ID 之后，匿名 ID 与对应的用户 ID 进行关联，关联成功之后可视为同一个用户。调用时机：注册成功、登录成功、初始化SDK(如果能获取到用户ID )、都需要调用 login 方法传入用户注册 ID。

sa.login('userID');

4. 埋点示例数据校验

浏览器控制台查看发送是否正常并且有 log 日志。

神策分析平台埋点管理查看数据接收是否正常。 Debug 及导入中的数据埋点管理已接收，已校验，已入库，报错

神策分析模块查看具体的数据。