CN108416038A - 一种单页应用的数据统计方法及装置 - Google Patents

Abstract

本申请提供了一种单页应用的数据统计方法及装置，方法包括：通过监听路由切换事件，确定单页应用页面的路由切换数据；将路由切换数据发送至服务器，以使服务器根据路由切换数据统计页面请求次数和独立用户访问数。在本申请中，通过以上方式可以实现对单页应用页面的页面请求次数和独立用户访问数的统计。

Description

一种单页应用的数据统计方法及装置

技术领域

本申请涉及计算机技术领域，特别涉及一种单页应用的数据统计方法及装置。

背景技术

单页应用(single-page application简称为SPA)是一种特殊的Web应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转，取而代之的是利用JavaScript动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA可以提供较为流畅的用户体验。

但是，目前大多数统计工具并不支持单页应用，无法统计单页应用中需要统计的信息(如，页面请求次数(PV)、独立用户访问数(UV)、用户有效点击等)，因此如何统计单页应用中需要统计的信息成为问题。

发明内容

为解决上述技术问题，本申请实施例提供一种单页应用的数据统计方法及装置，以达到实现对单页应用页面的页面请求次数和独立用户访问数的统计的目的，技术方案如下：

一种单页应用的数据统计方法，包括：

通过监听路由切换事件，确定单页应用页面的路由切换数据；

将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数。

优选的，所述将所述路由切换数据发送至服务器，包括：

将所述路由切换数据写入图片的src属性中；

发送所述图片至所述服务器。

优选的，所述方法还包括：

在所述单页应用页面的document.body元素上绑定点击事件；

确定所述单页应用页面中被点击的元素；

确定所述单页应用页面中被点击的元素的点击相关数据，作为点击统计数据；

发送所述点击操作数据至所述服务器，以使所述服务器对所述点击操作数据进行统计分析，得到所述单页应用页面的点击操作统计结果。

优选的，所述确定所述单页应用页面中被点击的元素的点击相关数据，包括：

判断所述单页应用页面中被点击的元素上是否存在data-ncf属性；

若存在，则获取所述data-ncf属性的值和所述被点击的元素的dataset对象，作为所述被点击的元素的点击相关数据；

若不存在，则确定所述被点击的元素的父元素；

判断所述被点击的元素的父元素上是否存在data-ncf属性；

若存在，则获取所述父元素的data-ncf属性的值和所述父元素的dataset对象，作为所述被点击的元素的点击相关数据。

优选的，所述方法还包括：

通过监听所述单页应用页面的关闭事件，获取所述单页应用页面的跳出操作信息；

存储所述跳出操作信息至本地存储器；

在所述单页应用页面再次被访问时，判断所述本地存储器中是否存在跳出操作信息；

若存在，则将所述本地存储器中的跳出操作信息发送至所述服务器，以使所述服务器对所述跳出操作信息进行统计分析，得到所述单页应用页面的关闭和跳出统计结果。

一种单页应用的数据统计装置，包括：

第一确定模块，用于通过监听路由切换事件，确定单页应用页面的路由切换数据；

第一发送模块，用于将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数。

优选的，所述第一发送模块包括：

写入单元，用于将所述路由切换数据写入图片的src属性中；

发送单元，用于发送所述图片至所述服务器。

优选的，所述装置还包括：

绑定模块，用于在所述单页应用页面的document.body元素上绑定点击事件；

第二确定模块，用于确定所述单页应用页面中被点击的元素；

第三确定模块，用于确定所述单页应用页面中被点击的元素的点击相关数据，作为点击统计数据；

第二发送模块，用于发送所述点击操作数据至所述服务器，以使所述服务器对所述点击操作数据进行统计分析，得到所述单页应用页面的点击操作统计结果。

优选的，所述第三确定模块包括：

第一判断单元，用于判断所述单页应用页面中被点击的元素上是否存在data-ncf属性，若存在，则执行第一获取单元，若不存在，则执行第一确定单元；

所述第一获取单元，用于获取所述data-ncf属性的值和所述被点击的元素的dataset对象，作为所述被点击的元素的点击相关数据；

所述第一确定单元，用于确定所述被点击的元素的父元素；

第二判断单元，用于判断所述被点击的元素的父元素上是否存在data-ncf属性，若存在，则执行第二获取单元；

所述第二获取单元，用于获取所述父元素的data-ncf属性的值和所述父元素的dataset对象，作为所述被点击的元素的点击相关数据。

优选的，所述装置还包括：

获取模块，用于通过监听所述单页应用页面的关闭事件，获取所述单页应用页面的跳出操作信息；

存储模块，用于存储所述跳出操作信息至本地存储器；

判断模块，用于在所述单页应用页面再次被访问时，判断所述本地存储器中是否存在跳出操作信息，若存在，则执行第三发送模块；

