CN113220381A - 一种点击数据展示方法和装置 - Google Patents

Abstract

本发明公开了一种点击数据展示方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：根据第一页面的地址信息，获取第一页面埋点的点击数据，埋点具有埋点标识；打开浏览器渲染第一页面，并根据埋点标识将第一页面埋点的点击数据渲染到相应埋点位置，以得到第一页面的点击效果页面；按照预设规则生成点击效果页面的截图并展示。该实施方式能够精确展示页面点击位置的点击数据，无需记录点击坐标，也不用额外绘制背景图，页面发生变化时仍可正确展示点击数据，且展示成本几乎不变，且不受页面滚动或登录密码等影响，复杂度低，能更直观、准确、高效、灵活地反映埋点位置的点击情况，且可以灵活自主选择展示样式及其保存格式。

Description

一种点击数据展示方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种点击数据展示方法和装置。

背景技术

目前，埋点点击信息的展示，大概分为以下几种：一是埋点和点击数据一对一地以表格、文档或者其他形式展示；二是获取埋点坐标，在对应的坐标位置根据点击量的不同设置不同的透明度生成热力图，或者通过CSS(层叠样式表)+Javascript(一种直译式脚本语言)将获取的点击位置绘制在透明背景图上，将透明背景图和页面进行蒙层叠加，从而得到热力图。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

使用表格呈现点击量展示方式不够直观，如果想看具体位置的情况，需要人工和原始页面进行对比，或者根据埋点信息再次查询；

存储点击的坐标然后绘制点击区域热力图的方式，一旦页面元素位置有变化，根据原先记录的坐标数据绘制的热力图就会无法对应到相应的元素上；

存储点击坐标并绘制透明背景图，实现方式较复杂且容易出错，如果页面有滚动或者访问页面需要密码等都将增加复杂度，并且如果页面发生改变，背景图也要随之改变，灵活性差。

发明内容

有鉴于此，本发明实施例提供一种点击数据展示方法和装置，能够精确展示页面点击位置的点击数据，无需记录点击坐标，也不用额外绘制背景图，页面发生变化时仍可正确展示点击数据，展示成本几乎不变，且不受页面滚动或登录密码等影响，复杂度低，能更直观、准确、高效、灵活地反映埋点位置的点击情况，且可以灵活自主选择展示样式及其保存格式。

为实现上述目的，根据本发明实施例的一个方面，提供了一种点击数据展示方法。

一种点击数据展示方法，包括：根据第一页面的地址信息，获取所述第一页面埋点的点击数据，所述埋点具有埋点标识；打开浏览器渲染所述第一页面，并根据所述埋点标识将所述第一页面埋点的点击数据渲染到相应埋点位置，以得到所述第一页面的点击效果页面；按照预设规则生成所述点击效果页面的截图，并展示所述截图。

可选地，根据第一页面的地址信息，获取所述第一页面埋点的点击数据的步骤之前，还包括：对各页面注入埋点，并收集用户对所述各页面的埋点位置的点击操作信息，所述各页面包括所述第一页面；按照埋点标识统计所述各页面的埋点位置的点击操作信息，以生成所述各页面的埋点的点击数据，并保存所述各页面的地址信息与所述各页面的埋点的点击数据之间的对应关系。

可选地，所述打开浏览器渲染所述第一页面，包括：向中间服务层发送请求，所述请求包括所述第一页面的地址信息和所述第一页面埋点的点击数据；通过所述中间服务层，将所述第一页面的地址信息和所述第一页面埋点的点击数据作为puppeteer脚本的运行参数，运行所述puppeteer脚本(puppeteer是一个nodejs的库)，以打开所述浏览器，并按照所述第一页面的地址信息渲染所述第一页面。

可选地，所述请求还包括输入的账户登录信息，所述puppeteer脚本的运行参数还包括所述账户登录信息；所述运行所述puppeteer脚本，以打开所述浏览器，并按照所述第一页面的地址信息渲染所述第一页面，包括：运行所述puppeteer脚本，以打开所述浏览器，根据所述账户登录信息自动登录所述第一页面，然后打开所述第一页面。

可选地，所述根据所述埋点标识将所述第一页面埋点的点击数据渲染到相应埋点位置，包括：通过所述puppeteer脚本获取所述第一页面埋点的DOM(文档对象模型)结构，在所述DOM结构中增加标签，所述标签包括与所述DOM结构中的埋点元素对应的点击数据，将所述点击数据覆盖在对应的埋点元素位置，并按照所述标签的属性中配置的展示样式展示所述点击数据。

