前端监控最佳实践-用户行为动态采集与分析

前端 3年前 0 2.5K

前端早早聊大会，前端成长新起点，帮你提前二十天，站在新的起跑线，政策成为用得上，听得懂，抄得走的前端大会，计划 2020 年办 12 期，由前端早早聊与掘金联合举行。

第六届 – Serverless 与前端的联系、结合方法与落地实践的同享，5 月 16 日举行# $ E I | 6 {，6 位讲师B ( [ + y N ? S，报名地址：huodongxing.com/go/tl6

想要了解一切跟前端早早聊有关的动态，或围观 Scott 朋友圈，请加 Scott 微信: codingdreamer

本文为第五届 – 前端监控系统制作专场讲师 – 清音的同享：

开场介绍

哈喽，我们好，我是清音，来自政采云前端团队。从上一年开端负责用户行为收集与剖析的系统的制作。很高兴有机会能在这儿给我们同享我们从 0-1 制效果户收集与剖C S 1 H I #析系统的经历。

制作价值2 W .

首要来说一下，为什么我们要做这样一个用户行为剖析的系统？

数据埋点的事务价值

客满5 q { b `部分的同学想要更精准的定位，用户高频问题，下降咨询量，进步用户满意度。连续有帮忙` ] 3 0 f用户答疑解惑的功用模块上线，但是，其效果无法衡: & d M , V量。

运营想知道哪个广告位，哪个资源位更有价值？哪些人是自己的政策客户？

产品和规划同学想要进步用户体会。开发同学在g % o m J & N ] M不断迭代功用版别上线。那这些我们以为的优化点，效果终究怎样？怎样去衡量？都需求数据政策支撑接下去的作业。

我们将这个用户行为收集与剖析的系统取名为为浑L – n Z k ^ * ] a仪，r ( { B 1 : Q j q数据收集服务上线一年半，现在浑仪3 u x A c l W途径的日志数量现已达到了Y + R $ c U 16 亿，每个作业日收集的数量大约在 1000 万左右，前端内部建立了虚线的兴趣小组，从收集需求，规划计划到落地，总的人力成本是在 90 人天左右。

后边我会分四个部分~ o | & % – ~ H去介绍浑仪系统，首要是要害架构的全体介绍，然后分成数据收集、剖析和运用三个模块具体介绍。

要害结构

浑仪系统全体流程可以概括为三大步。首要，收集数据，然后进行数据处理，最终，数据透出展示。

而支撑这三大e _ : N }部分，完结了 4 个功用模块：

数据收集的 SDK
数据处理和数据存储的服务
进行坑位级数据展示的 Cp + / – J !hrome 插件
系统级数据展示的站点

浑仪的全体架构图

全体架构预览

首要来看下浑仪的整p V % K X # 5 |体架构图，我们收集了三端的数据= ) { J ] F j g A，PC、H5 和 APP。

在 PC 端和 H5 运用了两套 sdk 去监听不同的工作。然后将监听到的工作通过 rest 接口上报W % k O a X ` 3 b给数据处理的服务，存储至阿里云日志服务中。我们进行了测验环境和真线环境，两个环境的数据阻隔。% o K u o – –测验环境的 sdkb d F 会走洽谈缓存的方法去改写，真线会运用强缓存，并且进行版别控制；因为真线数据量巨大，我们会定时将日志库一年半以上d _ I M的历史数$ v ) & d @ ` u }据数据存储至 OSS。每天会有守时使命，挑选( f h . *一部分数据存储到数据库中。其他还会和外部: x | l ~ z a的许多系统进行交互。

权限系统：首要控制浑仪站点的访问权限；
功能系统：输出一些高频访问页面，进行功能检测；
运P d ] i } y s 2维途径，用来安置系统；和大数据途径会做一些数据的交互，我们会将行为* r I K数据推给大数据途径，也会从途径上抓取一些事务相关的数据。

系统要害架构& k ] y Z & F

