Vue前端神策数据埋点
集成JS SDK全埋点1、从 npm 获取 sdknpm install sa-sdk-javascript2、utils新建sensors.js文件夹,Vue全局挂载import sensors from 'sa-sdk-javascript';sensors.init({// 神策系统配置server_url: 'http://sademo.datasink.sensorsdata.cn/sa
·
集成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>
更多推荐
已为社区贡献12条内容
所有评论(0)