一、前言:基于神策数据的前端埋点解决方案 JavaScript 快速使用 · 神策分析使用手册[预览版]
二、sdk gitlab下载地址
https://github.com/sensorsdata/sa-sdk-javascript/releases
或者npm 安装
npm i sa-sdk-javascript
三、入门
3.1 接入sdk 以及配置 (version 1.17.2),入口文件接入sdk 以及添加配置
<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: 'sensorsdata.min.js',
name: 'sensors',
//数据接收地址
server_url: 'https://report.woodpeckerlog.com/sa?project=production',
//控制台是否显示日志
show_log: false,
send_type: 'beacon',
app_js_bridge: true,
//url改变触发
is_track_single_page: true,
heatmap: {
//是否开启点击图,默认 default 表示开启,自动采集 $WebClick 事件,可以设置 'not_collect' 表示关闭
clickmap:'default',
//是否开启触达注意力图,默认 default 表示开启,自动采集 $WebStay 事件,可以设置 'not_collect' 表示关闭
scroll_notice_map:'not_collect'
}
//配置打通 App 与 H5 的参数
use_app_track: true,
use_client_time: true,
});
// 首次触发页面加载事件
sensors.quick('autoTrack'); //神策系统必须是1.4最新版及以上
</script>
3.2 npm 使用方式
import sensors from'sa-sdk-javascript';
sensors.init({
server_url: '...',
heatmap: {
//是否开启点击图,默认 default 表示开启,自动采集 $WebClick 事件,可以设置 'not_collect' 表示关闭
//需要 JSSDK 版本号大于 1.7
clickmap:'default',
//是否开启触达注意力图,默认 default 表示开启,自动采集 $WebStay 事件,可以设置 'not_collect' 表示关闭
//需要 JSSDK 版本号大于 1.9.1
scroll_notice_map:'not_collect'
}
.......
});
sensors.login(user_id);
sensors.quick('autoTrack');
四、常用api
4.1 公共属性注册
sensors.registerPage({
isLogin:xxxxxx
})
4.2 自定义事件使用
sensors.track('自定义事件名称', {
params1: xxx,
params2: xxx,
});