所述第三发送模块，用于将所述本地存储器中的跳出操作信息发送至所述服务器，以使所述服务器对所述跳出操作信息进行统计分析，得到所述单页应用页面的关闭和跳出统计结果。

与现有技术相比，本申请的有益效果为：

在本申请中，由于单页应用页面发生切换时，页面不发生跳转，但会发生路由切换，因此可以通过监听路由切换事件，来确定单页应用页面的路由切换数据，进而将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数，实现对单页应用页面的页面请求次数和独立用户访问数的统计。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本申请提供的单页应用的数据统计方法的一种流程图；

图2是本申请提供的单页应用的数据统计方法的一种子流程图；

图3是本申请提供的单页应用的数据统计方法的另一种流程图；

图4是本申请提供的单页应用的数据统计方法的再一种流程图；

图5是本申请提供的单页应用的数据统计装置的一种逻辑结构示意图。

具体实施方式

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

本申请实施例公开了一种单页应用的数据统计方法，可以通过监听路由切换事件，确定单页应用页面的路由切换数据；将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数，实现单页应用的数据统计。

接下来对本申请提供的单页应用的数据统计方法进行介绍，请参见图1，可以包括：

步骤S11、通过监听路由切换事件，确定单页应用页面的路由切换数据。

具体地，可以利用单页应用页面的前端框架提供的路由钩子，来监听路由切换事件。当然，路由钩子除了可以监听路由切换事件，还可以提供必要的统计数据，如路由路径(path)、参数(search)等。

前端框架可以包括但不局限于react框架或vue框架。

一旦监听到发生路由切换，则进一步可以确定单页应用页面的路由切换数据。路由切换数据可以理解为：单页应用页面发生路由切换时相关的数据(如，路由路径、时间戳、用户信息等)。其中，路由路径可以理解为：路由切换的路径。时间戳可以理解为：路由切换发生的时间，可以根据时间分析用户的操作顺序，还可以进行漏斗统计。用户信息可以用来定位用户，分析用户行为。

步骤S12、将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数。

在确定单页应用页面的路由切换数据后，可以将initSendDate方法初始化的数据，如项目名称、浏览器信息、UID、渠道、来源等，以及dataset对象(可以理解为额外发送到服务器的数据。dataset对象也可以为空。dataset对象本身也是dom对象的原生API，它是dom对象上所有data-x属性的集合)作为参数，调用getSendDate方法组织路由切换数据，完成数据收集。

在完成数据收集后，将所述路由切换数据发送至服务器。

服务器根据所述路由切换数据统计页面请求次数和独立用户访问数的过程可以包括：

服务器每接收到一条包含路由切换数据的请求，就记录一次该路由路径的页面请求次数；

把含有相同路由路径的请求，结合用户信息去重，得到独立用户访问数。

在本申请中，由于单页应用页面发生切换时，页面不发生跳转，但会发生路由切换，因此可以通过监听路由切换事件，来确定单页应用页面的路由切换数据，进而将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数，实现对单页应用页面的页面请求次数和独立用户访问数的统计。

在本申请的另一个实施例中，对将所述路由切换数据发送至服务器进行介绍，请参见图2，可以包括：

步骤S21、将所述路由切换数据写入图片的src属性中。

步骤S22、发送所述图片至所述服务器。

本步骤发送的图片的src属性中包含路由切换数据，因此将所述图片发送至服务器，可以实现将所述路由切换数据发送至服务器。

在本申请的另一个实施例中，介绍另外一种单页应用的数据统计方法，请参见图3，可以包括：

步骤S31、通过监听路由切换事件，确定单页应用页面的路由切换数据。

步骤S32、将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数。

步骤S31至步骤S32与前述实施例介绍的步骤S11至步骤S12相同，步骤S31至步骤S32的详细过程可以参见步骤S11至步骤S12的介绍，在此不再赘述。

步骤S33、在所述单页应用页面的document.body元素上绑定点击事件。

由于单页应用页面中所有点击事件均会冒泡到document.body元素上，因此在所述单页应用页面的document.body元素上绑定点击事件后，不需要在单页应用页面中的每个元素上绑定点击事件，可以节约绑定操作。

需要说明的是，document.body元素为网页的一种固有元素类型。

步骤S34、确定所述单页应用页面中被点击的元素。

本实施例中，可以通过event.target确定所述单页应用页面中被点击的元素。event是页面的原生API，每次发生点击事件，都可以通过event.target得到被点击的元素(可以理解为：domcuemnt元素)。

步骤S35、确定所述单页应用页面中被点击的元素的点击相关数据，作为点击统计数据。

步骤S36、发送所述点击操作数据至所述服务器，以使所述服务器对所述点击操作数据进行统计分析，得到所述单页应用页面的点击操作统计结果。

