CN111901192B - 一种页面访问数据的统计方法及装置 - Google Patents

Abstract

本申请涉及计算机技术领域，尤其涉及一种页面访问数据的统计方法及装置，获取页面应用上报的页面的前端路由切换数据，其中，所述前端路由切换数据是所述页面应用基于所述页面中集成的监听代码，通过监听预设的表征前端路由切换对应的事件时采集到的；根据所述前端路由切换数据，统计所述页面的访问信息，这样，不需要破坏页面原有的业务逻辑，只需加载统一的监听代码即可，提升了监听代码可移植性，并且根据前端路由切换数据来统计访问信息，提高了访问数据统计的准确性。

Description

一种页面访问数据的统计方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面访问数据的统计方法及装置。

背景技术

传统网页，每一个超文本标记语言(HyperText Markup Language，HTML)页面对应一个视图，每一次视图的访问会加载一次真实HTML页面，而目前大部分前端应用的网页都是基于MVVM框架实现，通常只需加载单个HTML页面，在浏览过程中，HTML页面几乎没有发生过重新加载，因此，传统采用HTML请求对应的后端路由来统计访问情况的方法，并不符合真实的访问情况，准确性较低，而相关技术中还没有非常有效的统计方法。

发明内容

本申请实施例提供一种页面访问数据的统计方法及装置，以提高访问信息统计的准确性。

本申请实施例提供的具体技术方案如下：

本申请一个实施例中提供了一种页面访问数据的统计方法，包括：

获取页面应用上报的页面的前端路由切换数据，其中，所述前端路由切换数据是所述页面应用基于所述页面中集成的监听代码，通过监听预设的表征前端路由切换对应的事件时采集到的；

根据所述前端路由切换数据，统计所述页面的访问信息。

本申请另一个实施例中提供了一种页面访问数据的统计装置，包括：

获取模块，用于获取页面应用上报的页面的前端路由切换数据，其中，所述前端路由切换数据是所述页面应用基于所述页面中集成的监听代码，通过监听预设的表征前端路由切换对应的事件时采集到的；

统计模块，用于根据所述前端路由切换数据，统计所述页面的访问信息。

本申请另一个实施例中提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述任一种页面访问数据的统计方法的步骤。

本申请另一个实施例中提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一种页面访问数据的统计方法的步骤。

本申请实施例中，页面应用可以基于页面中集成的监听代码，通过监听预设的表征前端路由切换对应的事件时采集前端路由切换数据，并将前端路由切换数据上报给服务器，服务器获取页面应用上报的页面的前端路由切换数据后，根据前端路由切换数据，统计页面的访问信息，这样，页面应用只需要加载统一的监听代码，进行一次初始化即可实现前端路由切换数据的监听，不需要破坏原有的业务逻辑，监听和上报可以很容易移植到任何需要上报的页面中，可移植性更好，也降低了维护成本，并且根据前端路由切换数据来统计访问信息，相比于传统的统计方法更加接近用户的真实浏览情况，提高了访问数据统计的准确性。

附图说明

图1为本申请实施例中页面访问数据的统计方法的应用架构示意图；

图2为本申请实施例中一种页面访问数据的统计方法流程图；

图3为本申请实施例中前端路由切换数据采集场景示意图；

图4为本申请实施例中的页面访问数据的统计方法整体逻辑示意图；

图5为本申请实施例中统计结果展示界面示意图；

图6为本申请实施例中一种页面访问数据的统计装置结构示意图；

图7为本申请实施例中电子设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，并不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

为便于对本申请实施例的理解，下面先对几个概念进行简单介绍：

传统万维网(Web)网页：在个人计算机(personal computer，PC)时代的网页，每一个HTML页面对应一个视图，用户视图的切换由超文本链接的跳转来实现，每一次视图的访问会加载一次真实HTML。

单页Web应用(single page web application，SPA)：SPA是一种特殊的Web应用，它将所有的活动局限于一个Web页面中，一般基于模型-视图-视图模型(Model-View-ViewModel，MVVM)框架实现，通常只加载单个HTML页面，仅在Web页面初始化时加载相应的HTML、JavaScript、CSS，一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，在用户浏览的过程中，HTML几乎没有发生过重新加载，而是通过JavaScript相关逻辑更改MVVM的数据驱动视图的更新，从而实现用户与界面(User Interface，UI)的交互，例如，本申请实施例中的页面应用主要是表示SPA应用，统计SPA应用的访问信息。

MVVM框架：本质上就是MVC的改进版，MVVM就是将其中的视图(View)的状态和行为抽象化，将视图UI和业务逻辑分开，目前大部分的前端应用都是基于MVVM框架实现的。

路由：本申请实施例中路由主要分为后端路由和前端路由，访问不同统一资源定位符(Uniform Resource Locator，URL)的页面时，访问的URL会映射到相应的函数里(这个函数是广义的，可以是前端的函数也可以是后端的函数)，然后由相应的函数来决定返回给这个URL什么东西，路由就是在做一个匹配的工作，前端路由不需要请求服务器而是通过JS改变页面，后端路由需要请求服务器来改变页面。

