vue 项目中神策埋点

如何配置神策埋点信息？

1.安装依赖

npm install --save sa-sdk-javascript

2.项目配置

在 utils 文件夹下新建 sensors.js，配置单页应用的固定代码，（非单页应用不需要加上配置对象： is_track_single_page: true）。

import sensors from 'sa-sdk-javascript'sensors.init({ // 神策系统配置server_url: 'http://shence.ap-ec.cn:8106/debug', // 数据接收地址is_track_single_page: true, // 单页应用页面浏览事件采集(url改变就触发)use_app_track: true,show_log: false, // 控制台显示数据开关heatmap: { // 热图设置 default开启 not_collect关闭（详细配置解释看官方文档）clickmap: 'default', // 点击热图，收集点击事件scroll_notice_map: 'default', // 视区热图，收集页面区域停留时间}
})sensors.quick('autoTrack') // 首次触发页面加载事件 $pageview
export default sensors

3.全局注册神策埋点

在 main.js 文件中，将神策埋点信息挂载到 vue 实例下，操作如下：

import sensors from '@/utils/sensors.js'
Vue.prototype.$sensors = sensors

如何埋点？

1.自动采集事件埋点

主要用于主动触发页面浏览事件，一般只在页面配置后调用一次即可。

sensors.quick('autoTrack')

2. 事件埋点

事件名+传递参数（必须是对象）+回调函数

this.$sensors.track('ViewSupplyChainDetails'[, param][,callback])

3.公共属性埋点

const param = {platform_type: 'WEB', // 平台类型：App，H5，Webapp_name: '沐甜商城网站', // 应用名称product_line: '白糖',
}
sensors.registerPage(param) // 设置公共属性

vue 项目中神策埋点相关推荐

vue项目接入神策，数据埋点
一.数据埋点的意义所谓埋点就是在应用中特定的流程收集一些信息,用来跟踪应用使用的情况,记录用户在系统中的操作行为轨迹,后续用来进一步优化产品或提供运营的数据支撑,包括访问数.访客数.停留时长.页面浏 ...
如何在vue项目中实现前端埋点？埋点用户操作之Vue实现
埋点又称为事件追踪,目的是收集用户行为数据,例如用户点击了什么按钮,浏览了哪些页面,浏览了多长时间.从哪个页面进入的当前页(转化率)等. 刨除node等实现方式,对于前端来说, 保存这些操作或者说记录 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...

vue 项目中神策埋点

如何配置神策埋点信息？

vue 项目中神策埋点相关推荐

最新文章

热门文章