可选地，所述按照预设规则生成所述点击效果页面的截图，并展示所述截图，包括：按照配置的截图范围生成所述点击效果页面的截图，并将生成的截图保存为配置的截图格式，将保存的截图发送到所述中间服务层；通过所述中间服务层，将所述截图发送到点击数据展示页面进行展示。

根据本发明实施例的另一方面，提供了一种点击数据展示装置。

一种点击数据展示装置，包括：数据获取模块，用于根据第一页面的地址信息，获取所述第一页面埋点的点击数据，所述埋点具有埋点标识；渲染模块，用于打开浏览器渲染所述第一页面，并根据所述埋点标识将所述第一页面埋点的点击数据渲染到相应埋点位置，以得到所述第一页面的点击效果页面；展示模块，用于按照预设规则生成所述点击效果页面的截图，并展示所述截图。

可选地，还包括数据统计模块，用于：对各页面注入埋点，并收集用户对所述各页面的埋点位置的点击操作信息，所述各页面包括所述第一页面；按照埋点标识统计所述各页面的埋点位置的点击操作信息，以生成所述各页面的埋点的点击数据，并保存所述各页面的地址信息与所述各页面的埋点的点击数据之间的对应关系。

可选地，所述渲染模块包括第一渲染子模块，用于：向中间服务层发送请求，所述请求包括所述第一页面的地址信息和所述第一页面埋点的点击数据；通过所述中间服务层，将所述第一页面的地址信息和所述第一页面埋点的点击数据作为puppeteer脚本的运行参数，运行所述puppeteer脚本，以打开所述浏览器，并按照所述第一页面的地址信息渲染所述第一页面。

可选地，所述请求还包括输入的账户登录信息，所述puppeteer脚本的运行参数还包括所述账户登录信息；所述第一渲染子模块还用于：运行所述puppeteer脚本，以打开所述浏览器，根据所述账户登录信息自动登录所述第一页面，然后打开所述第一页面。

可选地，所述渲染模块包括第二渲染子模块，用于：通过所述puppeteer脚本获取所述第一页面埋点的DOM结构，在所述DOM结构中增加标签，所述标签包括与所述DOM结构中的埋点元素对应的点击数据，将所述点击数据覆盖在对应的埋点元素位置，并按照所述标签的属性中配置的展示样式展示所述点击数据。

可选地，所述展示模块还用于：按照配置的截图范围生成所述点击效果页面的截图，并将生成的截图保存为配置的截图格式，将保存的截图发送到所述中间服务层；通过所述中间服务层，将所述截图发送到点击数据展示页面进行展示。

根据本发明实施例的又一方面，提供了一种电子设备。

一种电子设备，包括：一个或多个处理器；存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，所述一个或多个处理器实现本发明实施例所提供的点击数据展示方法。

根据本发明实施例的又一方面，提供了一种计算机可读介质。

一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例所提供的点击数据展示方法。

上述发明中的一个实施例具有如下优点或有益效果：根据第一页面的地址信息，获取第一页面埋点的点击数据，打开浏览器渲染第一页面，并根据埋点标识将第一页面埋点的点击数据渲染到相应埋点位置，以得到第一页面的点击效果页面；按照预设规则生成点击效果页面的截图并展示。能够精确展示页面点击位置的点击数据，无需记录点击坐标，也不用额外绘制背景图，页面发生变化时仍可正确展示点击数据，且展示成本几乎不变，且不受页面滚动或登录密码等影响，复杂度低，能更直观、准确、高效、灵活地反映埋点位置的点击情况，且可以灵活自主选择展示样式及其保存格式。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明第一实施例的点击数据展示方法的主要步骤示意图；

图2是根据本发明第二实施例的点击数据展示流程示意图；

图3是根据本发明第三实施例的点击效果图的生成和展示流程示意图；

图4是根据本发明第四实施例的点击数据展示装置的主要模块示意图；

图5是本发明实施例可以应用于其中的示例性系统架构图；

图6是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明第一实施例的点击数据展示方法的主要步骤示意图。

如图1所示，本发明一个实施例的点击数据展示方法主要包括如下的步骤S101至步骤S103。

步骤S101：根据第一页面的地址信息，获取第一页面埋点的点击数据，埋点具有埋点标识；

