Vue项目代码埋点

泛型流星
• 阅读 8705

主流埋点方案

目前主流的埋点方案包括

  1. 代码埋点
  2. 可视化埋点
  3. 无埋点
一、代码埋点

​ 在需要埋点的节点调用接口,携带数据上传。如百度统计等;

缺点

​ 工作量较大,每一个组件的埋点都需要添加相应的代码,入侵业务代码,增加项目复杂度。

二、可视化埋点

​ 通过可视化交互的手段,代替代码埋点。将业务代码和埋点代码分离,提供一个可视化交互的页面,输入为业务代码,通过这个可视化系统,可以在业务代码中自定义的增加埋点事件等等,最后输出的代码耦合了业务代码和埋点代码。

​ 可视化埋点听起来比较高大上,实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。

缺点:

​ 业务属性数据,例如,订单号、金额、商品数据量等,通常要调用后台的接口,可视化埋点在这方面的支持有限;

​ 需要借助第三方工具实现。

三、无埋点
无埋点并不是说不需要埋点,而是全部埋点,前端的任意一个事件都被绑定一个标识,所有的事件都别记录下来。通过定期上传记录文件,配合文件解析,解析出来我们想要的数据,并生成可视化报告供专业人员分析因此实现“无埋点”统计。

缺点

​ 无法灵活的定制各个事件所需要上传的数据

​ 无埋点采集全量数据,给数据传输和服务器增加压力

代码埋点分类

​ 代码埋点分为 命令式埋点和声明式埋点

命令式埋点

​ 顾名思义,开发者需要手动在需要埋点的节点处进行埋点。如点击按钮或链接后的回调函数、页面ready时进行请求的发送。大家肯定都很熟悉这样的代码:

// 页面加载时发送埋点请求 

$(document).ready(function(){    

    // ... 这里存在一些业务逻辑    

    sendRequest(params); 

});

 // 按钮点击时发送埋点请求

 $('button').click(function(){    

    // ... 这里存在一些业务逻辑    

    sendRequest(params); 

});
声明式埋点

​ 声明式埋点对命令式埋点做了改进,将埋点的代码与具体的业务逻辑解耦。从而提高埋点的效率和代码的可维护性。代码如下:

// key表示埋点的唯一标识;act表示埋点方式
<button v-log="{caption:'登录页', paras: '用户点击验证码发送'}">发送验证码</button>

​ 因为项目采用Vue框架,所以使用Vue中的自定义指令完成声明式埋点。

Vue.directive('log', {

    bind( el, binding ){


        el.addEventListener('click', ()=>{

            Axios.post

        })

    }

});

​ 只需要在需要记录的组件中配置使用v-log指令,加上详情参数就可以完成用户轨迹记录。如下:

// caption表示埋点的模块;paras表示用户的行为
<button v-log="{caption:'登录页', paras: '用户点击验证码发送'}">发送验证码</button>
点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Easter79 Easter79
3年前
Taro 牵手腾讯有数,助力小程序数据化运营
“ Taro引入了腾讯有数的微信小程序无痕埋点能力,为Taro的开发者提供真·零开发的8大无痕埋点能力以及自定义埋点能力,包含小程序启动、显示、隐藏、页面浏览、页面离开、分享、下拉刷新、上拉触底等八大自动化埋点能力以及搜索、商品归因等定制化埋点,以及经营分析、直播分析、导购分析等能力,让你的小程序可以基于微信生态,串联全场景多触点,
Wesley13 Wesley13
3年前
DTM在电商行业的运用到底有多灵活?应用场景告诉你
电商的基本应用场景有:页面浏览,商品列表浏览,商品列表点击,加入收藏夹,加入购物车,结算付款。为促进商品的成交,产品运营人员需要通过数据洞察用户在每一个环节行为,恨不得在每一个营销活动或业务功能的全流程都加上事件追踪埋点,且每一次随着业务的发展不断进行优化,运营还需要不断地给产品和开发提交每一个版本的埋点变化需求。这样带来的问题就是,对数据的需求越来越复
Wesley13 Wesley13
3年前
APP可视化埋点原理大揭秘
一、背景运营者能够对用户行为进行分析的前提,是对大量数据的掌握。在以往,这个数据通常是由开发者在控件点击、页面等事件中,一行行地编写埋点代码来完成数据收集的。然而传统的操作模式每当升级改版时,开发和测试人员就需要重复不断对代码进行更新,整个流程耗时长,无法满足业务的需求。为帮助开发者解决这一痛点,个推应用统计“个数”推出“可视化埋点”这一技术
Wesley13 Wesley13
3年前
CSS 埋点统计
CSS埋点统计当一个网站或者App的规模达到一定程度,需要分析用户在App或者网站的相应操作,则需要埋点统计用户行为,这个不用多说,具体实现有JS脚本写好埋点事件并调接口,今天get到一种新的埋点统计方式保证耳目一新。下面代码简单示范一下。//index.html<!DOCTYPE
埋点日志最终解决方案——Golang+Gin+Sarama VS Java+SpringWebFlux+ReactorKafka
埋点日志最终解决方案——GolangGinSaramaVSJavaSpringWebFluxReactorKafka之前我就写过几篇OpenRestyluakafkaclient将埋点数据写入Kafka的文章,如下:以上一步一个坑,有些是自己能力
陈杨 陈杨
1个月前
鸿蒙5开发宝藏案例分享---埋点开发实战指南
鸿蒙埋点开发宝藏指南:官方案例实战解析,轻松搞定数据追踪!大家好呀!我是HarmonyOS开发路上的探索者。最近在折腾应用埋点时,意外发现了鸿蒙开发者官网藏着一堆实战宝藏案例!这些案例就像哆啦A梦的口袋,藏着高效埋点的秘密武器。今天我就带大家挖一挖这些宝藏
一文帮你搞定H5、小程序、Taro长列表曝光埋点 | 京东云技术团队
对于各种类型的埋点来说,曝光埋点往往最为复杂、需要用到的技术也最全面、如果实现方式不合理可能造成的影响也最大,因此本文将重点介绍曝光埋点尤其是长列表(或滚动视图)内元素曝光埋点的实现思路及避坑技巧
京东科技埋点数据治理和平台建设实践 | 京东云技术团队
导读本文核心内容聚焦为什么要埋点治理、埋点治理的方法论和实践、奇点一站式埋点管理平台的建设和创新功能。读者可以从全局角度深入了解埋点、埋点治理的整体思路和实践方法,落地的埋点工具和创新功能都有较高的实用参考价值。遵循埋点治理的方法论,本文作者团队已在实践中
达达埋点迁移京东子午线实践 | 京东云技术团队
一、概述1.项目价值及成果使用集团的统一埋点采集能力和埋点平台,完成达达7条业务线共43个站点应用的埋点迁移,降低自研采集工具和平台的研发投入和机器成本,打通数据链路,创造更多的数据分析价值。具体降本增效价值如下:1.1数据分析价值:与京东流量数据打通,拉
浅谈埋点及其质量保障 | 京东云技术团队
1、埋点是什么埋点又称为事件追踪(EventTracking),指的是针对用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。用大白话说:就是通过技术手段“监听”用户在APP、网站内的行为。2、埋点的作用如果我们想要收集用户行为数据,就可以通过埋点来