本实施例可以实现单页应用页面的点击操作数据的统计分析。

服务器对所述点击操作数据进行统计分析，得到所述单页应用页面的点击操作统计结果的过程可以包括：服务器可以通过点击操作数据对点击操作进行计数和分类，得到点击操作的次数和类别。

本实施例中，发送所述点击操作数据至所述服务器的过程可以包括：

将所述点击操作数据写入图片的src属性中；

发送所述图片至所述服务器。

在本申请的另一个实施例中，对所述确定所述单页应用页面中被点击的元素的点击相关数据进行介绍，可以包括：

A1、判断所述单页应用页面中被点击的元素上是否存在data-ncf属性。

若存在，则执行步骤A2，若不存在，则执行步骤A3。

data-ncf属性一般可以作为点击操作统计需求的关键(Key)值。

A2、获取所述data-ncf属性的值和所述被点击的元素的dataset对象，作为所述被点击的元素的点击相关数据。

A3、确定所述被点击的元素的父元素。

本实施例中，可以调用parentNode方法确定所述被点击的元素的父元素。

当然，如果单页应用页面的DOM层较深，可以按照预设的向上查找的停止策略寻找被点击的元素的父元素。预设的向上查找的停止策略可以包括：向上寻找n次后停止或寻找到某个元素的rootEI后停止。rootEI可以理解为组件根元素或单页应用根元素或document.body。

A4、判断所述被点击的元素的父元素上是否存在data-ncf属性。

若存在，则执行步骤A5，若不存在，则可以认为此次点击操作无需统计。

A5、获取所述父元素的data-ncf属性的值和所述父元素的dataset对象，作为所述被点击的元素的点击相关数据。

在本申请的另一个实施例中，介绍另外一种单页应用的数据统计方法，请参见图4，可以包括：

步骤S41、通过监听路由切换事件，确定单页应用页面的路由切换数据。

步骤S42、将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数。

步骤S41至步骤S42与前述实施例介绍的步骤S11至步骤S12相同，步骤S41至步骤S42的详细过程可以参见步骤S11至步骤S12的介绍，在此不再赘述。

步骤S43、通过监听所述单页应用页面的关闭事件，获取所述单页应用页面的跳出操作信息。

步骤S44、存储所述跳出操作信息至本地存储器。

步骤S45、在所述单页应用页面再次被访问时，判断所述本地存储器中是否存在跳出操作信息。

若存在，则执行步骤S46。

需要说明的是，本地存储器中包括时间戳参数。根据时间戳参数可以避免时间轴错乱。

步骤S46、将所述本地存储器中的跳出操作信息发送至所述服务器，以使所述服务器对所述跳出操作信息进行统计分析，得到所述单页应用页面的关闭和跳出统计结果。

本实施例可以实现单页应用页面关闭和跳出的统计分析。

将所述本地存储器中的跳出操作信息发送至所述服务器的过程可以包括：

将所述跳出操作信息写入图片的src属性中；

发送所述图片至所述服务器。

接下来对本申请实施例提供的单页应用的数据统计装置进行介绍，下文介绍的单页应用的数据统计装置与上文介绍的单页应用的数据统计方法可以相互对应参照。

请参见图5，单页应用的数据统计装置包括：第一确定模块11和第一发送模块12。

第一确定模块11，用于通过监听路由切换事件，确定单页应用页面的路由切换数据；

第一发送模块12，用于将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数。

本实施例中，所述第一发送模块12可以包括：写入单元和发送单元。

写入单元，用于将所述路由切换数据写入图片的src属性中；

发送单元，用于发送所述图片至所述服务器。

上述单页应用的数据统计装置还可以包括：

绑定模块，用于在所述单页应用页面的document.body元素上绑定点击事件；

第二确定模块，用于确定所述单页应用页面中被点击的元素；

第三确定模块，用于确定所述单页应用页面中被点击的元素的点击相关数据，作为点击统计数据；

第二发送模块，用于发送所述点击操作数据至所述服务器，以使所述服务器对所述点击操作数据进行统计分析，得到所述单页应用页面的点击操作统计结果。

本实施例中，所述第三确定模块可以包括：第一判断单元，用于判断所述单页应用页面中被点击的元素上是否存在data-ncf属性，若存在，则执行第一获取单元，若不存在，则执行第一确定单元；

所述第一获取单元，用于获取所述data-ncf属性的值和所述被点击的元素的dataset对象，作为所述被点击的元素的点击相关数据；

所述第一确定单元，用于确定所述被点击的元素的父元素；

第二判断单元，用于判断所述被点击的元素的父元素上是否存在data-ncf属性，若存在，则执行第二获取单元；

所述第二获取单元，用于获取所述父元素的data-ncf属性的值和所述父元素的dataset对象，作为所述被点击的元素的点击相关数据。