步骤S102：打开浏览器渲染第一页面，并根据埋点标识将第一页面埋点的点击数据渲染到相应埋点位置，以得到第一页面的点击效果页面；

步骤S103：按照预设规则生成点击效果页面的截图，并展示截图。

其中，根据第一页面的地址信息，获取第一页面埋点的点击数据之前，预先对各页面注入埋点，并收集用户对各页面埋点位置的点击操作信息，各页面包括第一页面，按照埋点标识统计各页面埋点位置的点击操作信息，以生成各页面埋点的点击数据，并保存各页面的地址信息与各页面埋点的点击数据之间的对应关系。

页面的地址信息具体为页面的url地址。

点击数据可以是点击次数。

在一个实施例中，打开浏览器渲染第一页面，具体包括：向中间服务层发送请求，该请求包括第一页面的地址信息和第一页面埋点的点击数据；通过中间服务层，将第一页面的地址信息和第一页面埋点的点击数据作为puppeteer脚本的运行参数，运行puppeteer脚本，以打开浏览器，并按照第一页面的地址信息渲染第一页面。

在一个实施例中，向中间服务层发送的请求除了包括第一页面的地址信息和第一页面埋点的点击数据之外，还可以包括输入的账户登录信息，puppeteer脚本的运行参数还可以包括该账户登录信息。

运行puppeteer脚本，以打开浏览器，并按照第一页面的地址信息渲染第一页面，具体包括：运行puppeteer脚本，以打开浏览器，根据账户登录信息自动登录第一页面，然后打开第一页面。

本发明实施例的浏览器优选使用无头浏览器。

puppeteer是一个nodejs的库，puppeteer脚本可以自动化运行，具体功能参见相关步骤的介绍。中间服务层具体为node服务层，是通过nodejs搭建的中间层。

在一个实施例中，根据埋点标识将第一页面埋点的点击数据渲染到相应埋点位置，具体包括：通过puppeteer脚本获取第一页面埋点的DOM结构，在该DOM结构中增加标签，标签包括与DOM结构中的埋点元素对应的点击数据，将点击数据覆盖在对应的埋点元素位置，并按照标签的属性中配置的展示样式展示所述点击数据。

第一页面的点击效果页面是指将点击数据渲染到第一页面相应埋点位置之后得到的页面。

在一个实施例中，按照预设规则生成点击效果页面的截图，并展示截图，具体包括：按照配置的截图范围生成所述点击效果页面的截图，并将生成的截图保存为配置的截图格式，将保存的截图发送到所述中间服务层；通过中间服务层，将截图发送到点击数据展示页面进行展示。

截图范围例如可以是全屏截图、固定宽高截图等。截图格式即截图的存储格式，例如png、jpg、PDF等格式。

图2是根据本发明第二实施例的点击数据展示流程示意图。

如图2所示，本发明一个实施例的点击数据展示流程可以分为点击数据收集和点击效果展示两部分，点击效果展示即对点击数据的展示。下面分别介绍该两部分的实施流程。

在进行点击数据收集时，在前端将埋点注入页面，当用户操作页面时，JavaScript脚本收集用户对页面的点击操作信息并上报给server(服务端)，点击操作信息具体可以是各用户对埋点的点击次数。server接收到点击操作信息后，根据埋点id(标识)进行分类统计，即对于每一埋点位置，根据每个用户在该位置点击次数，统计出该位置总的点击次数，从而得到页面埋点的点击数据，将点击数据写入数据库中。

在进行点击效果展示时，使用者打开本发明实施例的展示系统以查看页面点击情况，展示系统是可以与使用者交互的系统，其包括点击数据展示页面，用于使用者选择要查看的页面的url地址，以及向使用者展示要查看的页面的点击效果，展示系统还与server和node服务层交互，交互过程将在下文详细介绍。使用者即通过本发明实施例查看页面点击数据的用户，为与在注入埋点的页面上进行点击操作的用户相区别，称之为使用者。

