2.全局引入使用sensor
3.点击按钮进行埋点
4.在进入页面的时候会自动触发一个'pageView'事件，点击按钮会触发'webClick'事件
参考文档
javascriptwu_wen_cai原创
关注
4点赞·2951人阅读
第一步：
使用 神策 插件 npm install sa-sdk-javascript --save
第二步：
在vue项目新建文件（sensors_config.js）// 初始化埋点功能
const sensors = require('sa-sdk-javascript')
sensors.init({
show_log: true,
server_url: '#', // 神策数据接收地址
is_track_single_page: true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
use_client_time: true,
send_type: 'beacon',
heatmap: {
//是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
clickmap: 'not_collect',
//是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
scroll_notice_map: 'not_collect'
}
})
// 注册公共属性
sensors.registerPage({
user_code: '123456789', // 工号
user_name: '张三' // 姓名
})
export default sensors
第三步：
在mian.js进行导入注册
import sensors from './sensors_config'
Vue.prototype.$sensors = sensors
第四步：
在神策元数据管理中
元事件中创建埋点事件（要埋点的事件，例如：点击）
事件属性中创建属性（要传递的参数或者公共属性，例如：点击的页面）
第五步：
在项目中进行点击埋点
<template>
<div>
<el-button @click="ClickBtn">点击</el-button>
</div>
</template>
<script>
export default {
methods: {
ClickBtn() {
this.$sensors.track("cs", {
// 传递的参数
source_page: '首页' // 点击的页面
})
}
}
}
</script>
<style>
</style>
vue项目前端埋点的实现
5下载·0评论
vue 项目中神策埋点
3162阅读·1评论·3点赞
Vue项目埋点方案
138阅读·0评论·0点赞
基于Vue的数据埋点统计
1201阅读·0评论·6点赞
神策埋点测试教程（图文介绍）
43下载·0评论
vue项目中数据埋点
1472阅读·0评论·1点赞
vue前端添加埋点事件
1570阅读·0评论·1点赞
前端埋点实现方案
3271阅读·2评论·8点赞
vue项目进行数据埋点
2344阅读·0评论·0点赞
神策埋点的接入使用方法
5010阅读·2评论·2点赞
uni-App神策数据埋点引入以及使用
580阅读·0评论·0点赞
神策数据埋点实操
1662阅读·2评论·3点赞
vue自定义指令实现前端埋点+重写路由方法监听浏览时间
571阅读·0评论·1点赞
Vue前端神策数据埋点
1550阅读·0评论·1点赞
Vue项目中，webfunny前端埋点部署
646阅读·2评论·3点赞
前端vue自定义指令（directive）实现数据埋点
115阅读·0评论·0点赞
vue自定义指令实现数据埋点
313阅读·0评论·0点赞
去首页
看看更多热门内容
