一、背景

       前端埋点技术在在应用中经常采用的技术，尤其是流量较大的系统应用，显得尤为重要。采用前端埋点，旨在记录用户环境（操作系统、浏览器等），记录用户操作全链路行为，然后根据采集的数据，复现用户操作流程、操作数量、操作频率等，重新设计产品，提高用户体验，也可以作为定位修复漏洞场景复现的依据。相比于后端接口日志记录，前端埋点可覆盖没有http请求的用户操作，当前前端盛行的SPA模式，后端更难检测用户浏览情况。

      当前通用前端埋点设计方案中，大多根据session或页面path作为页面链路的key，且各上报数据都是全量，采用session或页面path作为key，很难真实复现用户操作，比如用户真实访问页面链路A->B->B->C,此时用户在页面B有刷新页面操作，path作为key，将不能覆盖这种刷新操作。每次全量发送数据，将给数据库带来更大的存储空间要求，但很多是重复数据。

        另外采用设备指纹唯一表示用户设备也是常见操作，我们无法使用js来标识一台电脑，需要从浏览器维度将其作为采集对象，即一个浏览器就是一个设备。那么web的变量存储就是我们需要解决的问题，常见的cookie、sessionStorage、localStorage都和域名强相关，不能一个网站一个设备指纹。

二、目的

       如上诉分析，当前常用session或path作为访问的key,不能全链路覆盖用户操作行为，且全量发送数据，带来流量浪费和数据库存储浪费，本方案将解决以上为题，全链路覆盖用户操作，能100%复现操作行为，并按需发送上报的数据，节省流量和存储空间。解决设备指纹存储问题，规避跨域带来的重复设备指纹。

三、技术方案

       核心是引入pageId概念，每个页面都将生成一个pageId,但相同页面pageId也不同，举个例子，第一次进入页面A，生成pageId为a1,刷新页面A或者进入页面B后再次进入页面A，此时pageId不再是a1,会生成另一个pageId，比如a2。每次PV上报的数据都将包含当前pageId、当前页面path上次pageId(prePageId)及上次页面path。 pageId将用以链路复现追踪的唯一依据，因任何时候的每个页面pageId都是唯一的，这样将不会存在相同页面key，对我们而言，每个页面都是独特唯一的。附属的path用以定位访问的是哪个页面，这样pageId链路追踪，path映射我们熟知的页面，就可以完整的刻画用户页面访问路径。

       pageId概念的另一个用处就是节约上报的流量及存储空间。进入页面时，我们将不仅仅上报当前pageId、当前页面path上次pageId(prePageId)及上次页面path，我们还将上报诸如用户信息、用户操作系统、所使用的浏览器、浏览器版本等其他附属信息，而针对用户在页面中其他操作的上报数据，以上的数据我们都不会重复上报，只需要上报pageId和类似特定事件数据即可，按需上报。此操作方式类似于数据库拆表，通过key将各数据关联组合使用。

  下面将以流程图方式，直观的展示执行流程。

引入共享设备指纹概念，通过 嵌套iframe加载一个静态页面，并在此iframe加载的域名上存储设备id。采用iframe中contentWindow通讯，并使用postmessage获取事件状态，从而达到跨域共享设备指纹。

pageId方案流程图

共享指纹方案图解

四、优点

       现有技术常见都以session或当前页面path作为key，无法覆盖页面刷新场景，比如页面A->B->B->C,无法确定在B页面刷新存在操作，且采用该方案key值不唯一，数据只能全量上报，造成流量、存储空间浪费。使用pageId方案，借鉴数据库建表方式，可以进行数据关联，减少上报的数据，节约流量及存储空间，更为重要的是两次访问页面B，key值都不同，可以看做页面的普通跳转，在通过path辅助，判断出是刷新操作。

       针对设备指纹，常用的实现方式存在跨域从而生成多个设备指纹，造成数据不对。通过该方案，借助中间域名，产生中间iframe，不同域名间共享设备指纹，还原真实场景，只存在一个设备。