后端路由：又称之为服务器端路由，对应超文本传输协议(HyperText TransferProtocol，HTTP)请求，当接收到页面应用发送的HTTP请求，后端服务器就会根据HTTP请求中所请求的URL，找到相应的映射函数，然后执行该映射函数，并将该映射函数的返回值发送给页面应用。

前端路由：相对于后端路由而言，前端路由的变化，并没有发生HTTP请求，而是利用浏览器的相关技术，例如location hash、History API等技术来实现URL与视图之间的绑定关系，即页面跳转的URL规则匹配由前端来控制，在SPA应用中，通常一个应用对应一个后端路由，而对应了无数个前端路由。需要说明的是，只要在浏览器地址栏输入URL再回车，是一定会去后端服务器请求一次的，对应的就是后端路由，而如果是在页面里通过点击按钮等操作，通过前端路由相关技术实现视图的更新，是不会向后端服务器请求的，例如location hash模式利用的是浏览器不会对URL中“#”号后面的路径对服务器端发起路由请求，History API模式为针对不带“#”号的路由，通过History API可以实现前端路由的切换。

Phantom JS：Phantom JS是一个基于浏览器引擎(webkit)的JavaScript API，使用QtWebKit作为核心浏览器的功能，使用webkit来编译解释执行JavaScript代码，任何用户想要在基于webkit浏览器做的事情，它都能做到，它不仅是个隐形的浏览器，提供了例如层叠样式表(Cascading Style Sheets，CSS)选择器、支持Web标准、文档对象模型(Document Object Model，DOM)操作、JSON、HTML5、画布(Canvas)、可缩放矢量图形(Scalable Vector Graphics，SVG)等，同时也提供了处理文件输入/输出(Input/Output，I/O)的操作，从而使得用户可以向操作系统读写文件等，PhantomJS的用处非常广泛，例如应用于网络监测、网页截屏、无需浏览器的Web测试、页面访问自动化等。

页面地址：网页地址的后缀为.html等，本申请实施例中的页面即表示网页，网页是构成网站的基本元素，是承载各种网站应用的平台，也可以说网站就是由网页组成的，若网站只有域名和虚拟主机而没有制作任何网页的话，用户仍是无法访问该网站的。

网站地址：其后缀为.cn、.com、.edu、.top、.gov等，另外在本申请实施例中使用页面的URL表示页面地址，并且使用网站的URL或称为域名来表示网站地址。

传统网页，每一个HTML页面对应一个视图，每一次视图的访问会加载一次真实HTML页面，而目前大部分前端应用的网页都是基于MVVM框架实现，通常只需加载单个HTML页面，在浏览过程中，HTML页面几乎没有发生过重新加载，相对于后端路由而言，前端路由的变化其实并没有发生HTML请求，而是利用浏览器相关技术来实现视图切换，因此，传统采用HTML请求对应的后端路由来统计访问情况的方法，并不符合真实的访问情况，甚至相差至少一个数量级，准确性较低。

另外相关技术根据采集方式的不同还提供了几种网站访问数据的统计方式：1)接入层路由日志分析：在后端服务器前置一个接入层模块，通过定时任务对该接入层模块的接入(access)日志中请求数的统计来确定页面访问量(Page View，pv)。2)前端页面加载时上报：在html代码中埋入script标签，当浏览器刷新，页面发生重新加载时，自动执行pv上报，后续按照URL和pv上报数进行访问计数。3)业务自定义上报：监控方提供监控SDK，被监控的页面在所需要上报的地方调用该监控SDK进行上报，后续同样按照URL和pv上报数进行访问统计。

但是上述几种方式存在以下缺点：1)接入层路由日志分析和真实的访问情况的偏差最大，只能统计到发生到服务器端的请求，无法统计到前端html在浏览器端缓存之后的请求；2)第二种方式，每次html重新加载之后上报弥补了因浏览器端缓存造成的统计不正确问题，并且在PC时代该方案具有很好的容错能力，但是针对基于MVVM框架的SPA应用，用户视图的切换几乎不会刷新页面，其准确性就非常低，与真实的访问数据差异较大，第一种和第二种方式均无法统计到页面不刷新的视图切换情况；3)第三种方式，将上报的时机下放到了具体的业务逻辑中，在可能造成视图切换的逻辑上下文中调用SDK进行上报，可以一定程度统计到页面不刷新的视图切换情况，但是该方案具有很强的代码侵入性，上报逻辑和业务逻辑混杂在一起，维护成本较高，可移植性差，统计也容易出错。

因此，为解决上述问题，本申请实施例中提供了一种页面访问数据的统计方法，页面应用基于页面中集成的监听代码，通过监听预设的表征前端路由切换对应的事件，采集前端路由切换数据，页面应用将前端路由切换数据上报给服务器，服务器获取页面应用上报的页面的前端路由切换数据后，可以根据前端路由切换数据，统计页面的访问信息，这样，通过监听前端路由的变化，采集前端路由切换数据，能够感知用户视图的切换变化，相比于传统的统计方法更加接近用户的真实浏览情况，提高了访问数据统计的准确性，并且不需要在具体的业务中植入侵入式代码，待监控页面只需加载统一的监听代码，进行一次初始化即可，通过监听前端路由切换对应的事件来采集前端路由切换数据，不需要破坏原有的业务逻辑，监听和上报可以很容易移植到任何需要上报的页面中，可移植性更好，也降低了维护成本，统计更加准确。