使用者进入展示系统(参见图中①)，选择要查看的页面的url地址(称为当前url)，展示系统向server发送请求(参见图中②)，以获取当前url下的点击数据，server根据url与点击数据之间的对应关系，向展示系统返回当前url下的点击数据(参见图中③，当前url下的点击数据即图中数据data)，展示系统向node服务层发送带有入参的请求(参见图中④)，其中入参包括当前url下的点击数据和当前url(即图中的请求url)。node服务层接收到展示系统发送的请求中的当前url和当前url的点击数据，将当前url和当前url的点击数据作为参数传给puppeteer脚本(参见图中⑤)，puppeteer脚本运行，打开无头浏览器渲染该url页面，并在对应埋点位置渲染点击数据(参见图中⑥)，对渲染有点击数据的当前url的页面截图(参见图中⑦)，以生成点击效果展示图(即简称效果图)，效果图具体可为png、jpg、PDF等格式。puppeteer脚本将效果图返回node服务层(参见图中⑧)，node服务层获取到该效果图后返给展示系统进行展示(参见图中⑨)。

其中，打开无头浏览器渲染该url页面是指浏览器根据DOM结构和对应的CSS，展示出当前url的原始页面的过程。

puppeteer脚本的API(应用程序接口)中提供了很多方法，例如：page.click方法可以实现模拟点击，page.focus方法可以实现聚焦某个元素等操作，这些操作可以模拟如登录或其他流程的操作，page.addScriptTag()方法可以引入jquery库(一个JavaScript库)，以便可以在page.evaluate方法中利用jquery语法自由操作页面的DOM。

在对应埋点位置渲染点击数据是指通过puppeteer脚本操作DOM结构，将埋点位置处的数据加到对应的埋点位置，在puppeteer脚本中通过CSS控制展示的效果，通过绝对定位等方式，控制点击数据展示在相对应的埋点位置。其中，可以通过puppeteer脚本获取当前url埋点的DOM结构，在该DOM结构中增加标签，标签包括与该DOM结构中的埋点元素对应的点击数据，将点击数据覆盖在对应的埋点元素位置，并按照标签的属性中配置的展示样式展示点击数据，从而使点击数据按照配置的展示样式展示在相应埋点元素的位置。其中，展示样式可以配置在style(类型)属性中，展示样式具体可以是数值标注或热力图等样式。

具体地，利用page.evaluate方法获取到页面中埋点的DOM结构，将带有指定埋点属性的元素集合提取出来，并确定每个埋点位置对应的点击数据。例如：得到埋点位置A处的点击数据后，将该埋点位置元素的定位设为相对定位，然后利用jquery语法增加DOM节点，将增加标签元素的定位设为绝对定位，以保证增加标签中写有点击数据的元素覆盖在相应埋点位置处，其中自定义的点击数据展示样式写在增加的标签的属性里。上述操作会引发页面reflow(回流)，页面重新构建DOM树和CSS树，并根据新的DOM树和CSS树构建render(渲染)树，确定有哪些节点，各节点的样式和从属关系。通过render树，浏览器计算各个节点的位置和样式，在页面上绘制出每个节点，进而呈现出整个点击效果页面。

可以按照配置的截图范围对点击效果页面截图，具体通过puppeteer脚本的page.screenshot()方法可以配置截图范围、形式及保存格式(即截图格式)等。

本发明实施例在无头浏览器打开的原始页面上根据埋点id渲染点击数据后直接截图保存，从而精确展示页面点击位置的点击量，更直观、准确、高效、灵活地反映埋点位置的点击情况，无需记录点击坐标，也不用额外绘制背景图，页面发生变化时仍可正确展示点击数据，且展示成本几乎不变，且不受页面滚动或登录密码等影响，展示方式灵活，可以通过参数设置，自主选择展示的样式(例如数值标注或者热力图)及其保存格式。

图3是根据本发明第三实施例的点击效果图的生成和展示流程示意图。

如图3所示，使用者在展示系统中选择想要查看点击效果的页面(例如选择想要查看点击效果页面的url地址)，如需登录则输入账户登录信息，包括账号(account)及密码(password)。

展示系统根据使用者选择的url地址向server发送请求，以获取该url地址的各埋点id对应的点击数据(即图中的埋点数据data，简称data)后，然后向node服务层发送带有入参的请求。其中，在需要该url地址的页面需要登录，且使用者输入了账户登录信息的情况下，该入参包括该url地址、账号(account)、密码(password)以及点击数据(data)，在该页面不需要登录的情况下，该入参包括该url地址以及点击数据(data)。

以页面需要登录为例，node服务层接收到页面地址(url)、账号(account)、密码(password)及点击数据(data)后，将这些数据作为参数传给puppeteer脚本运行。

puppeteer脚本运行时，打开无头浏览器渲染该url地址对应的页面，在渲染过程中自动填充密码，然后打开该url地址的页面，并按照自定义样式根据埋点id将点击数据渲染到对应的点击位置，将渲染完点击数据的页面截图并保存为点击效果图，其中，可自由配置保存为png、jpg、PDF等格式，由node服务层将生成的点击效果图传给展示系统进行展示。