上述单页应用的数据统计装置还可以包括：

获取模块，用于通过监听所述单页应用页面的关闭事件，获取所述单页应用页面的跳出操作信息；

存储模块，用于存储所述跳出操作信息至本地存储器；

判断模块，用于在所述单页应用页面再次被访问时，判断所述本地存储器中是否存在跳出操作信息，若存在，则执行第三发送模块；

所述第三发送模块，用于将所述本地存储器中的跳出操作信息发送至所述服务器，以使所述服务器对所述跳出操作信息进行统计分析，得到所述单页应用页面的关闭和跳出统计结果。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

以上对本申请所提供的一种单页应用的数据统计方法及装置进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (10)

1.一种单页应用的数据统计方法，其特征在于，包括：

通过监听路由切换事件，确定单页应用页面的路由切换数据；

将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数。

2.根据权利要求1所述的方法，其特征在于，所述将所述路由切换数据发送至服务器，包括：

将所述路由切换数据写入图片的src属性中；

发送所述图片至所述服务器。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在所述单页应用页面的document.body元素上绑定点击事件；

确定所述单页应用页面中被点击的元素；

确定所述单页应用页面中被点击的元素的点击相关数据，作为点击统计数据；

发送所述点击操作数据至所述服务器，以使所述服务器对所述点击操作数据进行统计分析，得到所述单页应用页面的点击操作统计结果。

4.根据权利要求3所述的方法，其特征在于，所述确定所述单页应用页面中被点击的元素的点击相关数据，包括：

判断所述单页应用页面中被点击的元素上是否存在data-ncf属性；

若存在，则获取所述data-ncf属性的值和所述被点击的元素的dataset对象，作为所述被点击的元素的点击相关数据；

若不存在，则确定所述被点击的元素的父元素；

判断所述被点击的元素的父元素上是否存在data-ncf属性；

若存在，则获取所述父元素的data-ncf属性的值和所述父元素的dataset对象，作为所述被点击的元素的点击相关数据。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

通过监听所述单页应用页面的关闭事件，获取所述单页应用页面的跳出操作信息；

存储所述跳出操作信息至本地存储器；

在所述单页应用页面再次被访问时，判断所述本地存储器中是否存在跳出操作信息；

若存在，则将所述本地存储器中的跳出操作信息发送至所述服务器，以使所述服务器对所述跳出操作信息进行统计分析，得到所述单页应用页面的关闭和跳出统计结果。

6.一种单页应用的数据统计装置，其特征在于，包括：

第一确定模块，用于通过监听路由切换事件，确定单页应用页面的路由切换数据；

第一发送模块，用于将所述路由切换数据发送至服务器，以使所述服务器根据所述路由切换数据统计页面请求次数和独立用户访问数。

7.根据权利要求6所述的装置，其特征在于，所述第一发送模块包括：

写入单元，用于将所述路由切换数据写入图片的src属性中；

发送单元，用于发送所述图片至所述服务器。

8.根据权利要求6所述的装置，其特征在于，所述装置还包括：

绑定模块，用于在所述单页应用页面的document.body元素上绑定点击事件；

第二确定模块，用于确定所述单页应用页面中被点击的元素；

第三确定模块，用于确定所述单页应用页面中被点击的元素的点击相关数据，作为点击统计数据；

第二发送模块，用于发送所述点击操作数据至所述服务器，以使所述服务器对所述点击操作数据进行统计分析，得到所述单页应用页面的点击操作统计结果。

9.根据权利要求8所述的装置，其特征在于，所述第三确定模块包括：

第一判断单元，用于判断所述单页应用页面中被点击的元素上是否存在data-ncf属性，若存在，则执行第一获取单元，若不存在，则执行第一确定单元；

所述第一获取单元，用于获取所述data-ncf属性的值和所述被点击的元素的dataset对象，作为所述被点击的元素的点击相关数据；

所述第一确定单元，用于确定所述被点击的元素的父元素；

第二判断单元，用于判断所述被点击的元素的父元素上是否存在data-ncf属性，若存在，则执行第二获取单元；

所述第二获取单元，用于获取所述父元素的data-ncf属性的值和所述父元素的dataset对象，作为所述被点击的元素的点击相关数据。

10.根据权利要求6所述的装置，其特征在于，所述装置还包括：

获取模块，用于通过监听所述单页应用页面的关闭事件，获取所述单页应用页面的跳出操作信息；

存储模块，用于存储所述跳出操作信息至本地存储器；

判断模块，用于在所述单页应用页面再次被访问时，判断所述本地存储器中是否存在跳出操作信息，若存在，则执行第三发送模块；

所述第三发送模块，用于将所述本地存储器中的跳出操作信息发送至所述服务器，以使所述服务器对所述跳出操作信息进行统计分析，得到所述单页应用页面的关闭和跳出统计结果。