一、数据埋点的意义：

所谓埋点就是在应用中特定的流程收集一些信息，用来跟踪应用使用的状况，后续用来进一步优化产品或是提供运营的数据支撑，包括访问数（Visits），访客数（Visitor），停留时长（Time On Site），页面浏览数（Page Views）和跳出率（Bounce Rate）。这样的信息收集可以大致分为两种：页面统计（track this virtual page view），统计操作行为（track this button by an event）。

二、神策埋点的资料：入口

三、具体操作

1、安装前端需要的js的sdk包

（1）cdn地址：

//cdn.jsdelivr.net/npm/sa-sdk-javascript@1.15.26/sensorsdata.min.js

（2）npm安装依赖

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) // 设置公共属性

4.给点击事件加触发埋点，使用vue的自定义指令

/*** 指令：v-saclick* 使用示例：v-saclick="{clickName:'XXX',clickData:{params1:'XXX',params2:'XX'}}"* clickName：埋点函数名* clickData | Object   params当前埋点函数所需参数*/
const saclick = Vue.directive('saclick', {bind: (el, binding) => {el.addEventListener('click', () => {const clickName = binding.value.clickName // 携带的数据const data = binding.value.clickData || {} //接收传参sa.track(clickName, data)})}
})export { preventReClick, saclick }

在这里常用的是第二个和第四个！

到此结束！

vue项目中使用神策进行数据埋点相关推荐

Vue项目中v-for无法渲染数据
在Vue项目中,我们想要实现下面的布局效果后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...
Vue项目中使用props传递数据并允许子组件修改的方案
在项目中遇到了一个相关需求: 一个页面中为了能够使代码更加简洁和易于查看,将其分成了多个功能模块.此时多个功能模块都需要使用共同的一组数据进行展现或对其进行修改.此时考虑到Vue项目中的数据通信方式: ...
vue项目中使用mock模拟数据
一.先在vue项目中安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save ...
VUE项目中如何实现表格数据的懒加载
vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页处理如果不想分页 ...
Vue项目中前端请求后端数据的两种方式
1.JS方式,使用fetch函数,较底层 //JS方式请求分页数据 fetch("http://localhost:9090/user/page?pageNum=" +this.p ...
如何在vue项目中实现前端埋点？埋点用户操作之Vue实现
埋点又称为事件追踪,目的是收集用户行为数据,例如用户点击了什么按钮,浏览了哪些页面,浏览了多长时间.从哪个页面进入的当前页(转化率)等. 刨除node等实现方式,对于前端来说, 保存这些操作或者说记录 ...
Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
methods vue过滤器和_数据动态过滤技巧在 Vue 项目中的实践
这个问题是在下在做一个 Vue 项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -.-),过程中会涉及到一些Vue源码的概念比如 $mount. rende ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...

vue项目中使用神策进行数据埋点

前言：

在vue种使用神策进行数据埋点

一、数据埋点的意义：

二、神策埋点的资料：入口

三、具体操作

1、安装前端需要的js的sdk包

（1）cdn地址：

（2）npm安装依赖

2、项目配置

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

3、全局注册神策埋点

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

如何埋点？

1.自动采集事件埋点

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

2. 事件埋点（页面上事件用这个）

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

3.公共属性埋点

4.给点击事件加触发埋点，使用vue的自定义指令

在这里常用的是第二个和第四个！

到此结束！

vue项目中使用神策进行数据埋点相关推荐

最新文章

热门文章