基于前端埋点的响应式页面热力图的生成方法和装置制造方法及图纸

本发明专利技术实施例提供一种基于前端埋点的响应式页面热力图的生成方法和装置，属于计算机领域。该方法包括：基于用户操作收集操作数据，所述操作数据包括所述用户操作指向的需要统计的至少一个页面元素上的标记、至少一个页面地址和至少一个时间戳；基于后端接口地址发送所述操作数据；以及根据所述操作数据生成所述响应式页面热力图。本发明专利技术能够根据用户需求进行监控和统计，不产生冗余代码及冗余数据。

【技术实现步骤摘要】
基于前端埋点的响应式页面热力图的生成方法和装置
本专利技术涉及计算机，具体地涉及基于前端埋点的响应式页面热力图的生成方法和装置。
技术介绍
热力图也称热图，以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示，也可以显示不可点击区域发生的事件。根据热图，可以直观地观察到用户的总体访问情况和点击偏好等。响应式页面指根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应布局和调整的页面。随着互联网的国际化，数据分析作为网站运营的基础性工作已经显得越发重要。特别是随着互联网的发展，数据成为衡量一个网站的各项指标，有据可查的科学评估资料。不同的公司，不同的平台，不同的产品，不同的人需要不同的数据，那么如何满足不同层面的数据需要呢？首先就是做好数据埋点，传统的统计方式如：1、根据记录XY坐标的绝对位置来记录统计数据，但由于响应式页面元素会随着屏幕的宽度变化而变化，显然用这种方式统计响应式页面热力图是不准确的。2、使用第三方SDK(又称前端数据采集)，通过这种SDK方式只能够采集到一些基本的用户行为数据，往往会出现和自己的业务数据库数据对不上、丢数据的情况，数据也无法放在自己的数据库进行二次分析。
技术实现思路
本专利技术实施例的目的是提供一种基于前端埋点的响应式页面热力图的生成方法和装置，该基于前端埋点的响应式页面热力图的生成方法和装置能够根据用户需求进行监控和统计，不产生冗余代码及冗余数据。为了实现上述目的，本专利技术实施例提供一种基于前端埋点的响应式页面热力图的生成方法，该方法包括：基于用户操作收集操作数据，所述操作数据包括所述用户操作指向的需要统计的至少一个页面元素上的标记、至少一个页面地址和至少一个时间戳；基于后端接口地址发送所述操作数据；以及根据所述操作数据生成所述响应式页面热力图。优选地，在基于用户操作收集操作数据之前，该方法还包括：在需要统计的至少一个页面元素上添加至少一个标记，其中，所述至少一个标记中的每个标记的值不同。优选地，该方法还包括：将所述操作数据存入本地数据库的日志。优选地，在基于用户操作收集操作数据之前，该方法还包括：创建script标签；将所述script标签的源属性指向单独的js文件，所述js文件包括收集所述操作数据的步骤和发送所述操作数据的步骤的逻辑代码。优选地，所述基于后端接口地址发送所述操作数据包括：判断所述后端接口地址与执行收集所述操作数据的步骤的地址是否同源；在所述后端接口地址与执行收集所述操作数据的步骤的地址不同源时，创建image对象；拼接所述后端接口地址、所述操作数据以及随机字符串以得到至少一个源属性值；将所述至少一个源属性值赋予所述image对象；以及通过所述image对象发送所述操作数据。本专利技术实施例还提供一种基于前端埋点的响应式页面热力图的生成装置，该装置包括：收集单元、发送单元以及处理单元，其中，所述收集单元用于基于用户操作收集操作数据，所述操作数据包括所述用户操作指向的需要统计的至少一个页面元素上的标记、至少一个页面地址和至少一个时间戳；所述发送单元用于基于后端接口地址发送所述操作数据；以及所述处理单元用于根据所述操作数据生成所述响应式页面热力图。优选地，在基于用户操作收集操作数据之前，该装置还包括：埋点单元，用于在需要统计的至少一个页面元素上添加至少一个标记，其中，所述至少一个标记中的每个标记的值不同。优选地，所述处理单元还用于：将所述操作数据存入本地数据库的日志。优选地，基于用户操作收集操作数据之前，所述处理单元还用于：创建script标签；将所述script标签的源属性指向单独的js文件，所述js文件包括收集所述操作数据的步骤和发送所述操作数据的步骤的逻辑代码。优选地，所述基于后端接口地址发送所述操作数据包括：判断所述后端接口地址与执行收集所述操作数据的步骤的地址是否同源；在所述后端接口地址与执行收集所述操作数据的步骤的地址不同源时，创建image对象；拼接所述后端接口地址、所述操作数据以及随机字符串以得到至少一个源属性值；将所述至少一个源属性值赋予所述image对象；以及通过所述image对象发送所述操作数据。通过上述技术方案，采用本专利技术提供的基于前端埋点的响应式页面热力图的生成方法和装置，基于用户操作收集操作数据，所述操作数据包括所述用户操作指向的需要统计的至少一个页面元素上的标记、至少一个页面地址和至少一个时间戳；基于后端接口地址发送所述操作数据；以及根据所述操作数据生成所述响应式页面热力图。由于本专利技术收集操作数据仅针对需要统计的页面元素，忽视其他不需要统计的页面元素，因此该基于前端埋点的响应式页面热力图的生成方法和装置能够根据用户需求进行监控和统计，不产生冗余代码及冗余数据。本专利技术实施例的其它特征和优点将在随后的具体实施方式部分予以详细说明。附图说明附图是用来提供对本专利技术实施例的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本专利技术实施例，但并不构成对本专利技术实施例的限制。在附图中：图1是本专利技术一实施例提供的基于前端埋点的响应式页面热力图的生成方法的流程图；图2是本专利技术另一实施例提供的基于前端埋点的响应式页面热力图的生成方法的流程图；图3是本专利技术另一实施例提供的基于前端埋点的响应式页面热力图的生成方法的流程图；图4是本专利技术另一实施例提供的基于前端埋点的响应式页面热力图的生成方法的流程图；图5是本专利技术一实施例提供的基于前端埋点的响应式页面热力图的生成方法的流程示意图；图6是本专利技术一实施例提供的基于前端埋点的响应式页面热力图的生成装置的结构示意图。附图标记说明1收集单元2发送单元3处理单元。具体实施方式以下结合附图对本专利技术实施例的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本专利技术实施例，并不用于限制本专利技术实施例。图1是本专利技术一实施例提供的基于前端埋点的响应式页面热力图的生成方法的流程图。如图1所示，该方法包括：步骤S11，基于用户操作收集操作数据，所述操作数据包括所述用户操作指向的需要统计的至少一个页面元素上的标记、至少一个页面地址和至少一个时间戳；步骤S12，基于后端接口地址发送所述操作数据；以及步骤S13，根据所述操作数据生成所述响应式页面热力图。本专利技术是基于JavaScript的前端自定义标记埋点实现响应式页面的热力图。首先，在本实施例中，定义一个数据对象data用来承载需要收集的操作数据，定义一个数组，将收集的标记存入该数组。在收集操作数据时，需要知道在需要统计的页面元素中，用户针对哪个页面元素进行了操作，因此收集的操作数据可以包括用户操作指向的需要统计的至少一个页面元素上的标记，即，收集到的标记都是需要统计的页面元素的标记，忽视用户操作指向的但是不需要统计的页面元素，有效减少了冗余代码及冗余数据。另外，在收集操作数据中还需要知道用户在哪个页面进行的操作以及用户进行操作的时间，因此收集的操作数据还可以包括用户操作指向的至少一个页面地址和至少一个时间戳。以下为收集操作数据部分的代码：随后，请求一个后端接口地址，基于后端接口地址发送操作数据，后端将所述操作数据存入本地数据库的日志，并根据所述操作数据进行计算，得出每个数据点的密度值及权重值，然后依据密度值和权重本文档来自技高网...

