Vue项目埋点方案

原文地址:Vue项目埋点方案 - BIGTREE

前端埋点主要分为以下三类:
代码埋点:在需要埋点的地方添加埋点逻辑代码或自定义属性实现。
可视化埋点:使用可视化的工具进行埋点,即无痕埋点。前端页面加载时根据埋点配置,自动调用接口上传埋点数据。
无埋点:前端自动采集全部事件并上报埋点数据。

可视化埋点和无埋点方案前期投入较大,故在此考虑使用代码埋点的方案。

代码埋点又分为两类:
命令式埋点:在需要埋点的地方添加埋点逻辑代码。缺点:工作量大,且会侵入业务逻辑代码。
声明式埋点:在需要埋点的地方新增自定义属性,通过识别自定义属性绑定事件,采集并上传埋点数据;

故最终埋点方案:使用Vue自定义命令实现声明式代码埋点

以下为Vue项目具体埋点步骤:

第一步:新增track.js,通过自定义属性track绑定点击事件

import Vue from 'vue'
import { eventLog } from '@/api/bpl/event'

// 埋点指令
let track = Vue.directive('track', {
    bind: (el, binding, vnode) => {
        el.addEventListener('click', () => {
            const data = binding.value;

            // requ
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值