参阅图1所示，为本申请实施例中页面访问数据的统计方法的应用架构示意图，包括终端100、服务器200。

终端100可以是智能手机、平板电脑、便携式个人计算机等任何智能设备，终端100上可以安装有各种应用程序和页面应用，页面应用例如浏览器、各种网站平台等，本申请实施例中的页面应用主要是指SPA应用，用户通过终端100中安装的页面应用可以浏览各网站平台的页面。

服务器200能够为终端100提供各种网络服务，对于不同的页面应用，服务器200可以认为是相应的后台服务器，例如，某页面应用需要监控其页面访问情况，则可以接入本申请实施例中的服务器200，并从服务器200获取监听代码，插入到现有的监控软件开发工具包(Software Development Kit，SDK)并加载到目标页面进行数据采集和上报，监听各表征前端路由切换对应的事件，进而采集到前端路由切换数据，并上报给服务器200，服务器200就可以根据前端路由切换数据，统计页面的访问信息。又例如，本申请实施例中还可以支持从服务器200请求查询统计结果，进而可以获知用户真实的访问和对页面的反馈情况，以便进行后续的服务升级和相关处理等。

其中，服务器200可以是一台服务器、若干台服务器组成的服务器集群或云计算中心。

终端100与服务器200之间可以通过互联网相连，实现相互之间的通信。可选地，上述的互联网使用标准通信技术、协议，或者两者结合。互联网通常为因特网、但也可以是任何网络，包括但不限于局域网(Local Area Network，LAN)、城域网(Metropolitan AreaNetwork，MAN)、广域网(Wide Area Network，WAN)、移动、有线或者无线网络、专用网络或者虚拟专用网络的任何组合。在一些实施例中，使用包括超文本标记语言(Hyper Text Mark-up Language，HTML)、可扩展标记语言(Extensible Markup Language，XML)等的技术和/或格式来代表通过网络交换的数据。此外还可以使用诸如安全套接字层(Secure SocketLayer，SSL)、传输层安全(Transport Layer Security，TLS)、虚拟专用网络(VirtualPrivate Network，VPN)、网际协议安全(Internet Protocol Security，IPsec)等常规加密技术来加密所有或者一些链路。在另一些实施例中，还可以使用定制和/或专用数据通信技术取代或者补充上述数据通信技术。

需要说明的是，本申请实施例中的页面访问数据的统计方法主要是由服务器200执行，服务器200获取页面应用监听并上报的页面的前端路由切换数据，并根据前端路由切换数据，统计页面的访问信息，另外服务器200还可以提供统计结果展示和查询功能，并且服务器200还可以将统计结果放回给页面应用。

值得说明的是，本申请实施例中的应用架构图是为了更加清楚地说明本申请实施例中的技术方案，并不构成对本申请实施例提供的技术方案的限制，对于其它的应用架构和业务应用，本申请实施例提供的技术方案对于类似的问题，同样适用，本申请各个实施例中，以页面访问数据的统计方法应用于图1所示的应用架构为例进行示意性说明。

基于上述实施例，参阅图2所示，为本申请实施例中一种页面访问数据的统计方法流程图，应用于服务器，具体该方法包括：

步骤200：获取页面应用上报的页面的前端路由切换数据，其中，前端路由切换数据是页面应用基于页面中集成的监听代码，通过监听预设的表征前端路由切换对应的事件时采集到的。

本申请实施例中，不需要在具体的业务中植入侵入式代码，可以通过监控SDK插件的开发方式，将监听代码插入到现有的监控SDK并投放到目标页面进行采集和上报，路由的监听和上报都是自动进行的，页面只需在初始化时加载监听代码即可，进而可以基于该监听代码，监听表征前端路由切换对应的事件，实现前端路由切换数据的采集，这样，使得监听代码具有更高的可移植性，页面中只需要集成一段预设的监听代码，即可以实现对于所有前端路由切换，即视图切换情况的采集，不需要其它的代码，也不用破坏原有的业务逻辑。

其中，表征前端路由切换对应的事件，具体可以根据所采用的浏览器技术来设定，具体本申请实施例中提供了几种可能的应用场景：

1)页面加载所对应的加载事件。

例如，在每次页面加载时，确定为发生了前端路由切换，该应用场景对应采集到的前端路由切换数据即为传统的PV次数，也可以理解为通过请求后端服务器进行页面切换的次数。

2)页面地址中锚点哈希值变化所对应的哈希值变化事件。

3)在对页面进行第一操作时所触发的实现前端路由切换的浏览器技术中的关联事件。

4)在对页面进行第二操作时所触发的自定义全局事件，其中，第二操作未触发浏览器技术中的关联事件。

进而本申请实施例中，可以并行监听上述四种场景对应的关联事件，采集这四种场景对应的原生特征，有切换对应的技术特征即说明发生了前端路由切换，进而将采集到的前端路由切换数据上报给服务器，前端路由切换数据中可以包括引起前端路由切换的类型和切换数据(也可以理解为变化值)，其中类型即是告知服务器是由哪种场景引起的路由变化，切换数据即是发生路由切换的详细信息。