【技术保护点】
1.一种基于前端埋点的响应式页面热力图的生成方法，其特征在于，该方法包括：基于用户操作收集操作数据，所述操作数据包括所述用户操作指向的需要统计的至少一个页面元素上的标记、至少一个页面地址和至少一个时间戳；基于后端接口地址发送所述操作数据；以及根据所述操作数据生成所述响应式页面热力图。

【技术特征摘要】
1.一种基于前端埋点的响应式页面热力图的生成方法，其特征在于，该方法包括：基于用户操作收集操作数据，所述操作数据包括所述用户操作指向的需要统计的至少一个页面元素上的标记、至少一个页面地址和至少一个时间戳；基于后端接口地址发送所述操作数据；以及根据所述操作数据生成所述响应式页面热力图。2.根据权利要求1所述的基于前端埋点的响应式页面热力图的生成方法，其特征在于，在基于用户操作收集操作数据之前，该方法还包括：在需要统计的至少一个页面元素上添加至少一个标记，其中，所述至少一个标记中的每个标记的值不同。3.根据权利要求1所述的基于前端埋点的响应式页面热力图的生成方法，其特征在于，该方法还包括：将所述操作数据存入本地数据库的日志。4.根据权利要求1所述的基于前端埋点的响应式页面热力图的生成方法，其特征在于，在基于用户操作收集操作数据之前，该方法还包括：创建script标签；将所述script标签的源属性指向单独的js文件，所述js文件包括收集所述操作数据的步骤和发送所述操作数据的步骤的逻辑代码。5.根据权利要求1所述的基于前端埋点的响应式页面热力图的生成方法，其特征在于，所述基于后端接口地址发送所述操作数据包括：判断所述后端接口地址与执行收集所述操作数据的步骤的地址是否同源；在所述后端接口地址与执行收集所述操作数据的步骤的地址不同源时，创建image对象；拼接所述后端接口地址、所述操作数据以及随机字符串以得到至少一个源属性值；将所述至少一个源属性值赋予所述image对象；以及通过所述image对象发送所述操作数据。6.一种基于前端埋点的响应式页面热力图的生成装置，其特征...

【专利技术属性】
技术研发人员：郭相磊，苏为腾，凌燕，
申请(专利权)人：北京西普阳光教育科技股份有限公司，
类型：发明
国别省市：北京,11