前端埋点解决方案

一、前言：基于神策数据的前端埋点解决方案 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,
});