并且，本申请实施例中，页面应用采集到前端路由切换数据后，可以进行编码，并缓存到上报队列中，进而在确定满足上报条件时，将上报队列中的前端路由切换数据发送给服务器，具体执行步骤200中获取页面应用上报的页面的前端路由切换数据，包括：获取页面应用在确定满足上报条件时，通过上报队列上报的页面的前端路由切换数据。

其中，上报队列中用于缓存前端路由切换数据，并且上报条件可以预先进行设置，例如上报条件可以为以下任意一种：1)上报队列的队列长度不小于长度阈值；2)页面重新加载；3)页面异常退出。

也就是说，页面应用可以在确定上报队列的长度达到一定长度时，将上报队列中的前端路由切换数据上报给服务器，而不需要实时上报，可以节省资源，提高效率，并且在一些特殊情况下，例如，页面重新加载或页面异常退出时，则可以立即上报，可以确保前端路由切换数据及时上报，减少数据丢失。

步骤210：根据前端路由切换数据，统计页面的访问信息。

进一步地，为提高统计准确性，本申请实施例中还可以对前端路由切换数据进行过滤，则在执行步骤200获取页面应用上报的页面的前端路由切换数据之后，并在执行步骤210之前，本申请实施例中还可以对不符合要求的前端路由切换数据进行过滤，提供了几种可能的实施方式：1)过滤掉数据校验不通过的前端路由切换数据。

例如，进行数据校验，可以为校验数据是否完整、数据取值是否合理等，本申请实施例中并不进行限制。

2)过滤掉不属于白名单中的网站对应的页面的前端路由切换数据，其中，白名单中包括已接入的具有授权权限的网站。

本申请实施例中，还可以支持站点接入和权限申请的管理功能，例如某网站想要对其访问信息进行统计，可以申请接入本申请实施例中的服务器平台，接入成功后，即获得授权权限，服务器就可以支持对该网站对应的页面的前端路由切换数据进行统计，否则，服务器可以认为该网站为异常网站，过滤该网站对应的页面的前端路由切换数据，即不进行统计分析。另外，本申请实施例中还可以提供上报白名单的管理功能，白名单中包括具有授权权限的网站，即可以通过白名单方式来管理各网站，其实现效果和站点接入、权限申请类似，即可以只对白名单中的网站对应的前端路由切换数据进行统计分析，而过滤掉非白名单的网站对应的前端路由切换数据。

进而过滤后，就可以对前端路由切换数据进行统计分析，前端路由切换数据中至少包括路由标识，则具体执行步骤210，可以包括以下几方面：

第一方面：按照路由标识，根据前端路由切换数据，分别统计各路由标识在各预设统计周期内对应的访问次数。

其中，路由标识由终端生成并上报给服务器的，路由标识可以标识不同的视图，可以基于此还原出对应的视图。

例如，本申请实施例中可以按照路由标识进行归类统计，可以按照一定统计周期分别进行统计，例如按十分钟、按天统计等，并不进行限制，这样可以统计到用户路由切换发生的次数，更加符合用户真实访问情况。

第二方面：按照已接入的网站的网站地址，根据前端路由切换数据，分别统计各网站在各预设统计周期内对应的访问次数。

即还可以按照接入网站地址或接入域名进行分组统计，也可以按照十分钟、按天等预设统计周期分别进行统计，进而能够统计到各个网站对应的访问情况。

这样，统计完成后，可以将统计结果存储到数据库中，以便后续查询或展示时能够直接从数据库中获取统计结果。

进一步地，本申请实施例中还可以根据统计到的路由标识，抓取对应的视图并重建路由和视图的关系，具体本申请实施例中提供了一种可能的实施方式：按照预设抓取周期，获取前端路由切换数据中的各路由标识，并分别生成各路由标识对应的页面的视图；分别将生成的各页面的视图、路由标识和生成时间关联存储。

例如，本申请实施例中可以对统计并存入数据库的路由标识进行快照抓取，其中，预设抓取周期例如为1天，并不进行限制，生成各路由标识对应的用户访问的实际视图，并将视图以图片形式存储到数据库中，并且可以将路由标识和生成时间作为文件名保存。

其中，对于生成各路由标识对应的视图的方式，本申请实施例中并不进行限制，例如，视图抓取时，利用NodeJS调用PhantomJS进行命令行下页面访问的能力，以子进程的形式调用对应的PhantomJS脚本，在PhantomJS脚本中预先设置抓取的行为，并通过读取子进程传递的参数，抓取对应的页面，并执行注入的JS，最终将视图用PhantomJS内置的截图功能保存下来，从而获得该路由标识对应的视图，即通过模仿用户行为还原出针对该路由标识下用户实际访问的视图。

基于上述实施例，本申请实施例中可以根据前端路由切换数据，获得访问次数等统计结果，并且还可以还原视图，实现视图的快照抓取，进一步地，服务器还可以将统计结果进行归类展示，并支持各种条件的检索，对于点击被访问的视图进行还原等，具体本申请实施例中提供了几种实施方式：

第一种实施方式：接收到网站访问次数查询请求，读取针对网站的访问次数，并进行展示。

