一种可快速使用的前端埋点方法技术

本发明专利技术提供了一种可快速使用的前端埋点方法，本技术可以快速埋点，采集用户数据信息，利用该埋点技术大致收集两种信息：1，页面时长和访问次数统计；2，统计操作行为。其中本发明专利技术的有益效果是：用户使用时能实时上报数据，且能采集全部数据的目的，实时高效且全面。实时高效且全面。实时高效且全面。

【技术实现步骤摘要】
一种可快速使用的前端埋点方法


[0001]本专利技术涉及前段网页开发
，特别涉及一种可快速使用的前端埋点方法。

技术介绍

[0002]为了优化改善产品,本实施例常常需要收集大量的数据来进行数据支撑，此时本实施例就需要在应用中特定场景下来追踪用户的使用情况。这就是埋点技术诞生的由来。
[0003]本实施例通常会统计用户信息、点击次数、相关应用使用情况、页面访问次数、页面访问时长等信息。
[0004]而目前埋点主流分为两种方式：
[0005]1，自己公司在研发时注入相关代码，来进行数据的提取查询。
[0006]2，采用第三方统计工具，但由于隐私性和数据保护的原因，第二种方式会导致采集数据不全面。
[0007]因此市面上急需一种在用户使用时能实时上报数据，且能采集全部数据的目的实时高效且全面的埋点技术。

技术实现思路

[0008]为了解决上述技术问题，本专利技术中披露了一种可快速使用的前端埋点方法，本专利技术的技术方案是这样实施的：
[0009]一种可快速使用的前端埋点方法，包括步骤如下：
[0010]A，统计用户停留页面时长和访问次数：
[0011]A1，当用户点击界面时，页面初始化；
[0012]A2，记录首次进入的时间；
[0013]A3，后续采用触发计时并监听；
[0014]A4，当用户关闭界面后，关闭监听；
[0015]A5，统计用户在一个时间戳内的访问次数并构成一个埋点事件；
[0016]A6，重复上述过程，即可统计用户所有的时间戳以及相关时间戳内的访问次数；
[0017]B，统计用户操作行为：
[0018]B1，每一次埋点事件后会在eventtrackservice中生成一个新的方法，根据该事件名获取数据埋点自定义参数并将A步骤中的所有信息发送给后端；
[0019]B2，把事件名以字符串的形式传入判断事件名来进入相应的case，然后返回相应的埋点参数，将拿到的值赋值给局部变量customData；
[0020]B3，拿到局部变量customData后，本实施例开始调用postTrackingData方法发送数据至后端。
[0021]优选地，所述A2步骤中，使用pageHoldOnHeartbeat方法记录时间。
[0022]优选地，所述A3和A4步骤中，使用rxjs中的subscribe实时监听。
[0023]优选地，所述B2步骤中使用switch方法判断事件名。
[0024]优选地，所述B3步骤中包括B3.1，首先判断版本环境；
[0025]优选地，B3.2，判断完数据类型后再去定义局部变量；
[0026]优选地，B3.3，通过promise调用接口，通过post方法把数据发送给后端。
[0027]优选地，所述B3.1中应用是公有云则发送埋点数据，假如是私有云则返回promise的resolve。
[0028]优选地，所述B3.2中局部变量包括客户端标记id、时间戳、部署方式、数据埋点设备信息、用户信息和事件信息。
[0029]实施本专利技术的技术方案可解决现有技术中两种常用的埋点技术均有其弊端的技术问题；实施本专利技术的技术方案，用户使用时能实时上报数据，且能采集全部数据的目的，实时高效且全面。
附图说明
[0030]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一种实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0031]其中相同的零部件用相同的附图标记表示。需要说明的是，下面描述中使用的词语“前”、“后”、“左”、“右”、“上”和“下”指的是附图中的方向，词语“底面”和“顶面”、“内”和“外”分别指的是朝向或远离特定部件几何中心的方向。
[0032]图1为实施例的总体流程图；
[0033]图2为实施例的记录访问时长流程图；
[0034]图3为实施例的发送埋点数据流程图。
具体实施方式
[0035]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0036]实施例
[0037]在一种具体的实施例中，如图1、图2和图3所示，一种可快速使用的前端埋点方法基于angular框架实现。
[0038]本实施例利用该技术大致收集两种信息：
[0039]1，页面时长和访问次数统计；
[0040]2，统计操作行为。
[0041]在第一种情况下，每当用户点击一个页面，页面初始化后，本实施例便会调用事件埋点服务中的记录页面心跳(pageHoldOnHeartbeat)方法开始记录时间。
[0042]记录页面心跳方法(pageHoldOnHeartbeat)相当于一个计时器，该方法会记录首次进入的时间，以及触发计时，这里会采用rxjs中的订阅方法(subscribe)实时监听，计时在30秒内时每隔5秒会触发，当在30到90秒时每隔10秒会进行触发，而当大于90秒后，每隔
15秒会触发一次计时，这里主要考虑到当用户停留越久操作越少，由此进行这样的处理。
[0043]当页面被关闭时，本实施例则用rxjs中的takeUntil(订阅并监听方法)来取消监听，这样本实施例就可以查看用户在一个时间戳内的访问次数
[0044]与此同时，本实施例再调用每一个埋点事件中获取用户信息的方法，就可以查看到用户的信息和打开应用的信息以及对应的时间戳.
[0045]而当记录用户操作时，每一次埋点事件都会在事件追踪服务(eventtrackservice)中生成一个新的方法，方法内主要包含两方面内容：
[0046]1，根据事件名获取数据埋点自定义参数；
[0047]2，将在第一步获取到的参数以、事件名、时间以及用户信息发送给后端。
[0048]根据事件名获取数据埋点自定义参数的方法(getEventCustomData)中，本实施例会把事件名以字符串的形式传入该方法内,通过switch方法判断事件名来进入相应的case，然后返回相应的埋点参数，本实施例将拿到的值赋值给局部变量(customData)。
[0049]当拿到局部变量(customData)后，本实施例开始调用发送追溯数据方法(postTrackingData)发送数据，该方法会有两个参数，一个是事件数据结构的事件信息，包含事件名和事件类型，一个是局部变量(customData)，方法中本实施例先判断版本环境，假如应用是公有云则发送埋点数据，假如是私有云则返回prom本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种可快速使用的前端埋点方法，其特征在于：包括步骤如下：A，统计用户停留页面时长和访问次数：A1，当用户点击界面时，页面初始化；A2，记录首次进入的时间；A3，后续采用触发计时并监听；A4，当用户关闭界面后，关闭监听；A5，统计用户在一个时间戳内的访问次数并构成一个埋点事件；A6，重复上述过程，即可统计用户所有的时间戳以及相关时间戳内的访问次数；B，统计用户操作行为：B1，每一次埋点事件后会在eventtrackservice中生成一个新的方法，根据该事件名获取数据埋点自定义参数并将A步骤中的所有信息发送给后端；B2，把事件名以字符串的形式传入判断事件名来进入相应的case，然后返回相应的埋点参数，将拿到的值赋值给局部变量customData；B3，拿到局部变量customData后，本实施例开始调用postTrackingData方法发送数据至后端。2.根据权利要求1所述的一种可快速使用的前端埋点方法，其特征在于：所述A2步骤中，使用pa...

【专利技术属性】
技术研发人员：李婷婷，薄智元，
申请(专利权)人：上海易校信息科技有限公司，
类型：发明
国别省市：