学习
实践
活动
专区
工具
TVP
写文章

Navigator.sendBeacon实现页面统计

早之前做过页面统计,用的是神策和百度统计,里面那些数据个人觉得已经很全面了,最近公司进行一些特殊统计,需要在市场想要的地方一个一个加方法调接口。 这不是重点,重点是请求发起之后,如果直接跳转,请求会被浏览器取消。如果要自己统计页面浏览时长和点击事件,就只能做一些延迟和牺牲一些准确性,反正就是页面跳转需要统计的数据会丢失一些。 早之前做过,还是看的阮一峰双循环延迟阻塞页面卸载,除了死循环延迟,还有其他旁门左道,比如ajax设置同步,然后在状态是2的时候就进行页面跳转,无所谓响应;发送图片,携带数据,浏览器对图片都会加载,这就需要服务器配合了 使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能。 这就解决了提交分析数据时的所有的问题:数据可靠,传输异步并且不会影响下一页面的加载。此外,代码实际上还要比其他技术简单许多!

24410
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    页面日志采集()思路及其实现

    页面日志采集 页面浏览日志采集。指的是当一个页面被浏览器或者APP加载呈现时采集的日志,也是页面浏览量(Page View, PV)和访客数(Unique Visitors,UV)的统计基础。 页面交互日志采集。获取用户操作日志,通过量化获知用户的兴趣或者体验优化页面浏览日志采集流程 目前典型的网页访问过程是以客户端发送请求、服务器响应并返回所请求的内容进行的。 一般需要采集当前页面参数、浏览行为的上下文信息(如读取用户访问当前页面时的上一个页面)以及一些运行环境信息(如当前浏览器和分辨率等)。 日志采集实现思路 首先明确我们想要采集的数据-页面浏览日志和页面交互日志。正常情况下我们会在进入页面时发送日志信息,但是用户在每个页面的停留时间我们将很难统计到。 因此考虑在离开页面时发送日志信息,并且在页面跳转时将上一个页面的一些信息也一并加入日志信息中。由于在离开页面时发送日志,因此还需要考虑监控客户端的异常关闭状态。

    1K41

    JSP页面跳转的几种方法以及注意

    所以使用response.sendRedirect时就需要注意以下两:        1、在使用response.sendRedirect时,前面不能有HTML输出。        )这个语句意思是将客户端的请求转向(forward)到getRequestDispatcher()方法中参数定义的页面或者链接。          说通俗就是,当一个客户端的请求到这个页面后,不做处理或者不处理完,将请求转给另一个页面处理,然后再响应给客户端。          而这两种跳转方法的区别就在于: getRequestDispatcher是服务器内部跳转,地址栏信息不变,只能跳转到web应用内的网页。          sendRedirect是页面重定向,地址栏信息改变,可以跳转到任意网页。

    95511

    Markdown基础(内含:锚使用,使用HTML,新页面跳转,目录生成)

    说下Markdown语法 逆天推荐使用VSCode编写  image.png 装这个插件写作更方便:  image.png 内含:锚使用,使用HTML,新页面跳转,目录生成 启用方式: H1H3(# 、图片、锚跳转 超链接页面内打开:[超链接文字](url) 写法1: 汇总系列:[链接](https://www.cnblogs.com/dunitian/p/4822808.html#ai) www.cnblogs.com/dunitian/p/4822808.html#ai 汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai 新页面打开 [博客园logo](https://www.cnblogs.com/images/logo_small.gif) 锚:(不能实现的就用html实现即可) 我在正文开头定义了一个: 我们跳转过去:[跳转指定位置](#divtop) 跳转指定位置 列表(无序- 有序 1.2.3.

    3.1K110

    在Vue中如何不影响业务代码的情况下实现页面

    由于在Vue中每一次的页面跳转都会进入路由的beforeEach和afterEach钩子函数,因此我们将借助路由实现业务代码无感知的功能。 因此考虑在离开页面时发送日志信息,并且在页面跳转时将上一个页面的一些信息也一并加入日志信息中。 客户端日志发送 在Vue中我们将在router.afterEach钩子函数里做这个操作。 // 路由跳转之后 router.afterEach((to, from) => { end = new Date().getTime(); let logData = window.vm 因为是在页面跳转之后发送请求,所以此时将end置为当前时间。在发送完日志之后进入页面,将start设置为当前时间。 此时我们可以考虑在主页面是加点击事件记录下当前页面的信息,鼠标位置等。

    97431

    微信小程序webview,a锚跳转,回退时一直保留在原页面

    写在前面 公司业务,需要写一个页面导航,大概功能如下(APP排版,webview嵌套在小程序中) ? ? 当点击导航的时候,也可以自动跳转到相应的地方。 使用的是a标签的锚跳转 功能和效果都是在浏览器上测试正常的,但在小程序上遇到以下问题 点击回退按钮无法退出页面 当我们有点击过导航的时候,假设从One点击到Two 相当于url变动:index.html #One -> index.html#Two 当点击小程序右上角的回退按钮的时候,不会退出当前webview页面 返回到小程序的夫级页面 而是从index.html#Two -> index.html #One,页面也滑动到One区域。 如果在此页面上点击过10个导航,那么将需要点击11次回退才能退出当前页面。 不符合业务逻辑。所以需要更改实现方案。 解决方案 使用jq滑动跳转页面区域。

    1.2K40

    日志系统的架构与实现

    的方式 方式多种多样,按照位置不同,可以分为前端(客户端)与后端(服务器端),其中前端包括:代码、全、可视化。 这些方式的比较如下: ? 比如: 代码+全:在需要对落地页进行整体点击分析时,细节位置逐一的工作量相对较大,且在频繁优化调整落地页时,更新的工作量更加不容小觑,但复杂的页面存在着全不能采集的死角,因此,可将代码作为辅助 ,将用户核心行为进行采集,从而实现精准的可交叉的用户行为分析; 代码+服务端:以电商平台为例, 用户在支付环节,由于中途会跳转到第三方支付平台,是否支付成功需要通过服务器中的交易数据来验证,此时可通过代码和服务端相结合的方式 阿里的SPM位置编码由A.B.C.D四段构成, 各分段分别代表 A:站点/业务, B:页面, C:页面区块, D:区块内位。 黄金令箭 用户在页面上某个行为触发一个异步请求,按照约定的格式向日志服务器发送请求,展现、点击、等待、报错等等都可以作为交互行为。 系统架构设计 ? 具体日志发送流程如下图: ?

    7.4K10

    项目实战-系统初探

    可以大概分为三类: 无痕 - 无差别收集页面所有信息包括页面进出、事件点击等等,需要进行数据冲洗才能获取到有用信息 可视化 - 根据生成的页面结构获取特定点位,单独分析 业务代码手动 - 根据具体复杂的业务,除掉上述两种不能涵盖的地方进行业务代码 代码 可视化 无痕 典型场景 无痕无法覆盖到,比如需要业务数据 简单规范的页面场景 简单规范的页面场景, 优势 业务数据明确 在特殊情况下,可以多加上业务代码手动,处理一下特别的场景(大部分情况是走强业务与正常的点击,刷新事件无关需要上报的信息) SDK 开发 点数据收集分析 事件基本数据 事件发生时间 发生时页面信息快照 页面 页面 PV,UV 用户页面停留时长 页面跳转事件 页面进入后台 用户离开页面 用户信息 用户 uid 用户设备指纹 设备信息 ip 定位 用户操作行为 点击目标 用户点击 页面 AJAX 请求 WILL_MOUNT:sdk对象即将初始化加载,生成一个默认ID,跟踪全部相关事件 DID_MOUNTED:sdk对象初始化完成,主要获取设备指纹等等的异步操作完成 TRACK: SDK对象的生命周期管理整个点数据

    1.1K21

    让前端监控数据采集更高效

    搭建一套前端监控平台需要考虑的方面很多,比如数据采集、模式、数据处理和分析、报警以及监控平台在具体业务中的应用等等。 我们都知道,传统的页面应用是用一些超链接来实现页面切换和跳转的,而单页面应用是使用各自的路由系统来管理前端的每一个页面切换,例如 vue-router、react-router 等,跳转时仅刷新局部资源 我们在时有很多对离开页面时上报的需求,因为 SendBeacon 是异步的,不会影响当前页到下一个页面跳转速度,可以更可靠地保障事件上报成功率,并且不影响路由切换。 XHR 虽然支持异步请求,直接发送数据到后端,但是会受到跨域和同源的限制。 本文也将作为马蜂窝前端监控平台系列文章的开篇,今后还将陆续推出模式、数据处理和分析、报警以及监控平台在具体业务中的应用等内容,欢迎大家持续关注。 本文作者:王峥,马蜂窝大数据平台前端技术专家。

    82912

    无聊日常——对QQ邮箱盗号邮件的垃圾账号填充

    2、忘记密码是个摆设,超链接都懒得设置了嘛!?拍桌.jpg 3、修改密码超链接是个假链接,asp有什么效果没去分析 要我说,高仿都算不上…也就是只有一层皮的山寨货而已。 82493776 可以看到,主目录 http://dhdjfekljjf.jcikiybk.lsdhdjeicgj.com.cn是不可访问状态(403),难受…然后专门去看了看admin/下面的文件,直接就跳转到了 Login.aspx中,显示的是另一个登陆页面。 分析页面后,发现和模仿QQmail那个网站一样,都是提交账号以后直接提示账号密码错误。我会说我以为自己找到了后门一直试吗?嘁,可笑。 2、“垃圾填” 怀着很不爽的心情,我准备写一个python程序正义地惩bao罚fu一下这个网站的设计者,没错,我准备用垃圾数据填充它的服务器!

    22360

    前端点数据收集及上报方案

    主流方案 无痕(全),利用浏览器或APP自带的监听方式,对用户的浏览页面、点击等行为进行收集,一般用于粗颗粒度的数据分析,例如公司的slardar 数据噪声大,不管有用没有,数据都会被收集 无法定制化 工作量大,而且对代码侵入性很大,后期维护也不是很方便 可以精确,具备明确的事件标识 业务属性非常丰富 触发方式可以灵活定义 DA使用更方便和精确 优点: 缺点: sdk,sdk向外暴露上报的接口 例如公司的tea 暂时想不到 业务开发只需关注事件标识、业务属性等 兼顾无痕优点和代码的优势 优点: 缺点: 常见属性 通常前端是按照页面维度统计的,常见的事件属性如下: 属性 描述 uid 用户id,若用户未登陆,则返回特定标识id url 当前事件触发页面的url eventTime 触发的时间戳 localTime 触发时的用户本地时间,使用标准YYYY-MM-DD HH:mm 浏览器通常在页面卸载时会忽略异步ajax请求,如果需要必须进行数据请求,一般在unload或者beforeunload事件中创建同步ajax请求,以此延迟页面卸载。从用户侧角度,就是页面跳转变慢。

    2.8K21

    《七天数据之旅》第四天 设计(下)

    0x00 前言 在上节中我们介绍了设计时四种主要思维方式,本节我们挑选典型的疑难场景进行设计。 用户来回滑动也正常加入到缓存中,回滑加入缓存不去重 0x02 列表式 曝光事件的处理是设计中最难的部分,其中尤以上报时机和上报格式最为考研设计人员的能力,下面结合给出作者的经验设计。 悬浮的授权弹窗下的页面曝光,需要授权弹窗消失后才能上报 0x03 点击相关 点击延后 点击的上报时机一般不存在疑问,即点击发生时候或者点击结果返回时上上报,但在处理一些特殊场景的时候合理的制定上报时机 典型的使用场景是单页面批量操作,具体如下: 单选或多选、然后一起操作(操作结果:关注/删除/移动) 单选,每个选择有单独的操作结果(页面不发生跳转),整个页面是每个操作的结果组合 以上两种场景,建议离开当前页的时候上报该页面操作的结果 0x05 总结 本节对设计中常见的刷新流、列表式、点击相关、联动演化四种常见情形讲解了设计的方式,当然点中并不仅仅这几种方式,从统计需求出发,结合实际的场景,才是设计的根本出发点。

    1K51

    《七天数据之旅》第五天 注意事项

    0x01 前言 前两节我们介绍了设计四大思维,并给出了四种典型场景的设计方式,本节介绍在设计中的注意事项,这些事项是在进行设计的时候应该遵循的准则,通过本节的阅读,你将获得以下准则的认知 0x02 同质继承 跳转继承 从A页面跳转到B页面,只在B页面的展现事件上报了from,而在B页面的后续重点操作都没有继承最初进入该页的from属性,或者在B页面的下一级需要重点关注来源的页面也漏报了from 0x04 粒度平衡 粒度平衡指粒度在最小化的原子粒度和抽象粒度概括之间要平衡,常见的有以下几个方面: 时间粒度 时间粒度在盒子不变,其交互也不变,而盒子里的内容通过左右滑动或者点击跳转而改变,简言之就是复用同一套模板的交互情况下要特别注意 参数: stay_duration:停留时长,单位ms 在设计的时候,该事件的停留时长参数就一定要精确到原子粒度,即单个内容的停留时长,而不是该类页面的停留时长。 0x05 总结 本节从同质一致、同质继承、通用复用、粒度平衡四个方面介绍了的注意事项,严格遵循这些准则能很大程度上提高设计的效率,保障设计的质量。

    64330

    前端第二章:8.HTML超链接代码写法;id属性

    一、超链接介绍 0.超链接 是 行内元素,但是可以放 块元素 1.从一个页面跳转到另一个页面 2.或者跳转到当前页面的其他位置 3.href 属性的值可以是 外部网站,也可以是同一个目录下的地址文件 三、超链接名值对 target · 代码 1.在当前界面打开超链接(target名值对默认值) 超链接的字样 2.在新标签页打开超链接 超链接的字样 四、超链接回到当前页面顶部 · 代码 1.当阅览比较长的文章时,可以通过一个超链接直接回到当前页面顶部 id属性,但是一个html文件中,id值不能重复(而且id属性区分大小写) 3.我们几乎能给任何一个标签添加 id属性,示例: 4.跳转到 指定id 的位置(靠这个我们能跳转到当前页面的任何位置! a href="javascript:;">超链接的名字 七、超链接·易错 1.超链接元素内 不能嵌套 超链接本身 2.在写代码时不要忘记超链接中间的 标签体!

    12420

    京东科技点数据治理和平台建设实践

    比如在页面中元素或页面事件使用前端代码;在Debug链路长的搜推代码中使用服务端;产品运营等非研发使用可视化点数据“准”:需求开发测试阶段,往往重点关注业务逻辑,对于上报这些辅助异步流程,设计评估不准确。会存在因验证不充分而导致数据不准确的情况。 04 奇点对比行业创新功能 4.1 可视化展示 查看某个页面信息,通常采用分页列表的方式,详细数据要跳转到看板浏览。 4.2 H5与原生App全链路数据打通 类似京东金融这样使用Native和WEB技术开发的混合应用,之前H5页面和原生页面的数据,使用了不同的SDK采集,用户在两端页面跳转,数据是断裂的,只能分开统计 访序打通: 访序是指用户在当前访次内,页面的访问顺序,H5和原生页面打通后,页面的访序是连续的,可以更精准的查看用户访问页面路径。 来源: 来源是指上一个页面用户点击最后一个ID。

    28220

    HTML超链接标签学习

    超链接标签学习 超链接标签学习 ---- 网络资源: 淘宝一下 ? ---- 锚学习: 锚学习 ---- 超链接标签学习: a标签: href:要跳转的网页资源路径 本地资源:相对路径 网络资源:网络资源(网页)的URL target:指明要跳转的网页资源的显示位置 _self 在当前页中刷新显示 _blank 在新的标签页中显示 _top 在顶层页面中显示 _parent 在父级页面中显示 注意: 超链接标签中一定要声明访问方式,访问方式可以是文字也可以是图片 锚学习: 作用:在一张网页中进行资源跳转 使用: 先使用超链接标签在指定的网页位置增加锚.格式为: 使用a标签可以跳转指定的锚,达到网页内部资源跳转的目的 ">锚学习 </body> </html>

    45400

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 微服务平台 TSF

      微服务平台 TSF

      腾讯微服务平台(TSF)是一个围绕应用和微服务的 PaaS 平台,提供一站式应用全生命周期管理能力和数据化运营支持,提供多维度应用和服务的监控数据,助力服务性能优化。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券