第二种实施方式：接收到视图统计查询请求，根据路由标识，获取路由标识对应的视图，并展示获取到的视图。

当然还可以支持其它的查看或查询功能，本申请实施例中并不进行限制。

本申请实施例中，针对SPA应用的视图刷新的特性，采用前端路由监听的技术手段，将监听代码投放到页面进行采集和上报，路由的监听和上报都是自动进行的，而不是在具体业务中植入侵入式代码，所有页面都只需要加载统一的监听代码，进行一次初始化即可，提高了监听代码的可移植性，也降低了维护成本，进而基于页面中集成的监听代码，通过监听表征前端路由切换对应的事件，实现前端路由切换数据的采集，将前端路由切换数据上报给服务器，服务器获取上报的页面的前端路由切换数据后，可以根据前端路由切换数据，统计页面的访问信息，这样，由于基于前端路由切换数据来统计访问信息，还可以按照接入URL和前端路由而非单纯地按照URL进行访问信息的分组统计，并且前端路由切换数据可以反映用户真实的视图访问情况，能够准确感知到用户视图的切换变化，提高了统计的准确性。

基于上述实施例，下面采用具体应用场景对页面的前端路由切换数据的监听和采集过程进行具体说明，前端路由切换数据的监听和采集主要由终端中的页面应用执行，页面应用采集到后再上报给服务器，以前端路由切换场景分为以下四大类为例：页面载入场景、锚点变化场景、history操作场景，以及由PushState和ReplaceState构成的其它场景，参阅图3所示，为本申请实施例中前端路由切换数据采集场景示意图，针对每一个场景，页面应用的采集器中对应的模块，根据对应的技术特征实现对应场景的前端路由切换数据的采集，在页面加载完成之后，四种技术手段并行监听，有对应的前端路由切换技术特征便会触发命中逻辑，基于图3中的四种场景分别进行说明。

第一种场景：页面载入场景。

本申请实施例中，基于在页面加载时，例如用户首次打开某网站的页面，这时前端路由不需要请求服务器而是通过JS技术加载页面，因此，采集页面加载对应的前端路由切换数据时，即可以通过监听JS直接加载事件，采集器采集JS直接加载执行的次数，该场景由于是页面加载场景，即视图切换时加载一次真实的HTML，采集到的数据即对应的是传统的PV数据。

也就是说，针对第一种场景，可以监听页面加载所对应的加载事件来采集前端路由切换数据，例如，加载事件为JS加载事件，则采集到的前端路由切换数据为JS事件执行的次数。

第二种场景：锚点变化场景。

实际中，页面地址的统一资源定位符(Uniform Resource Locator，URL)中“#”后面的字符称为锚，锚的变化会对应不同的视图，由于锚的变化引起的页面地址的变化不会向服务器发送请求，而是通过页面技术，例如location哈希(hash)来实现视图切换，因此，本申请实施例中的第二种场景，主要是针对通过URL的hash值来进行路由切换和路由信息的存储的技术实现情况。

本申请实施例中采集锚点变化场景的前端路由切换数据，主要是通过监听页面地址中锚点哈希值变化所对应的哈希值变化事件，具体实现时，由于“#”后面的字符，其实是location对象的hash属性的值，真实的访问情况下若hash改变了URL，就会触发hashchange事件，因此，该场景下的哈希值变化事件为hashchange事件，只需要监听hashchange事件，就能捕获到通过hash改变URL的行为。当hash值改变时，输出一个hashchangeEvent，例如，该hashchangeEvent的具体示例为：

{isTrusted:true,oldURL:"http://localhost:3000/",newURL:"http://localhost:3000/#teg",type:"hashchange".....}

其中，oldURL是切换前的URL：“http://localhost:3000/”，newURL为切换后的URL："http://localhost:3000/#teg"，可知，页面地址中“#”后面的字符发生了变化，触发了hashchange事件，监听到hashchange事件时，通过对于URL中hash的获取，就截获到了前端路由切换数据。

第三种场景：history操作场景。

本申请实施例中，针对前端路由切换通过浏览器相关技术实现的场景，当对页面进行操作来切换视图时，会触发该浏览器技术中的关联事件，例如，对于通过History API来实现的前端路由方案，可以通过监听popstate事件来截获前端路由切换数据，即页面技术为History API时，关联事件为popstate事件，第一操作表示会触发popstate事件的操作，这样，监听在对页面进行第一操作时所触发的实现前端路由切换的浏览器技术中的关联事件，可以获取相关的前端路由切换数据。

例如，基于History API技术，History中的操作包括History.back()、History.forward()、History.go()等，其中，History.back()表示后退操作，History.forward()表示前进操作，History.go()表示前进或后退指定数量历史记录，History.back()、History.forward()、History.go()是会触发popstate事件的，例如，popstate事件的具体示例为：

PopStateEvent{isTrusted:true,state:null,type:"popstate",target:Window,currentTarget:Window,…}。

其中，target和currentTarget中保存有前端路由切换的详细信息，通过对于这两个子对象数据的提取和组装就能获得最终需要的前端切换数据。

第四种场景：其它场景。

