一种基于HTML5的可视化埋点方法、装置和电子设备

摘要

本发明涉及计算机技术领域，具体涉及一种基于HTML5的可视化埋点方法、装置和电子设备，包括：于埋点页面获取第一位置标签，并引入埋点软件开发工具包；于操作页面打开所述埋点页面，并于所述第一位置标签中选择第二位置标签；利用所述埋点软件开发工具包生成埋点信息，并将所述埋点信息上传至服务器；加载所述埋点信息，并根据用户操作获取用户信息及用户操作信息；于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图。本发明减轻了开发人员主动代码埋点的负担，不需要工程师在业务代码里面插入侵入式的代码，可以让非技术人员利用管理页面自行操作，降低技术门槛，以及降低开发成本以及业务时间。

说明书

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于HTML5的可视化埋点方法、装置和电子设备。

背景技术

为了对用户在页面上的行为进行统计和分析，目前通常采用的方法是在应用或页面的代码相应位置上植入统计代码，也就是埋点。

通过埋点，可以追踪用户在相应应用或页面上的行为，包括点击、滑动、下载、浏览等；对多个埋点数据进行统计，可以追踪用户的连续行为，还可以将收集到的数据输入建立的模型，得出用户的操作行为。通过埋点，还能够统计得到页面浏览量、独立访问者数量、IP、页面停留时间、页面操作时间、页面访问次数、按钮点击次数、文件下载次数等统计数据，并可以以此作为应用或页面开发和优化的依据。

现有技术中的埋点方式对测试人员的专业性要求较高且测试效率低，对于非专业技术人员来说很难操作，且开发成本及业务时间都较高。

发明内容

本发明提供了一种基于HTML5的可视化埋点方法、装置和电子设备，用以降低技术门槛，以及降低开发成本以及业务时间。

本说明书实施例提供一种基于HTML5的可视化埋点方法，包括：

于埋点页面获取第一位置标签，并引入埋点软件开发工具包；

于操作页面打开所述埋点页面，并于所述第一位置标签中选择第二位置标签；

利用所述埋点软件开发工具包生成埋点信息，并将所述埋点信息上传至服务器；

加载所述埋点信息，并根据用户操作获取用户信息及用户操作信息。

优选的，还包括：

于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图。

优选的，所述利用所述埋点软件开发工具包于生成埋点信息，包括：

根据所述第二位置标签获取需要埋点的位置；

所述埋点软件开发工具包基于所述需要埋点的位置生成埋点信息，所述埋点信息包括：埋点相关代码、埋点位置。

优选的，所述根据用户操作获取用户信息及用户操作信息，包括：

所述埋点根据所述用户操作采集所述用户信息及用户操作信息；

上传所述用户信息及用户操作信息至所述服务器。

优选的，所述于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图，包括：

获取所述用户信息及用户操作信息；

于所述操作页面利用iframe打开所述埋点页面；

于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图。

本说明书实施例还提供一种基于HTML5的可视化埋点装置，其特征在于，包括：

工具包引入模块，于埋点页面获取第一位置标签，并引入埋点软件开发工具包；

标签选取模块，于操作页面打开所述埋点页面，并于所述第一位置标签中选择第二位置标签；

埋点信息生成模块，利用所述埋点软件开发工具包生成埋点信息，并将所述埋点信息上传至服务器；

信息获取模块，加载所述埋点信息，并根据用户操作获取用户信息及用户操作信息。

优选的，还包括：

于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图。

优选的，所述利用所述埋点软件开发工具包于生成埋点信息，包括：

根据所述第二位置标签获取需要埋点的位置；

所述埋点软件开发工具包基于所述需要埋点的位置生成埋点信息，所述埋点信息包括：埋点相关代码、埋点位置。

优选的，所述根据用户操作获取用户信息及用户操作信息，包括：

所述埋点根据所述用户操作采集所述用户信息及用户操作信息；

上传所述用户信息及用户操作信息至所述服务器。

优选的，所述于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图，包括：

获取所述用户信息及用户操作信息；

于所述操作页面利用iframe打开所述埋点页面；

于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图。

一种电子设备，其中，该电子设备包括：

处理器以及存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行上述任一项所述的方法。

一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现上述任一项所述的方法。

其有益效果在于：

本技术发明减轻了开发人员主动代码埋点的负担，不需要工程师在业务代码里面插入侵入式的代码，可以让非技术人员利用管理页面自行操作，降低技术门槛，以及降低开发成本以及业务时间。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本说明书实施例提供的一种基于HTML5的可视化埋点方法的原理示意图；

图2为本说明书实施例提供的一种基于HTML5的可视化埋点装置的结构示意图；

