Vue前端神策数据埋点

集成JS SDK

全埋点

1、从 npm 获取 sdk

 npm install sa-sdk-javascript

2、utils新建sensors.js文件夹，Vue全局挂载

import sensors from 'sa-sdk-javascript';

sensors.init({
  // 神策系统配置
  server_url: 'http://sademo.datasink.sensorsdata.cn/sa?project=VideoWebcastDemo', // 数据接收地址
  is_track_single_page: true, // 单页应用页面浏览事件采集(url改变就触发)
  use_app_track: true,
  show_log: true, // 控制台显示数据开
  heatmap: {
    // 热图设置 default开启 not_collect关闭（详细配置解释看官方文档）
    clickmap: 'default', // 点击热图，收集点击事件
    scroll_notice_map: 'default', // 视区热图，收集页面区域停留时间
  },
});

sensors.quick('autoTrack'); // 首次触发页面加载事件 $pageview
export default sensors;

3、若有用户登录功能，则设置登录。

 this.$sensors.login(res.currentMobile);

公共属性

埋点设计表是根据SDK的公共属性APIsensors.registerPage进行设置的。

eg:自定义平台类型等

// 注册公共属性
sensors.registerPage({
	current_url: location.href,
	referrer: document.referrer
});

代码/自定义事件埋点

sensors.track()来进行设置

// 下面演示一个 div 标签被点击时触发预置的元素点击事件
<div id="submit_order">提交订单</div>

<script type="text/javascript">
$('#submit_order').on('click', function() {
	sensors.quick('trackHeatMap', this, {
		customProp1: 'test1', //如果需要添加自定义属性需要将 SDK 升级到 1.13.7 及以上版本。
		customProp2: 'test2'
	}, function() {
		console.log('callback');
	});
});
</script>