本申请实施例中，第四种场景是在第三种场景的基础上，针对不会触发popstate事件的操作，例如主要是表示由PushState和ReplaceState构成的其它场景，History中的操作除了History.back()、History.forward()、History.go()，还包括history.pushState(state,title,utl)、history.replaceState()，其中，history.pushState(state,title,utl)表示在页面中创建一个history实体，直接添加到历史记录中的操作，state表示存储一个对象，可以添加相关信息，可以使用history.state读取其中的内容，title表示历史记录的标题，URL表示创建的历史记录的链接，进行历史记录操作时会跳转到该链接，history.replaceState()表示修改当前的history实体的操作。

history.pushState(state,title,utl)、history.replaceState()也是常用来实现前端路由的技术手段，但是这两个方法不会触发popstate事件，因此，为了统计到这两种方法对应的前端路由切换数据，自定义了全局(Global)事件，通过全局事件代理的方式来实现这类前端路由切换数据的采集。

具体地，在加载完前置JS的情况下，对于pushState和replaceState进行了重写，并注入了两个全局事件到原事件函数内部，当pushState和replaceState被调用时，同时还会触发对应注册的全局事件，在全局事件中，将history的信息发送给全局监听函数进行信息的处理，从而实现了这类前端路由切换的监听和前端路由切换数据的采集。

这样，监听在对页面进行第二操作时所触发的自定义全局事件，其中，第二操作未触发浏览器技术中的关联事件，即第二操作表示不会触发popstate事件的操作，这时可以通过监听对应自定义全局事件，来采集相关的前端路由切换数据。

需要说明的是，上述四种场景是预设的几种发生前端路由切换所可能涉及到的场景和事件，当然，本申请实施例中并不仅限于上述几种场景和事件，监听方法也不进行限制，其它能够监听到前端路由变化或者真实视图变化的方法，均可以适用于本申请实施例中的页面访问数据的统计方法，实现访问信息的准确统计。

这样，本申请实施例中，通过监听表征前端路由切换对应的事件，来采集前端路由切换数据，如图3所示，采集到前端路由切换数据后，可以将前端路由切换数据发送给编码器，编码器进行编码后，可以通过本地存储的方式缓存到上报队列中，进而上报模块在确定满足上报条件时，将上报队列中编码数据合并发送到服务器，由于前端路由切换数据更能反映用户的真实浏览情况，进而根据前端路由切换数据，统计的访问信息也更加准确。

基于上述实施例，下面采用具体应用场景，对本申请实施例中的页面访问数据的统计方法整体逻辑进行说明，参阅图4所示，为本申请实施例中的页面访问数据的统计方法整体逻辑示意图。

如图4所示，本申请实施例中的页面访问数据的统计方法的整体实现逻辑主要可以分为三条链路，分别为上报链路、快照链路和展示逻辑链路，其中，上报链路对应上报日志的处理，快照链路对应SPA应用视图的离线抓取，展示逻辑链路对应最终效果的呈现，下面分为三方面分别介绍这三条链路。

第一方面：上报链路。

如图4所示，上报链路中描述了页面应用执行逻辑和服务器执行逻辑，页面应用主要负责采集前端路由切换数据，并将采集到的前端路由切换数据按照预设数据格式进行编码、压缩，先通过编码器进行统一的编码格式化，可以解决各个监听到的前端路由切换数据的格式差异化，编码后缓存到上报队列中，进而通过上报模块将上报队列中的页面的前端路由切换数据，上报给服务器。

其中，上报模块会定时扫描上报队列的队列长度，在队列长度达到一定规模后，将上报队列中的各个前端路由切换数据上报给服务器，另外在一些特殊情况下，例如，页面重新加载、页面异常退出等，这时会立即扫描并将上报队列中的残余数据上报给服务器，可以确保数据及时上报，减少数据丢失。

进而服务器接收到页面应用上报的前端路由切换数据后，相应地会进行反向解码处理，解码获取前端路由切换数据，并且为了进一步提高统计准确性和便于统计管理，还会对前端路由切换数据进行过滤，过滤掉一些不属于白名单的前端路由切换数据以及一些异常前端路由切换数据，进而过滤后，根据过滤后的前端路由切换数据统计访问信息，并将统计结果存储到数据库。

第二方面：快照链路。

快照链路主要是实现视图的抓取，由服务器端执行，快照链路可以采用定时任务的方式，按照预设抓取周期，对于已经入库的路由标识(key)进行快照抓取，分别生成各路由标识对应的视图，并将存储到对应的数据库中，例如按照路由key+生成时间的方式作为文件名存储。

第三方面：展示逻辑链路。

展示逻辑链路也是由服务器执行，在服务器管理后端，根据统计结果，可以按照被监控的网站地址进行归类展示，并可以支持各种条件的检索和查询，同时还可以对于点击被访问的视图进行还原，如图4所示，可以提供访问次数统计查看，视图访问统计查看，点击统计查看等功能。

其中，1)访问次数统计查看：本申请实施例中在传统的PV、独立访客(UniqueVisitor，UV)的基础上还可以增加路由页面访问量(route Page View，RPV)和路由独立访客(route Unique Visitor，RUV)指标，这些指标表示基于路由切换的页面访问量和独立访客量，可以反映用户真实的访问情况，通过PV和RPV可以获得真实视图切换次数，即针对网站的访问次数，对于访问次数或其它指标的查看，可以直接从访问统计库中读取，进而进行展示。