从上图重点模块的具体架构图可以看到。左边这一个模块，是面向用户的进行行为收集，右J x 8 d 7 H x边模块是面向内+ J ( V g部用户；供应给用户非常丰厚的数据可视化展示。除了有可视化的站点，还供应了 Chrome 的插件，进行更为及数据的展示，还作为一个 pass 途径，供应对外供应一[ Z o x 3 2 a h些 SQL 查询，报表 Excel 导出，和供应 API 拉取报表的数据，也可以根据现有的数据进行二次开发。

数据收集

首要讲一下/ } R ?数据收集模块的完结。我们收集了页面进入和脱离，用户点击和滚屏工作，还有一些标准的自定义工作。页面进入、脱离和滚屏的工作我们能进行自动化的收集，点击{ S g H 9 w以及自定义工作需求，前端同学合作，进行代码植入。

那么我们怎样做到零代码的自动化收集呢？

首要我们在页面傍边通过项目e X _ R q O ,编译的进程傍边，为项目植入了项目 ID，挂载页面的 headd ; – 部分；
然后在进入页面的时分，根据页面的途径，去自动生成页面 ID，挂载在 body 节点上。I L 1 `
最终在用户进入页面和脱离页面的时分，数据收集的 SDK 能自动拿到项目 ID，页面 ID，去定i | 1 f i $ J + 6位一个仅有的页面，做到自动化的上报进入和脱离的工作。

以点击工作为例，其时触发点击工作V F U R ` d %的 DOM 点，我们称之为坑位。坑位的外层包裹的 DOM 节点我们称之为区块。这两者需求以代码侵入的方法，进行挂e g : C载，为了下降挂载的成本，我们也供应了一些东西去帮忙他们进行操作。

统一的站点中我们供应了买点央求的功用，在央求完结之后点击生成代码，但马上会具体列出需求挂载的方位以及 ID，开发人员只需求将生成的代码粘贴到需求埋点的G J 2 a A方位即可。

其他上一场我们讲到了建立，通过建立系统生成的页面也会自动植入这2 X e # s O R I I些方位 ID，有了这些数据之后，我们就可以开端进行一次完好的上报。

收集数据剖析

上图是我们会上报的一些数a L Y B h 5 l据。这儿的 xy 轴坐标可以用来生成用户点击区域的热力求，反映一个页面上用户首Z J 8要的关注点。如下图：

操作系统、分辨率、阅读器这些信息可以让我们剖析其时途径干流用户的一些干流阅读器，用来承认途径的兼容情况；
假设是 APPj q 端还会有例如是客户端版别，手机类型E b l，其时网络情况的一些H d A其他的数据；
logType对工作进行分类；
ev0 ~ Q bt去具体的指定工作类型；
createTime 是工作发作时间，可以用来串联工作发作的前后次第记载了；
utmCnt是8 b F y * ) _ 5触发方位用来把其时的工作定位到具体的 dom 节点；
uuid是访客的仅有标识，每次用户进入页面之后，SDK y ! : @ & + 会去 cookie 中查找它，假设没有的话，我们就会生成，并且将过期时间设为永久。记载用户的 IP 地址可以追溯到用户的省市区。
userId可以和 **uuid **相关起来，将无意义的访客，相关到途径的用户，构成具体的用户画像。
utmfrom符号了x c S : L M 6来历的方位，后边会具体讲 a 链接l : ; } 7的跳转，v v T ? / E h P这个字段是用来串联前后的链路^ N d )。
绿色框内的上报信息，我们可以归结R / c & d为阅读器页面相关的一些信息，赤色框内的工作相关的一些信息，蓝色框内的本钱，我们可以归结为用户相关的信息。

具体工作阻挠

我们将四个政策1 Y e @ : L |工作都委托在了 document 上，一切这些工作只需4 A h (触发都会被阻挠，但是通过! r @ { ^ ? H ;特定的挑选，只需能获取到坑位 ID 和区块 ID 的 targM p 8 1 a f Yet 上触发的工作才会被上报。这让我们收集的数据愈加精准，假设在这儿不做挑选的话，上报的数据变得大而y g d P q全，数据量就会特别巨大，就把现在的代码侵入式埋点切换为了全埋点，这也会让数据的剖析变得比较困难。

从上图可以看见，刚进入页面的时分，默许会有一个 push 央求发送。每次点击的时分也会有一个 push 央求发出去，可Z J m X !是它的归类都J b w d 3 .是是在 other 里边。

这是因为脱离的进程傍边，发送 HTQ W . ] z OTP 央求一般都会被 cancel，而我们运用 sendBeacon 就是一种用来保证数据被发送的方法，他能在 unload 的或许 beforeunload 的工作处理器U 7 s w l 9中主张一个 HTTP request 来发送 O e h数据，这样就* m , r j @能保证我们脱离页面的央求会被记载下来。

在数据上报这儿我们还运用标签首要是为了保证阅读器的兼容性。因为现在，IE 是不支M 9 S B R % $ ! V撑 sendBeE N K + ]acon 方法的，而我们渠9 t W ) ~ 9道还有一部分用户还在运用 IE，我们也在继续的关注 IE 的运用份额，所以这部h 1 5 } B分的数据也会很重要。为了能收集到更. a A多 IE 的运用数据，我们会先判别 sendBeacon 方法是否可用，不可运用的时分，会运用**<Img>**进行，恳o G d , B E @ 9 k求的发送。而 cors 是我们最常见的一种跨域央求发送的方法，它可以运用 post 的央求，让X f G 6 ] y `我们批量上报的一些数据可以不超出7 S I 8 F长度的限制，可以成功发送。

相同可以发送单一维s z 3 9度的一些上报数据u K , 5 n ] B w L之外，我们还需求，上报的数据可以串联起整个用户阅读的流程! g 4 P。傍边最常见的一种方法就是链接的跳转。

或许就有人会问为什么不必 refer 去串联整个流程呢？假设可以，但是他的维度仍是太粗了。他只能进入来历页面而不能记载，来历于页面上哪个方位。

当我们进入页面的时分，我们会生成当次进入页面C 3 O } [ l m ~ (的仅有标识 ID
到用户点击一个链接的时分，我们会将其时g n z v = ]的项目 LED 页面 ID 区块 ID 和其时 a 链接的坑位下标
最终是，生成页面时生成的 IDp & } S O a y 5 个符号 id 拼成一个 uTM( U H q f $ ! 值，在页面跳转之后，SDK 会从页f p p : q | u T J面的 URL 上面获取，uTM 值4 ~ ` w p 7进行上报