图3为本说明书实施例提供的一种电子设备的结构示意图；

图4为本说明书实施例提供的一种计算机可读介质的原理示意图。

具体实施方式

现在将参考附图更全面地描述本发明的示例性实施例。然而，示例性实施例能够以多种形式实施，且不应被理解为本发明仅限于在此阐述的实施例。相反，提供这些示例性实施例能够使得本发明更加全面和完整，更加便于将发明构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的元件、组件或部分，因而将省略对它们的重复描述。

在符合本发明的技术构思的前提下，在某个特定的实施例中描述的特征、结构、特性或其他细节不排除可以以合适的方式结合在一个或更多其他的实施例中。

在对于具体实施例的描述中，本发明描述的特征、结构、特性或其他细节是为了使本领域的技术人员对实施例进行充分理解。但是，并不排除本领域技术人员可以实践本发明的技术方案而没有特定特征、结构、特性或其他细节的一个或更多。

附图中所示的图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

术语“和/或”或者“及/或”包括相关联的列出项目中的任一个或多者的所有组合。

参照图1为本说明书实施例提供的一种基于HTML5的可视化埋点方法的原理示意图，包括：

S101：于埋点页面获取第一位置标签，并引入埋点软件开发工具包；

在本发明较佳的实施例中，先于埋点页面采集第一位置标签，获取第一位置标签，并于埋点页面加入对应的埋点软件开发工具包，所述埋点软件开发工具包埋点软件开发工具包用于生成埋点处的代码信息，减轻开发人员主动代码埋点的负担，不需要工程师在业务代码里面插入侵入式的代码。

S102：于操作页面打开所述埋点页面，并于所述第一位置标签中选择第二位置标签；

在本发明较佳的实施例中，开发人员打开操作页面，并利用iframe打开埋点页面，进而从埋点页面中第一位置标签中选择第二位置标签，用以根据第二位置标签添加需要埋点的位置。

S103：利用所述埋点软件开发工具包生成埋点信息，并将所述埋点信息上传至服务器；

在本发明较佳的实施例中，根据第二位置标签获取需要埋点的位置，然后埋点软件开发工具包基于需要埋点的位置生成埋点信息，所述埋点信息包括埋点相关代码、埋点位置等。

S104：加载所述埋点信息，并根据用户操作获取用户信息及用户操作信息。

在本发明较佳的实施例中，埋点位置处的埋点根据用户的操作，采集所述用户信息及用户操作信息，然后获得采集到的用户信息及用户操作信息。

进一步地，还包括：

于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图。

在本发明较佳的实施例中，先获取用户操作后埋点生成的用户信息及用户操作信息，然后操作页面利用iframe打开埋点页面，通过操作页面可以看到展示出的埋点页面、埋点信息及埋点信息热力图。

进一步地，所述利用所述埋点软件开发工具包于生成埋点信息，包括：

根据所述第二位置标签获取需要埋点的位置；

所述埋点软件开发工具包基于所述需要埋点的位置生成埋点信息，所述埋点信息包括：埋点相关代码、埋点位置。

在本发明较佳的实施例中，根据第二位置标签获取需要埋点的位置，然后埋点软件开发工具包基于需要埋点的位置生成埋点信息，所述埋点信息包括埋点相关代码、埋点位置等。

进一步地，所述根据用户操作获取用户信息及用户操作信息，包括：

所述埋点根据所述用户操作采集所述用户信息及用户操作信息；

上传所述用户信息及用户操作信息至所述服务器。

在本发明较佳的实施例中，用户对操作页面进行操作，此时埋点根据用户对操作页面进行的操作，获取到用户信息，同时获取到用户操作信息，然后埋点将获得的用户信息及用户操作信息传送给服务器。

进一步地，所述于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图，包括：

获取所述用户信息及用户操作信息；

于所述操作页面利用iframe打开所述埋点页面；

于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图。

在本发明较佳的实施例中，先获取用户操作后埋点获取的所述用户信息及用户操作信息，然后操作页面利用iframe打开埋点页面，通过操作页面可以看到展示出的埋点页面、埋点信息及埋点信息热力图，实现可视化埋点以及可视化埋点信息及埋点信息热力图，可以让非技术人员利用管理页面自行操作，降低技术门槛，提高开发成本以及业务时间。

本技术发明减轻了开发人员主动代码埋点的负担，不需要工程师在业务代码里面插入侵入式的代码，可以让非技术人员利用管理页面自行操作，降低技术门槛，以及降低开发成本以及业务时间。

图2为本说明书实施例提供的一种基于HTML5的可视化埋点装置的结构示意图，包括：

工具包引入模块201，于埋点页面获取第一位置标签，并引入埋点软件开发工具包；