其中，读取访问次数的指标时，可以在接收到网站访问次数查询请求时执行，例如用户在服务器提供的界面中输入待查看的网站的网站地址，即发送了查询请求，进而展示查询到的访问次数，并且对于访问次数的查看，本申请实施例中可以支持按天，或者按实时(例如十分钟)查看，并不进行限制。

2)视图访问统计查看：查看上报链路中入库的以路由key作为分组的数据，同时根据路由key和文件名的对应原则和抓取链路中抓取到的视图建立关联，以图片的形式进行呈现。

3)点击统计查看：本申请实施例中，还可以分析用户的操作行为，将用户操作行为与抓取到的视图进行关联，形成视图变化的点击流，具体地，将前端路由切换数据与对应的点击发生事件进行分析，并对应到实际操作中视图切换时发生到点击交互，进而形成点击流，该点击流弥补了传统点击流只能记录超文本链接点击的局限性，实现了更准确的点击定位。

例如，通过视图抓取，获得发生路由切换的各个视图，并可以确定各个视图发生切换时的时间，并且还可以监控并获取用户的操作行为，根据操作时间以及视图发生切换的时间，将用户操作行为与视图进行对应，这样，可以获知从一个视图切换到另一个视图时用户所执行的操作行为。

本申请实施例中，页面应用上报采集到的前端路由切换数据，进而服务器根据前端路由切换数据进行统计分析，提高了访问统计的准确性，并且服务器还可以进行视图抓取，通过离线定时任务，根据统计到的路由标识来离线抓取对应的视图，并重建路由和视图的关系，并且还可以提供各种查看和查询需求，提升了统计效果。

基于上述实施例，下面从产品侧对服务器的展示逻辑链路中访问次数统计查看的界面示意进行说明，参阅图5所示，为本申请实施例中统计结果展示界面示意图。

如图5所示，本申请实施例中可以提供按照不同时间进行查看的功能，例如，在界面上输入时间2020-04-29，并点击“查询”按钮，服务器读取该时间对应的统计结果，并进行展示，图5中提供了四种统计指标的展示，包括UV、PV、RPV和RUV，其中，UV和RUV表示访问用户的数量，访问用户可以用IP地址或Cookie表征，可以反映该网站有多少访问用户，PV和RPV表示页面浏览量或点击量，PV即为传统的页面浏览量统计情况，RPV用于表示前端路由切换的情况，从图5中可知，RPV的数据统计量是传统PV统计量的6倍，则用户真实路由切换发生的次数为：PV+RPV，为PV的7倍，也就是说，在SPA应用的统计中，相关方案只统计了用户真实视图访问量的1/7，而本申请实施例中通过前端路由切换数据的统计，可以统计到用户真实的访问数据，更加接近用户的真实浏览情况，并且从图5中可知UV为2552，对应RUV的具体取值也可以统计出，只是在图5中未示出。

另外，如图5所示，本申请实施例中还可以支持以不同的展示方式来展示查询结果，例如数字展示或曲线图展示，并且还可以展示变化率情况，例如，RPV的取值同比增加595.92％，从曲线图中还可以查看到各个时间段的统计结果，可以使得用户更加清楚了解到访问信息。

基于同一发明构思，本申请实施例中还提供了一种页面访问数据的统计装置，该页面访问数据的统计装置例如可以是前述实施例中的服务器，该页面访问数据的统计装置可以是硬件结构、软件模块、或硬件结构加软件模块。基于上述实施例，参阅图6所示，本申请实施例中一种页面访问数据的统计装置，具体包括：

获取模块60，用于获取页面应用上报的页面的前端路由切换数据，其中，前端路由切换数据是页面应用基于页面中集成的监听代码，通过监听预设的表征前端路由切换对应的事件时采集到的；

统计模块61，用于根据前端路由切换数据，统计页面的访问信息。

可选的，预设的表征前端路由切换对应的事件，包括以下任意一种或组合：

页面加载所对应的加载事件；

页面地址中锚点哈希值变化所对应的哈希值变化事件；

在对页面进行第一操作时所触发的实现前端路由切换的浏览器技术中的关联事件；

在对页面进行第二操作时所触发的自定义全局事件，其中，第二操作未触发浏览器技术中的关联事件。

可选的，获取页面应用上报的页面的前端路由切换数据时，获取模块60用于：

获取页面应用在确定满足上报条件时，通过上报队列上报的页面的前端路由切换数据；

其中，上报队列用于缓存前端路由切换数据，上报条件为以下任意一种：上报队列的队列长度不小于长度阈值、页面重新加载、页面异常退出。

可选的，获取页面应用上报的页面的前端路由切换数据之后，在根据前端路由切换数据，统计页面的访问信息之前，进一步包括，过滤模块62，用于：

过滤掉数据校验不通过的前端路由切换数据；

过滤掉不属于白名单中的网站对应的页面的前端路由切换数据，其中，白名单中包括已接入的具有授权权限的网站。

