前端关于埋点和曝光的基本做法

最新推荐文章于 2024-08-09 09:18:08 发布
最新推荐文章于 2024-08-09 09:18:08 发布
阅读量3.2k 收藏 8
点赞数 1
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snailmar/article/details/123472252
版权
本文介绍了前端如何进行埋点和曝光以收集用户操作喜好、阅读习惯和监测线上问题。埋点分为自动和手动，自动埋点利用事件冒泡监听用户操作；曝光包括自动曝光，借助IntersectionObserver API实现，对动态加载元素需重新执行observe。
摘要由CSDN通过智能技术生成
为了获取用户操作喜好，阅读习惯和监听业务代码线上问题，我们需要对项目进行埋点和曝光。一般埋点为手动操作上报方式，曝光为自动上报。前端埋点和曝光具体可以采取以下做法。
1 埋点

H5埋点可以是自动时和手动式，自动式利用事件冒泡捕捉用户操作进行代理操作。具体实现方式如下：
自动埋点：

<div id="app">
    <div data-reportname="divclick"
最低0.47元/天 解锁文章
麻烦让一让，我比较宽
关注
专栏目录
前端曝光数据埋点——Intersection Observer+vue指令
weixin_34279061的博客
04-01 3781
一、背景介绍在电商产品中（可以打开你的淘宝、天猫、京东App），通过对商品的曝光进行数据埋点，就能反推出用户的行为和交互习惯，从而优化推荐和搜索算法以及交互，最终的目的当然是为了增加用户购买力。曝光：商品出现在用户眼前，也就是浏览器视窗，可谓之曝光最直白的两种方法1、监听滚动事件，通过[Element.getBoundingClientRect() - Web API 接口参考 | MDN]计...
教你怎么前端实现埋点上报
huihui_999的博客
12-16 415
教你怎么前端实现埋点上报
页面曝光难点分析及应对方案
大模型学习路线
11-22 765
曝光埋点分为两种： 1. PV 2. show
浅谈前端埋点
最新发布
qq_41915137的博客
08-09 496
前端埋点是一种强大的工具，通过收集和分析用户行为数据，可以帮助开发者和产品经理深入了解用户需求，优化产品设计，提高用户体验。无论是手动埋点、自动埋点还是可视化埋点，每种方法都有其独特的优势和适用场景。希望本文能帮助你更好地理解和应用前端埋点技术，为你的产品带来更大的价值。
通过自定义 Vue 指令实现前端曝光埋点
前端劝退师
04-07 1547
前言互联网发展至今，数据的重要性已经不言而喻，尤其是在电商公司，数据的统计分析尤为重要，通过数据分析可以提升用户的购买体验，方便运营和产品调整销售策略等等。埋点就是网站分析的一种常用的数据...
html5 埋点工具,实习好忙｜前端埋点之曝光实现
weixin_42298507的博客
06-21 584
最近有一个工作需求是曝光埋点，让我得以有机会接触相关的东西。之前实习时没有做过这方面的需求，个人项目更是和埋点扯不上关系。以至于上周开会讨论时听到“埋点”这个词就怂了。不过后面听大佬分析了下后才意识到，原来“埋点”是这个意思。曝光埋点的思路也是很简单：无非是判断某个DOM是否出现在视窗中，出现了就收集数据上报给服务端。所谓“埋点”，是数据采集领域(尤其是用户行为数据采集领域)的术语，指的是针对特定...
优云老王（三）谈埋点：人生处处有埋点
09-27 152
说到埋点，的确是用户最感兴趣的话题之一，优云Web产品在内测阶段便收到了用户的各种反馈，反复问我无码埋点是怎么做的。在此我专门与大家聊聊埋点以及各种实现方案的利弊。 1、埋点的来历 先说下埋点的来历，其实在互联网没流行起来之前，埋点并不是用来分析用户行为的，技术人员为了解决某些问题，就...
前端埋点的实践
Arui_0的博客
09-02 1468
1、前言 开始正文前先介绍一下埋点的概念～，（熟悉的朋友可以略过） 前端埋点： 是一种手段，它的目的是上报相关行为数据，相关人员以数据为依据来分析产品在用户端的使用情况，根据分析出来的结果辅助产品优化、迭代。 BI：商业智能，公司内部做数据分析相关的部门。 2、背景 在流量红利逐渐消失的现在，数据的采集、分析和精细化的运营显得更加重要，所以埋点的需求在互联网产品中是很常见的，目的上面也提到了。我们的追求就是又快又好的做好埋点工作，但是现实却不那么美好；目前我们团队在前端埋点方面存在一些痛点： 在构造埋点字段
Vue 曝光埋点插件的实现原理
qq_39692513的博客
04-26 1594
vue 自定义插件 指令 曝光埋点对象
浅谈微信小程序列表埋点曝光指南
01-03
背景 最近项目中，开发一个小程序列表页，PM大大给我提了一个埋点需求，列表中的每一项，出现在屏幕中的时候，需要上报一条记录。 目标 如图中操作，要依次上报 item 1 – item7,但是上滑的时候，不再重复上报 怎么做 接到需求的第一感觉是，我难道要监听页面滚动，然后通过offsetTop 去算吗！！！？？？ 这样显然不是最高效的。于是我去翻了一下微信的开发文档，发现有一个IntersectionObserver 的API，正好满足我的需求。 首先我们需要创建一个 IntersectionObserver wx.createIntersectionObserver(Object c
[ 埋点, 结构 ] 前端数据埋点
莓尊尊strawberry
09-28 570
前端数据埋点 前提 应用变得更受欢迎，了解用户的行为就更迫切，埋点的事就更重要了。前后端都会进行埋点，也有各自适合的场景，例如 api 回调里的埋点显然更适合后端，相比前端，这样更快也更精准。而前端的原住业务代码也很关注侵入的埋点代码，会希望它们能矜持一些，不至于扎堆妨碍业务。把一份埋点文档转译成埋点代码，这份代码最好就能像文档一样方便定位、添加、修改、删除、查看，并且和业务代码保持距离。 怎么做呢 这里用各个元素DOM的id来区分各个埋点数据，即用 DOM id 来进行埋点，这里介绍这种埋点方案。 根据前
RecyclerView曝光埋点
pzhu_lcx的博客
01-11 1303
RecyclerView曝光埋点   在做客户端埋点的时候，一般分为三类事件，页面浏览事件，元素点击事件，列表item元素曝光事件。页面浏览事件和元素点击事件在做代码埋点时可以很简单的进行埋点，对列表item元素曝光事件的埋点相对来说就复杂许多。 对列表item元素曝光埋点上报需要处理四个问题 元素是否可见(开始曝光) 元素是否不可见(结束曝光) 元素可见区域是否满足曝光认定的条件(eg:很多公司会要求item可见区域超过50%才认为是有效曝光) 获取元素对应的曝光数据 所以item元素可见、不可见状态
列表页曝光埋点实现
weixin_33869377的博客
11-27 2339
列表页曝光埋点实现 以商品为例 要求 商品一半以上出现在视窗中时 上报该行的商品 快速滑动过去的商品不上报 滑动过程中如果一行商品一直未消失在视野中（一半以上），不能重复上报 滑出视野的商品，再次滑入视野时需要再次上报 分析 需要以下信息 商品所在行的高度rowHeight（固定值） 商品的可视区域的高度contentHeight...
大厂经验（一）：一套 Web 自动曝光埋点技术方案
阿里云技术
07-06 1814
阿里云数据中台官网https://dp.alibaba.com/index （作者：qingliang_hu） 关联阅读：大厂经验（二）：多端可视化埋点解决方案 前言 首先在介绍这套方案前，咱们还是简单地普及一下“埋点”这个名词。 埋点是指在各个终端（如网页、小程序）中收集一些关键访问数据并将数据发送到日志服务器，以供后续的数据分析。 如下笔者在写这篇文章之前对公司内的一些业务做的访谈调研记录，可以发现埋点在实际业务中大概会有这些作用： “采集并针对性做些投放调整，比如会员权益的展现、影院场.
前端埋点全解及埋点SDK实现方式
u013994400的博客
03-27 3665
所谓“埋点”，是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。埋点的技术实质，是先监听软件应用运行过程中的事件，当需要关注的事件发生时进行判断和捕获。埋点需要在特定的时机来收集数据，然后上报给服务端进行分析。
轻松玩转 Android 复杂列表埋点曝光（也许是一行噢）
minminaya
03-23 1418
一个好的产品离不开数据分析，在手机 APP 中，数据分析极致化需要细致到某个时刻列表曝光的了哪几个 Item。 2022 年了，基本上目前 Android 上可以滑动的复杂列表都是 RecyclerView 或者其扩展，这里分享一个封装的思路。 一、基本思路 什么是列表曝光 简单的理解就是用户在肉眼可感知范围内真正看到了数据就算曝光，包括数据刷新了 如果非要细化细节： 1、列表数据变化时，比如上滑下滑 2、页面从隐藏到显示，比如切换页面、前后台切换 一些方案的对比 各种方案核心都差不多，最关键
前端组件化埋点方案与实现
薛定谔的猫-前端领域
06-17 7098
埋点，是收集产品的数据的一种方式，其目的是上报相关行为数据（PV/UV/时长/曝光/点击等），由相关人员以此分析用户的使用习惯，助力产品不断迭代和优化。对于开发来说，通常不仅仅需要完成基础的业务需求，还需要完成埋点需求，所以，追求的是简单快捷的埋点工作。而一个完整的埋点体系由以下三个部分构成：目前，前端埋点存在的痛点一般是：复杂场景的曝光埋点实现繁琐：分页列表、虚拟列表等；埋点代码的侵入性：尤其是曝光代码导致逻辑复用困难。埋点类型一般有：市场上常见的埋点方案：综上，需要的是一种简单快速且准确，同时埋点逻辑与
创建一个关于前端埋点和分割的实现
02-14
前端埋点是指在网站或者移动应用的前端代码中加入统计代码，以收集用户的行为数据，帮助开发者了解用户的使用情况。 实现埋点有很多方法，最常见的方法是使用 JavaScript 在页面中加入代码。比如说，你可以在页面上的某个按钮的点击事件上加入代码，以记录该按钮的点击次数。 另外，前端埋点还可以通过第三方统计工具，比如 Google Analytics 来实现。这些工具会提供一个 JavaScript 代码，你只需要将代码放到你的网站或者移动应用上即可。 而前端分割实验，是指在前端代码中对用户群体进行分组，然后对不同群体提供不同的功能或体验。通过前端分割实验，可以帮助开发者了解用户对不同功能或体验的反馈，从而更好地优化产品。 前端分割实验的实现方法有很多，比如通过 JavaScript 动态修改页面的样式和布局，或者使用第三方分割实验工具，比如 Optimizely。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值