在本发明较佳的实施例中，先于埋点页面采集第一位置标签，获取第一位置标签，工具包引入模块201于埋点页面加入对应的埋点软件开发工具包，所述埋点软件开发工具包埋点软件开发工具包用于生成埋点处的代码信息，减轻开发人员主动代码埋点的负担，不需要工程师在业务代码里面插入侵入式的代码。

标签选取模块202，于操作页面打开所述埋点页面，并于所述第一位置标签中选择第二位置标签；

在本发明较佳的实施例中，开发人员打开操作页面，并利用iframe打开埋点页面，标签选取模块202于埋点页面中第一位置标签中选择第二位置标签，用以根据第二位置标签添加需要埋点的位置。

埋点信息生成模块203，利用所述埋点软件开发工具包生成埋点信息，并将所述埋点信息上传至服务器；

在本发明较佳的实施例中，埋点信息生成模块203根据第二位置标签获取需要埋点的位置，然后埋点软件开发工具包基于需要埋点的位置生成埋点信息，所述埋点信息包括埋点相关代码、埋点位置等。

信息获取模块204，加载所述埋点信息，并根据用户操作获取用户信息及用户操作信息。

在本发明较佳的实施例中，信息获取模块204根据用户的操作，采集所述用户信息及用户操作信息，然后获得采集到的用户信息及用户操作信息。

进一步地，还包括：

于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图。

进一步地，所述利用所述埋点软件开发工具包于生成埋点信息，包括：

根据所述第二位置标签获取需要埋点的位置；

所述埋点软件开发工具包基于所述需要埋点的位置生成埋点信息，所述埋点信息包括：埋点相关代码、埋点位置。

进一步地，所述根据用户操作获取用户信息及用户操作信息，包括：

所述埋点根据所述用户操作采集所述用户信息及用户操作信息；

上传所述用户信息及用户操作信息至所述服务器。

进一步地，所述于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图，包括：

获取所述用户信息及用户操作信息；

于所述操作页面利用iframe打开所述埋点页面；

于所述操作页面展示所述埋点页面、所述埋点信息及埋点信息热力图。

本技术发明减轻了开发人员主动代码埋点的负担，不需要工程师在业务代码里面插入侵入式的代码，可以让非技术人员利用管理页面自行操作，降低技术门槛，以及降低开发成本以及业务时间。

基于同一发明构思，本说明书实施例还提供一种电子设备。

下面描述本发明的电子设备实施例，该电子设备可以视为对于上述本发明的方法和装置实施例的具体实体实施方式。对于本发明电子设备实施例中描述的细节，应视为对于上述方法或装置实施例的补充；对于在本发明电子设备实施例中未披露的细节，可以参照上述方法或装置实施例来实现。

参照图3为本说明书实施例提供的一种电子设备的结构示意图。下面参照图3来描述根据本发明该实施例的电子设备300。图3显示的电子设备300仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图3所示，电子设备300以通用计算设备的形式表现。电子设备300的组件可以包括但不限于：至少一个处理单元310、至少一个存储单元320、连接不同装置组件(包括存储单元320和处理单元310)的总线330、显示单元340等。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元310执行，使得所述处理单元310执行本说明书上述处理方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元310可以执行如图1所示的步骤。

所述存储单元320可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)3201和/或高速缓存存储单元3202，还可以进一步包括只读存储单元(ROM)3203。

所述存储单元320还可以包括具有一组(至少一个)程序模块3205的程序/实用工具3204，这样的程序模块3205包括但不限于：操作装置、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线330可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备300也可以与一个或多个外部设备400(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备300交互的设备通信，和/或与使得该电子设备300能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口350进行。并且，电子设备300还可以通过网络适配器360与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器360可以通过总线330与电子设备300的其它模块通信。应当明白，尽管图3中未示出，可以结合电子设备300使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID装置、磁带驱动器以及数据备份存储装置等。

通过以上的实施方式的描述，本领域的技术人员易于理解，本发明描述的示例性实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本发明实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个计算机可读的存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、或者网络设备等)执行根据本发明的上述方法。当所述计算机程序被一个数据处理设备执行时，使得该计算机可读介质能够实现本发明的上述方法，即：如图1所示的方法。

参照图4为本说明书实施例提供的一种计算机可读介质的原理示意图。

实现图1所示方法的计算机程序可以存储于一个或多个计算机可读介质上。计算机可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的装置、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行装置、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

综上所述，本发明可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)等通用数据处理设备来实现根据本发明实施例中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，应理解的是，本发明不与任何特定计算机、虚拟装置或者电子设备固有相关，各种通用装置也可以实现本发明。以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。