可选的，前端路由切换数据中至少包括路由标识，则根据前端路由切换数据，统计页面的访问信息时，统计模块61用于：

按照路由标识，根据前端路由切换数据，分别统计各路由标识在各预设统计周期内对应的访问次数；

按照已接入的网站的网站地址，根据前端路由切换数据，分别统计各网站在各预设统计周期内对应的访问次数。

可选的，进一步包括，视图抓取模块63，用于：

按照预设抓取周期，获取前端路由切换数据中的各路由标识，并分别生成各路由标识对应的页面的视图；

分别将生成的各页面的视图、路由标识和生成时间关联存储。

可选的，进一步包括，展示模块64，用于：

接收到网站访问次数查询请求，读取针对网站的访问次数，并进行展示；

接收到视图统计查询请求，根据路由标识，获取路由标识对应的视图，并展示获取到的视图。

基于上述实施例，参阅图7所示为本申请实施例中电子设备的结构示意图。

本申请实施例提供了一种电子设备，该电子设备可以是前述实施例中的终端或服务器，该电子设备可以包括处理器710(Center Processing Unit，CPU)、存储器720、输入设备730和输出设备740等。

存储器720可以包括只读存储器(ROM)和随机存取存储器(RAM)，并向处理器710提供存储器720中存储的程序指令和数据。在本申请实施例中，存储器720可以用于存储本申请实施例中任一种页面访问数据的统计方法的程序。

处理器710通过调用存储器720存储的程序指令，处理器710用于按照获得的程序指令执行本申请实施例中任一种页面访问数据的统计方法。

基于上述实施例，本申请实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述任意方法实施例中的页面访问数据的统计方法。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请实施例进行各种改动和变型而不脱离本申请实施例的精神和范围。这样，倘若本申请实施例的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (9)

1.一种页面访问数据的统计方法，其特征在于，包括：

获取页面应用上报的页面的前端路由切换数据，其中，所述前端路由切换数据是所述页面应用基于所述页面中集成的监听代码，通过监听预设的表征前端路由切换对应的事件时采集到的；所述前端路由切换数据包括引起前端路由切换的类型和切换数据；

根据所述前端路由切换数据，统计所述页面的访问信息；

其中，所述预设的表征前端路由切换对应的事件，包括以下任意一种或组合：

页面加载所对应的加载事件；

页面地址中锚点哈希值变化所对应的哈希值变化事件；

在对页面进行第一操作时所触发的实现前端路由切换的浏览器技术中的关联事件；

在对页面进行第二操作时所触发的自定义全局事件，其中，所述第二操作未触发所述浏览器技术中的关联事件。

2.如权利要求1所述的方法，其特征在于，获取页面应用上报的页面的前端路由切换数据，包括：

获取页面应用在确定满足上报条件时，通过上报队列上报的页面的前端路由切换数据；

其中，所述上报队列用于缓存前端路由切换数据，所述上报条件为以下任意一种：所述上报队列的队列长度不小于长度阈值、所述页面重新加载、所述页面异常退出。

3.如权利要求1所述的方法，其特征在于，获取页面应用上报的页面的前端路由切换数据之后，在根据所述前端路由切换数据，统计所述页面的访问信息之前，进一步包括：

过滤掉数据校验不通过的前端路由切换数据；

过滤掉不属于白名单中的网站对应的页面的前端路由切换数据，其中，所述白名单中包括已接入的具有授权权限的网站。

4.如权利要求3所述的方法，其特征在于，所述前端路由切换数据中包括路由标识，则根据所述前端路由切换数据，统计所述页面的访问信息，包括：

按照所述路由标识，根据所述前端路由切换数据，分别统计各路由标识在各预设统计周期内对应的访问次数；

按照已接入的网站的网站地址，根据所述前端路由切换数据，分别统计各网站在各预设统计周期内对应的访问次数。

5.如权利要求4所述的方法，其特征在于，进一步包括：

按照预设抓取周期，获取所述前端路由切换数据中的各路由标识，并分别生成所述各路由标识对应的页面的视图；

分别将生成的各页面的视图、路由标识和生成时间关联存储。

6.如权利要求5所述的方法，其特征在于，进一步包括：

接收到网站访问次数查询请求，读取针对所述网站的访问次数，并进行展示；

接收到视图统计查询请求，根据路由标识，获取所述路由标识对应的视图，并展示获取到的视图。

7.一种页面访问数据的统计装置，其特征在于，包括：

获取模块，用于获取页面应用上报的页面的前端路由切换数据，其中，所述前端路由切换数据是所述页面应用基于所述页面中集成的监听代码，通过监听预设的表征前端路由切换对应的事件时采集到的；

统计模块，用于根据所述前端路由切换数据，统计所述页面的访问信息；

其中，所述预设的表征前端路由切换对应的事件，包括以下任意一种或组合：

页面加载所对应的加载事件；

页面地址中锚点哈希值变化所对应的哈希值变化事件；

在对页面进行第一操作时所触发的实现前端路由切换的浏览器技术中的关联事件；

在对页面进行第二操作时所触发的自定义全局事件，其中，所述第二操作未触发所述浏览器技术中的关联事件。

8.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-6任一项所述方法的步骤。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现权利要求1-6任一项所述方法的步骤。