这样我们就能承认，其时页面的来历是来历于上一个页面的哪一个方位的链接点击，也让链接的点击行为变成一个自动化收集的工作，只需其时区块被植入了区块 ID，它下面的一切 a 链接点击都会被记载下来，用于串d T D 8 / l联整个流程。

数据剖析

在数据处理部分我们运用了阿里云的 LOG S| I dervice，他的一个非常大的优点就是能供应日志的实时消费接口，查询方法也非常丰厚；: ] ( a D r u可以增加实时索引；现在可以满意我们大部分的查询需求。

在数据P s n # | W *剖析X z ^ % * 6 R的+ O p w D j o J Y进程傍w V x边，非常重要的一个点怎样样让我们收集到的数据转化为可理解的政策。

上图咱! m } o 2 2们的一个首要流程，要进行数据的剖析，首要要先建立政策V z ~ 7 W 9 m W，然后能获取到需求剖析的点的数据之后，再进行数据剖析，最终将数据运用到实践的场景中。

根据之前收集到的数据，我们很简单就能核算T n v t ; g b X出页面的 PV、UV、点击数、曝光数一些基础的政策，但是我们要怎样把它转换成一个漏斗模型？

那就是去拼接这些基础数据。以我们途径的流水贷流程举例：

进入央求详情页之后，4 = u a n我们可以将进入页面的 UV 作为第 1 个数据。
将点击立即央求翻开协议弹窗，点击人数作为第二个数据，以此类推，就成组装成一个漏斗模型
我们可以核算1 b Y ] X m S %出每个过程相对于前一步的数量百分比，这就是一个无序的漏斗；
假设部分用户或许从第三步直接进入，这时分就或许存在百分比逾越 100% 的情况；
假设是有序漏斗，会以~ / h ? 8用户h 3 } [ 8 s E F为维度进行挑选，我们会早年到r z w N后过滤每一步的用户就表明，我们只会保存从第 1 部，U r k按照次第进入到最终一步的那些用户，并不把从中心进入的一些用户核算在内。这样就使得转化百分比必定小于等于 100%，也让数据更具有参阅价值；

下面是一个设置置信区间的场景

页面逗留时长其实就是页面进入和页面脱离的时间差，最快的情况下用户 1s 就脱离了页面
但是也有或许用户在中心中断了操作但一向没有关闭窗口，导致逗留时间非常的长；
在样本比较少的情况下这样特殊的数据或许会拉升了页面的均匀访问时长，使得均匀时长逾越了 4 个小时，这时分均匀访问时长或许失去了参阅A o P . [ T A #价值
这儿的中位数指的是将用户访问时长从小到大排序之后，取中心的数值，得到了 22 分 8 秒，这时分，中X s位数更能反映页面b 2 x实践% ? % q & s 6 ; /的运用情况；

那么怎样才能让均匀时长，具有价值呢？

我们可以设置置信区间，根据页面详R [ d细情况扫除页面运用时长大于 5 小时或 8W ^ U P 小时的用户，然后再来看整个页面的均7 h D匀访问时长，或许是凭仗柱状图，查看时长的全体分布和趋势。

数据运用

其时剖f * | f析模型首要分为工作剖析，页面剖析转化剖析和用户剖析四大块，内部还分成了 10 几种小的政策；还在自定义设置中供应了帮忙政策建立的东西；

工作剖析是用户行为剖析的基础也是最常用的功用，次数、分布、间隔，通过工作剖析可以创建各种剖析报表。页面根据各个页面的行为数据，针对性的优化着陆页的页面布局，增加着陆页的访问吸引力。热力求剖析，通过将用户行为进l 9 2 q x ) | I u行可视化展示，帮忙我们深入剖析用户对内容及功用的注意力。
转化剖析是用户行为剖析中最重要的剖析模型，通过转化剖析可以J n N b找出用户行为的转化途径和! w ] P漏斗，进步[ Q : G * z h途径的全体转化率。从触达用户到用户完j # P }成转化的整个进$ h n | @ 4 V M程中都存在转化率。
用户剖析可以很好的帮忙我们承s ! 1 M e认产品的政策用户群，用户的行为习惯，掌握用户的活跃和留存特征，通过用户分群可以完结精细化的用户运营。