本发明实施例利用前端埋点和puppeteer相结合，直接将埋点信息在原始页面中展示并截图生成点击效果图，能够非常直观地展示埋点位置及点击状况，由于埋点信息直接插入无头浏览器打开的页面中并截图生成点击效果图，不会产生位置的偏移等情况，能够保证准确性和高效性，而且不会受页面变化的影响。当使用者选择要查看的页面时，该页面以及埋点对应点击数据都可以同步更新，方便灵活。此外，本发明实施例利用puppeteer生成点击效果图，可以利用puppeteer实现很多拓展功能，如模拟登录、模拟操作等，还可以通过参数设置，灵活设置展示样式，自主选择全屏截图、固定宽高截图以及图片、PDF等多种保存格式。

图4是根据本发明第四实施例的点击数据展示装置的主要模块示意图。

如图4所示，本发明第四实施例的点击数据展示装置400主要包括：数据获取模块401、渲染模块402、展示模块403。

数据获取模块401，用于根据第一页面的地址信息，获取第一页面埋点的点击数据，埋点具有埋点标识；

渲染模块402，用于打开浏览器渲染第一页面，并根据埋点标识将第一页面埋点的点击数据渲染到相应埋点位置，以得到第一页面的点击效果页面；

展示模块403，用于按照预设规则生成点击效果页面的截图，并展示截图。

数据展示装置400还可以包括数据统计模块，用于：对各页面注入埋点，并收集用户对各页面埋点位置的点击操作信息，各页面包括第一页面；按照埋点标识统计各页面埋点位置的点击操作信息，以生成各页面埋点的点击数据，并保存各页面的地址信息与各页面埋点的点击数据之间的对应关系。

渲染模块402包括第一渲染子模块，用于：向中间服务层发送请求，该请求包括第一页面的地址信息和第一页面埋点的点击数据；通过中间服务层，将第一页面的地址信息和第一页面埋点的点击数据作为puppeteer脚本的运行参数，运行puppeteer脚本，以打开浏览器，并按照第一页面的地址信息渲染第一页面。

向中间服务层发送的请求还包括输入的账户登录信息，puppeteer脚本的运行参数还包括该账户登录信息。

第一渲染子模块还可以用于：运行puppeteer脚本，以打开浏览器，根据账户登录信息自动登录第一页面，然后打开第一页面。

渲染模块402还包括第二渲染子模块，用于：通过puppeteer脚本获取第一页面埋点的DOM结构，在DOM结构中增加标签，标签包括与DOM结构中的埋点元素对应的点击数据，将点击数据覆盖在对应的埋点元素位置，并按照标签的属性中配置的展示样式展示点击数据。

展示模块403具体可以用于：按照配置的截图范围生成点击效果页面的截图，并将生成的截图保存为配置的截图格式，将保存的截图发送到中间服务层；通过中间服务层，将截图发送到点击数据展示页面进行展示。

另外，在本发明实施例中所述点击数据展示装置的具体实施内容，在上面所述点击数据展示方法中已经详细说明了，故在此重复内容不再说明。

图5示出了可以应用本发明实施例的点击数据展示方法或点击数据展示装置的示例性系统架构500。

如图5所示，系统架构500可以包括终端设备501、502、503，网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备501、502、503通过网络504与服务器505交互，以接收或发送消息等。终端设备501、502、503上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备501、502、503可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器505可以是提供各种服务的服务器，例如对用户利用终端设备501、502、503所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的点击数据展示方法一般由服务器505执行，相应地，点击数据展示装置一般设置于服务器505中。

应该理解，图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图6，其示出了适于用来实现本申请实施例的终端设备或服务器的计算机系统600的结构示意图。图6示出的终端设备或服务器仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图6所示，计算机系统600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有系统600操作所需的各种程序和数据。CPU 601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本申请的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括数据获取模块、渲染模块、展示模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，数据获取模块还可以被描述为“用于根据第一页面的地址信息，获取第一页面埋点的点击数据的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：根据第一页面的地址信息，获取所述第一页面埋点的点击数据，所述埋点具有埋点标识；打开浏览器渲染所述第一页面，并根据所述埋点标识将所述第一页面埋点的点击数据渲染到相应埋点位置，以得到所述第一页面的点击效果页面；按照预设规则生成所述点击效果页面的截图，并展示所述截图。

