web和electron前端埋点方案之如何接入免费的神策SDK

前言

前端埋点一般用于数据上报（用户行为上报，应用性能上报，应用错误情况上报），从而进行用户行为分析，应用错误分析，产品发展决策等方面

技术选型与决定

我这边领导要求的是免费（或一个月几百块钱的成熟平台）、快速、稳定的实现埋点，那么第一种是找那种免费的平台，未来可能收费，第二种就是去谈收费的平台，但是价格要求要低，经过调研有如下几种情况

• 完全免费的，但是有上报数量限制比如每个月多少条就是上限，超出的要收费。
• 收费的，几千到几万不等，比如神策，成熟好用，但是首月3w，次月开始5w小公司成本耗不起，也不需要那么大而全面的统计分析
• 部分收费，部分免费的，这种是有限制的，有的好用的收费，不好用的功能免费，食之无味，弃之可惜

直到了解到，神策提供免费的前端埋点sdk，但是需要自己去做后端统计分析，发现这一方案挺适合前端的，主要是免费、快速、方案成熟稳定，唯一不好的就是后端需要自己去做数据加工统计。同时这个sdk还支持本地缓存发送失败的数据，等有网络了再进行补发，大概率的保证了数据的准确性完整性。

sdk如何接入

首先我们要准备引入神策的sdk，有两种方式，一种是通过cdn直接引入，一种是通过npm、yan等进行安装。 个人理解是cdn引入的不参与打包，npm的方式会进行打包压缩,我这边使用npm安装这个sdk。

npm i sa-sdk-javascript -d

sdk如何初始化

ps:这个是存量vue2项目的，vue3项目也类似

let sensors = require('sa-sdk-javascript')
sensors.init({
  server_url: 'http://xxxxx',//上报链接
  show_log: true,//是否在控制台打印埋点日志
  is_track_single_page: true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
  use_client_time: true,
  send_type: 'beacon',//上报方式
  batch_send: {
    datasend_timeout: 6000, //一次請求超過多少毫秒的話自動取消，防止請求無回應。
    send_interval: 6000, //間隔多少毫秒發一次數據。
    storage_length: 200, // 存储 localStorage 条数最大值，默认：200 。
    one_send_max_length: 6 //一次請求最大傳送幾條數據，防止數據太大
  },// 也可设置成batch_send:true
  heatmap: {
    //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
    clickmap: 'not_collect',
    //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
    scroll_notice_map: 'not_collect',
    //其他元素需要支持点击采集（默认采集 a、button、input 、textarea ）
    // collect_tags: {
    //   div: true,
    //   li: true,
    //   img: true
    // }
  },
  // trackOptions: {
  //   autoTrack: true, // 是否开启自动跟踪
  //   autoTrackOptions: {
  //     enablePerformanceTracking: true, // 是否开启性能跟踪
  //     enableExceptionTracking: true, // 是否开启异常跟踪
  //     enableConsoleTracking: true // 是否开启控制台输出跟踪
  //   },
  //   performanceOptions: {
  //     enableResourceTiming: true, // 是否开启资源加载时间跟踪
  //     enableNavigationTiming: true // 是否开启导航时间跟踪
  //   },
  //   exceptionOptions: {
  //     enableUncaughtExceptionTracking: true, // 是否开启未捕获异常跟踪
  //     enableCaughtExceptionTracking: true // 是否开启已捕获异常跟踪
  //   },
  //   consoleOptions: {
  //     enableConsoleLogging: true, // 是否开启控制台日志记录
  //     enableConsoleErrors: true // 是否开启控制台错误记录
  //   }
  // },
  // flushOptions: {
  //   enableAutoFlush: true, // 是否开启自动刷新
  //   flushInterval: 10000, // 自动刷新间隔（毫秒）
  //   flushEventCountThreshold: 50 // 批量发送的数据量阈值
  // }
});
sensors.quick('autoTrack'); //用于采集 $pageview 事件。
Vue.prototype.$trackEmit = (name, params) => {
  // 注册公共属性
  sensors.registerPage({
    publicParams: {
      userID: store.getters?.userInfo?.b2bCode || store.getters?.userInfo?.shopCode,// 用户的b2bCode 也就是shopCode
      userCompany: store.getters.userInfo?.shopName || '',
      referrer: document.referrer,//域名路由
      clickTimestamp: new Date(),//上报时间
    }
  });
  sensors.track(name, { ...params })
}
// 全局错误处理方法
Vue.config.errorHandler = function (err, vm, info) {
  Vue.prototype.$trackEmit('error', {
    err: String(err),
    info: info,
  })
};

// 捕获未处理的Promise异常
window.addEventListener('unhandledrejection', (event) => {
  Vue.prototype.$trackEmit('error', {
    err: event.reason,
  })
});

加密与解密

神策上报的数据会加密成base64上报，如果需要解密可以使用

console.log('1111', decodeURIComponent(encodeURIComponent(Buffer.from(decodeURIComponent(base64String), 'base64').toString())));

js事件上报

this.$trackEmit('LoginFailed',{
    loginTime:new Date(),//登录时间
    loginAcctID:this.accountForm.b2bAccount,//登录账号
    userCode:this.accountForm.userName,//登录账号
    status:'登录失败',
    resDesc:error.msg || error.message,//原因
    desc:'账号登录'
})

结果

有公司敏感信息的我做了屏蔽，看看就好

总结

神策埋点还有自动埋点、曝光埋点、热点图等功能，我们这边暂时不需要就没开启，整体来说前端借用现有工具快速开发出了埋点，剩下的就是后端的事情了，相对完美的完成了领导的要求、免费、快速接入、好用稳定。