根据本发明实施例的技术方案，根据第一页面的地址信息，获取第一页面埋点的点击数据，打开浏览器渲染第一页面，并根据埋点标识将第一页面埋点的点击数据渲染到相应埋点位置，以得到第一页面的点击效果页面；按照预设规则生成点击效果页面的截图并展示。能够精确展示页面点击位置的点击数据，无需记录点击坐标，也不用额外绘制背景图，页面发生变化时仍可正确展示点击数据，且展示成本几乎不变，且不受页面滚动或登录密码等影响，复杂度低，能更直观、准确、高效、灵活地反映埋点位置的点击情况，且可以灵活自主选择展示样式及其保存格式。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种点击数据展示方法，其特征在于，包括：

根据第一页面的地址信息，获取所述第一页面埋点的点击数据，所述埋点具有埋点标识；

打开浏览器渲染所述第一页面，并根据所述埋点标识将所述第一页面埋点的点击数据渲染到相应埋点位置，以得到所述第一页面的点击效果页面；

按照预设规则生成所述点击效果页面的截图，并展示所述截图。

2.根据权利要求1所述的方法，其特征在于，根据第一页面的地址信息，获取所述第一页面埋点的点击数据的步骤之前，还包括：

对各页面注入埋点，并收集用户对所述各页面的埋点位置的点击操作信息，所述各页面包括所述第一页面；

按照埋点标识统计所述各页面的埋点位置的点击操作信息，以生成所述各页面的埋点的点击数据，并保存所述各页面的地址信息与所述各页面的埋点的点击数据之间的对应关系。

3.根据权利要求1所述的方法，其特征在于，所述打开浏览器渲染所述第一页面，包括：

向中间服务层发送请求，所述请求包括所述第一页面的地址信息和所述第一页面埋点的点击数据；

通过所述中间服务层，将所述第一页面的地址信息和所述第一页面埋点的点击数据作为puppeteer脚本的运行参数，运行所述puppeteer脚本，以打开所述浏览器，并按照所述第一页面的地址信息渲染所述第一页面。

4.根据权利要求3所述的方法，其特征在于，所述请求还包括输入的账户登录信息，所述puppeteer脚本的运行参数还包括所述账户登录信息；

所述运行所述puppeteer脚本，以打开所述浏览器，并按照所述第一页面的地址信息渲染所述第一页面，包括：

运行所述puppeteer脚本，以打开所述浏览器，根据所述账户登录信息自动登录所述第一页面，然后打开所述第一页面。

5.根据权利要求3所述的方法，其特征在于，所述根据所述埋点标识将所述第一页面埋点的点击数据渲染到相应埋点位置，包括：

通过所述puppeteer脚本获取所述第一页面埋点的DOM结构，在所述DOM结构中增加标签，所述标签包括与所述DOM结构中的埋点元素对应的点击数据，将所述点击数据覆盖在对应的埋点元素位置，并按照所述标签的属性中配置的展示样式展示所述点击数据。

6.根据权利要求3所述的方法，其特征在于，所述按照预设规则生成所述点击效果页面的截图，并展示所述截图，包括：

按照配置的截图范围生成所述点击效果页面的截图，并将生成的截图保存为配置的截图格式，将保存的截图发送到所述中间服务层；

通过所述中间服务层，将所述截图发送到点击数据展示页面进行展示。

7.一种点击数据展示装置，其特征在于，包括：

数据获取模块，用于根据第一页面的地址信息，获取所述第一页面埋点的点击数据，所述埋点具有埋点标识；

渲染模块，用于打开浏览器渲染所述第一页面，并根据所述埋点标识将所述第一页面埋点的点击数据渲染到相应埋点位置，以得到所述第一页面的点击效果页面；

展示模块，用于按照预设规则生成所述点击效果页面的截图，并展示所述截图。

8.根据权利要求7所述的装置，其特征在于，还包括数据统计模块，用于：

对各页面注入埋点，并收集用户对所述各页面的埋点位置的点击操作信息，所述各页面包括所述第一页面；

按照埋点标识统计所述各页面的埋点位置的点击操作信息，以生成所述各页面的埋点的点击数据，并保存所述各页面的地址信息与所述各页面的埋点的点击数据之间的对应关系。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行时，所述一个或多个处理器实现如权利要求1-6中任一所述的方法。

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

Images