CN116070049A - 一种回溯页面数据的方法、装置、设备和可读存储介质 - Google Patents
一种回溯页面数据的方法、装置、设备和可读存储介质 Download PDFInfo
- Publication number
- CN116070049A CN116070049A CN202310355359.XA CN202310355359A CN116070049A CN 116070049 A CN116070049 A CN 116070049A CN 202310355359 A CN202310355359 A CN 202310355359A CN 116070049 A CN116070049 A CN 116070049A
- Authority
- CN
- China
- Prior art keywords
- page
- data
- user
- operation track
- visual content
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 93
- 230000000007 visual effect Effects 0.000 claims abstract description 89
- 230000008859 change Effects 0.000 claims description 40
- 238000012544 monitoring process Methods 0.000 claims description 17
- 230000003993 interaction Effects 0.000 claims description 8
- 230000006399 behavior Effects 0.000 claims description 7
- 238000012216 screening Methods 0.000 claims description 7
- 230000006835 compression Effects 0.000 claims description 6
- 238000007906 compression Methods 0.000 claims description 6
- 238000001914 filtration Methods 0.000 claims description 5
- 238000004806 packaging method and process Methods 0.000 claims description 5
- 238000004590 computer program Methods 0.000 claims description 3
- 230000000694 effects Effects 0.000 abstract description 9
- 230000008569 process Effects 0.000 description 15
- 238000004891 communication Methods 0.000 description 10
- 238000010586 diagram Methods 0.000 description 9
- 230000006870 function Effects 0.000 description 9
- 238000007726 management method Methods 0.000 description 7
- 230000009471 action Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 150000003839 salts Chemical class 0.000 description 4
- 238000013499 data model Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 230000011664 signaling Effects 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 238000012937 correction Methods 0.000 description 1
- 230000006378 damage Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000003203 everyday effect Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000012913 prioritisation Methods 0.000 description 1
- 238000013515 script Methods 0.000 description 1
- 238000012163 sequencing technique Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Stored Programmes (AREA)
Abstract
本申请提供一种回溯页面数据的方法、装置、设备和可读存储介质，该方法包括，在加载前端页面时，确定缓存中是否存在数据标识；在确定缓存中存在数据标识时，录制前端页面的可视化内容和用户的操作轨迹，其中，可视化内容包括页面元素和页面样式；将可视化内容、操作轨迹和数据标识存储于后端；在回溯页面数据时，通过数据标识查看可视化内容和操作轨迹。通过该方法可以达到提高回溯页面数据的效率的效果。
Description
技术领域
本申请涉及数据回溯的领域，具体而言，涉及一种回溯页面数据的方法、装置、设备和可读存储介质。
背景技术
为保障用户权益、提升用户体验，销售平台对互联网产品的销售进行可回溯，强化销售环节透明性，为此建立前端页面可回溯系统，对数据真实性进行验证，完成销售页面回溯，传统的回溯方法一般都是使用数据埋点方式对销售数据信息进行存储，通过查询埋点获取对应的销售数据信息。
但是，上述通过埋点方式查询得到的内容较多，导致查询时间较长，很难快速定位问题，效率低下。
因此，如何提高回溯页面数据的效率，是一个需要解决的技术问题。
发明内容
本申请实施例的目的在于提供一种回溯页面数据的方法，通过本申请的实施例的技术方案可以达到提高回溯页面数据的效率的效果。
第一方面，本申请实施例提供了一种回溯页面数据的方法，包括，在加载前端页面时，确定缓存中是否存在数据标识；在确定缓存中存在数据标识时，录制前端页面的可视化内容和用户的操作轨迹，其中，可视化内容包括页面元素和页面样式；将可视化内容、操作轨迹和数据标识存储于后端；在回溯页面数据时，通过数据标识查看可视化内容和操作轨迹。
本申请在上述实施例中，通过存储可视化内容和用户的操作轨迹对应的数据标识，可以在进行页面数据回溯时可以直接通过数据标识查看用户的操作，无需像现有技术那样通过埋点逐步的进行回溯，可以达到提高回溯页面数据的效率的效果。
在一些实施例中，在在加载前端页面时，确定缓存中是否存在数据标识之后，还包括：
在确定缓存中不存在数据标识时，基于双加密规则，生成数据标识，其中，双加密规则包括：通过前后端统一用户代理、授权平台标识、当前时间戳、加盐值、随机字符串和有效时间生成数据标识。
本申请在上述实施例中，通过双加密规则可以生成前后端统一的唯一数据标识，可以在进行数据回溯时通过唯一的数据标识进行高效的数据回溯。
在一些实施例中，在录制前端页面的可视化内容和用户的操作轨迹之后，还包括：
将不同页面的页面样式压缩打包，得到多个压缩包；
将多个压缩包回传至后端；
在回显时，根据校验当前页面样式得到的样式版本，匹配对应的页面样式进行回显。
本申请在上述实施例中，将提前存储的页面样式存储于后端，在进行回显时，可以根据样式版本直接获取后端存储的页面样式进行回显，提高了回显的效率。
在一些实施例中，录制前端页面的可视化内容和用户的操作轨迹，包括：
录制前端页面的可视化内容和录制用户的操作轨迹。
本申请在上述实施例中，录制前端页面的内容包括可视化内容和用户的操作轨迹，可以方便查询用户查看的页面和用户的操纵轨迹。
在一些实施例中，录制前端页面的可视化内容，包括：
获取前端页面的页面元素；
对页面元素进行快照版本管理，得到前端页面的样式快照。
本申请在上述实施例中，通过快照的方式可以快速的录制前端页面的元素和页面样式。
在一些实施例中，录制用户的操作轨迹，包括：
为每一个文档对象模型节点添加一个身份标识；
在用户行为轨迹发生变动时，通过应用程序编程接口监听文档对象模型节点的变化，得到用户的操作轨迹。
本申请在上述实施例中，通过监听文档对象节点的变化进而可以反应出用户的操作记录，达到准确录制用户的操作轨迹的效果。
在一些实施例中，通过应用程序编程接口监听文档对象模型节点的变化，得到用户的操作轨迹，包括：
通过应用程序编程接口监听文档对象模型节点的变化，得到初始节点变化数据；
过滤初始节点变化数据中用户自定义设置类型下的数据，得到用户的操作轨迹。
本申请在上述实施例中，可以只针对用户自定义的文档对象模型节点进行监听，进而可以实现只针对需求操作轨迹进行录制，可以减少数据回溯时生成过多的数据，提高数据回溯效率。
在一些实施例中，操作轨迹，包括：
页面内容变更、页面滚动、视图变化、输入框录入和交互中的至少一个。
本申请在上述实施例中，可以对上述多个操作轨迹进行录制，更具多样性。
在一些实施例中，通过数据标识查看可视化内容和操作轨迹，包括：
通过数据标识和用户设置的条件信息筛选可视化内容和操作轨迹，得到筛选后的可视化内容和操作轨迹；
将筛选后的可视化内容和操作轨迹按照时间进行排序，并按照排序顺序进行展示。
本申请在上述实施例中，在进行数据查看时可以根据用户设置的条件从数据标识对应标记的可视化内容和操作轨迹中筛选对应的数据进行查看，可以过滤不需要的数据，提高数据回溯的效率。
第二方面，本申请实施例提供了一种回溯页面数据的装置，包括：
确定模块，用于在加载前端页面时，确定缓存中是否存在数据标识；
录制模块，用于在确定缓存中存在数据标识时，录制前端页面的可视化内容和用户的操作轨迹，其中，可视化内容包括页面元素和页面样式；
存储模块，用于将可视化内容、操作轨迹和数据标识存储于后端；
查询模块，用于在回溯页面数据时，通过数据标识查看可视化内容和操作轨迹。
可选的，所述装置还包括：
生成模块，用于所述确定模块在加载前端页面时，确定缓存中是否存在数据标识之后，在确定缓存中不存在数据标识时，基于双加密规则，生成数据标识，其中，双加密规则包括：通过前后端统一用户代理、授权平台标识、当前时间戳、加盐值、随机字符串和有效时间生成数据标识。
可选的，所述装置还包括：
回显模块，用于所述录制模块在录制前端页面的可视化内容和用户的操作轨迹之后，将不同页面的页面样式压缩打包，得到多个压缩包；
将多个压缩包回传至后端；
在回显时，根据校验当前页面样式得到的样式版本，匹配对应的页面样式进行回显。
可选的，录制模块具体用于：
录制前端页面的可视化内容和录制用户的操作轨迹。
可选的，录制模块具体用于：
获取前端页面的页面元素；
对页面元素进行快照版本管理，得到前端页面的样式快照。
可选的，录制模块具体用于：
为每一个文档对象模型节点添加一个身份标识；
在用户行为轨迹发生变动时，通过应用程序编程接口监听文档对象模型节点的变化，得到用户的操作轨迹。
可选的，录制模块具体用于：
通过应用程序编程接口监听文档对象模型节点的变化，得到初始节点变化数据；
过滤初始节点变化数据中用户自定义设置类型下的数据，得到用户的操作轨迹。
可选的，操作轨迹，包括：
页面内容变更、页面滚动、视图变化、输入框录入和交互中的至少一个。
可选的，查询模块具体用于：
通过数据标识和用户设置的条件信息筛选可视化内容和操作轨迹，得到筛选后的可视化内容和操作轨迹；
将筛选后的可视化内容和操作轨迹按照时间进行排序，并按照排序顺序进行展示。
第三方面，本申请实施例提供一种电子设备，包括处理器以及存储器，所述存储器存储有计算机可读取指令，当所述计算机可读取指令由所述处理器执行时，运行如上述第一方面提供的所述方法中的步骤。
第四方面，本申请实施例提供一种可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时运行如上述第一方面提供的所述方法中的步骤。
本申请的其他特征和优点将在随后的说明书阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请实施例了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
附图说明
为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1为本申请实施例提供的一种回溯页面数据的方法的流程图；
图2为本申请实施例提供的一种上报页面可视化内容的方法的流程图；
图3为本申请实施例提供的一种提交订单时页面数据保存的方法的流程图；
图4为本申请实施例提供的一种回溯页面数据的装置的示意框图；
图5为本申请实施例提供的一种回溯页面数据的装置的结构示意图。
具体实施方式
下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和显示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本申请的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
首先对本申请实施例中涉及的部分用语进行说明，以便于本领域技术人员理解。
终端设备：可以是移动终端、固定终端或便携式终端，例如移动手机、站点、单元、设备、多媒体计算机、多媒体平板、互联网节点、通信器、台式计算机、膝上型计算机、笔记本计算机、上网本计算机、平板计算机、个人通信系统设备、个人导航设备、个人数字助理、音频/视频播放器、数码相机/摄像机、定位设备、电视接收器、无线电广播接收器、电子书设备、游戏设备或者其任意组合，包括这些设备的配件和外设或者其任意组合。还可预见到的是，终端设备能够支持任意类型的针对用户的接口（例如可穿戴设备）等。
服务器：可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务以及大数据和人工智能平台等基础云计算服务的云服务器。
Token：在计算机身份认证中是令牌（临时）的意思，在词法分析中是标记的意思。一般作为邀请、登录系统使用。
CPU：中央处理器（central processing unit，简称CPU）作为计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元。CPU自产生以来，在逻辑结构、运行效率以及功能外延上取得了巨大发展。
加盐值：SALT值属于随机值。用户注册时，系统用来和用户密码进行组合而生成的随机数值，称作salt值，通称为加盐值。
DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。
MutationObserver API:是一个构造函数，通过调用 MutationObserver 构造函数并传入一个回调函数来创建一个观察 DOM 的实例。
JS：JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
H5：（HTML5）是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
本申请应用于页面数据回溯的场景，具体场景为通过录制页面的一些可视化数据和用户的操作轨迹，可以直接查看可视化数据和用户的操作轨迹完成数据回溯。
当前为保障用户权益、提升用户体验，销售平台对互联网产品的销售进行可回溯，强化销售环节透明性，为此建立前端页面可回溯系统，对数据真实性进行验证，完成销售页面回溯，传统的回溯方法一般都是使用数据埋点方式对销售数据信息进行存储，通过查询埋点获取对应的销售数据信息。但是，上述通过埋点方式查询得到的内容较多，导致查询时间较长，很难快速定位问题，效率低下。
为此本申请通过在加载前端页面时，确定缓存中是否存在数据标识；在确定缓存中存在数据标识时，录制前端页面的可视化内容和用户的操作轨迹，其中，可视化内容包括页面元素和页面样式；将可视化内容、操作轨迹和数据标识存储于后端；在回溯页面数据时，通过数据标识查看可视化内容和操作轨迹。通过存储可视化内容和用户的操作轨迹对应的数据标识，可以在进行页面数据回溯时可以直接通过数据标识查看用户的操作，无需像现有技术那样通过埋点逐步的进行回溯，可以达到提高回溯页面数据的效率的效果。
本申请实施例中，执行主体可以为前端页面可回溯系统中的前端页面可回溯设备，实际应用中，前端页面可回溯设备可以为终端设备和服务器等电子设备，在此不做限制。
下面结合图1对本申请实施例的回溯页面数据的方法进行详细描述。
请参看图1，图1为本申请实施例提供的一种回溯页面数据的方法的流程图，如图1所示的回溯页面数据的方法包括：
步骤110：在加载前端页面时，确定缓存中是否存在数据标识。
其中，前端页面可以是一些浏览器的页面。数据标识（token）可以是回溯数据的唯一标识。
在本申请的一些实施例中，在在加载前端页面时，确定缓存中是否存在数据标识之后，图1所示的方法还包括：在确定缓存中不存在数据标识时，基于双加密规则，生成数据标识，其中，双加密规则包括：通过前后端统一用户代理、授权平台标识、当前时间戳、加盐值、随机字符串和有效时间生成数据标识。
本申请在上述过程中，过双加密规则可以生成前后端统一的唯一数据标识，可以在进行数据回溯时通过唯一的数据标识进行高效的数据回溯。
其中，用户代理（User Agent）包括：操作系统及版本、CPU类型、浏览器及版本。随机字符串可以是0-9、a-z或者A-Z中的字符串。当用户随时刷新或者跳出页面加载页面时，都可以通过上述方法查看缓存中的数据标识或者生成对应的数据标识。
步骤120：在确定缓存中存在数据标识时，录制前端页面的可视化内容和用户的操作轨迹。
其中，可视化内容包括页面元素和页面样式。
在本申请的一些实施例中，操作轨迹，包括：页面内容变更、页面滚动、视图变化、输入框录入和交互中的至少一个。
本申请在上述过程中，可以对上述多个操作轨迹进行录制，更具多样性。
其中，页面内容变更可以是一些页面中部分内容发生了变化，例如，节点创建、销毁、属性变化和文本变化，当提示弹框在原有节点记录上增量了DOM数据，则新增节点上的数据需要记录。页面滚动，例如，当前页面滚动偏移量发生了变化。交互可以是按钮点击和鼠标移动等动作形成的操作轨迹，用户的交互的操作主要靠监听input（用户输入内容）和change（用户修改内容）两个事件观察，需要对不同事件但是数据变化的内容的操作轨迹进行去重，针对多个radio（单选按钮）元素的组件 name（名称） 属性相同的情况，当一个单选按钮被选择时，其它单选按钮也可以被反选，此时不会触发任何事件，需要单独处理判断是否记录当前交互数据。
在本申请的一些实施例中，录制前端页面的可视化内容和用户的操作轨迹，包括：录制前端页面的可视化内容和录制用户的操作轨迹。
本申请在上述过程中，录制前端页面的内容包括可视化内容和用户的操作轨迹，可以方便查询用户查看的页面和用户的操纵轨迹。
在本申请的一些实施例中，录制前端页面的可视化内容，包括：获取前端页面的页面元素；对页面元素进行快照版本管理，得到前端页面的样式快照。
本申请在上述过程中，通过快照的方式可以快速的录制前端页面的元素和页面样式。
其中，可以使用MutationObserver（一种监听方法）和WebKitMutationObserver（一种监听方法）等监听方法捕获页面元素DOM，形成基础数据模型，通过基础数据模型针对首次页面元素数据进行快照版本管理，其中快照版本管理包括获取的页面元素包括页面元素节点的身份标识、父节点的身份标识、页面元素类型、页面内数据、页面内文本、页面元素的属性、页面样式和获取页面元素的时间戳等，为了录制结果的体积，可使用GZIP（压缩)方式实时将获取的页面元素和页面样式快照传输至后端进行数据存储。还可以通过获取DOM数据中的链接标签CSS (CascadingStyleSheets 层叠样式表)链接，通过应用程序编程接口（API）对CSS链接上报，并由后端同步并备份样式快照。
下面结合图2对本申请实施例的上报页面可视化内容的方法进行详细描述。
请参看图2，图2为本申请实施例提供的一种上报页面可视化内容的方法的流程图，如图2所示的上报页面可视化内容的方法包括：
步骤210：确定是否回溯当前页面数据。
具体的：在用户的操作出现错误、当前订单未完成提交或者主动提出回溯当前页面数据时，确定回溯当前页面数据，则进入步骤220，确定不回溯当前页面，数据结束流程。
步骤220：确定缓存中是否存在数据标识。
具体的：在加载前端页面时，确定缓存中是否存在数据标识，在确定缓存中不存在数据标识时，进入步骤230，在确定缓存中存在数据标识时，则进入步骤240。
步骤230：生成数据标识。
具体的：基于双加密规则，生成数据标识。
步骤240：获取样式快照，并上报样式快照。
具体的：记录当前页面的样式快照，并将记录的样式快照上报于后端，以便于进行数据回溯时能够根据上报的样式快照匹配对应的样式模板，完成数据回溯。
步骤250：获取页面元素，压缩并上报页面元素。
具体的：获取样式快照同时或者接着获取页面元素，将页面元素打包上报于后端，以便于进行数据回溯时能够根据上报的页面元素生成加载页面内的页面元素，完成数据回溯。
此外，图2所示的具体方法和步骤可以参看图1所示的方法，此处不在过多赘述。
在本申请的一些实施例中，录制用户的操作轨迹，包括：为每一个文档对象模型节点添加一个身份标识；在用户行为轨迹发生变动时，通过应用程序编程接口监听文档对象模型节点的变化，得到用户的操作轨迹。
本申请在上述过程中，通过监听文档对象节点的变化进而可以反应出用户的操作记录，达到准确录制用户的操作轨迹的效果。
其中，可以对基础数据模型中每一个 DOM 节点添加唯一身份标识。当用户行为轨迹存在变动时，可以使用MutationObserver API监听DOM的变化，返回变动记录数组，针对返回的变动记录数组，去除重复操作轨迹。
在本申请的一些实施例中，通过应用程序编程接口监听文档对象模型节点的变化，得到用户的操作轨迹，包括：通过应用程序编程接口监听文档对象模型节点的变化，得到初始节点变化数据；过滤初始节点变化数据中用户自定义设置类型下的数据，得到用户的操作轨迹。
本申请在上述过程中，可以只针对用户自定义的文档对象模型节点进行监听，进而可以实现只针对需求操作轨迹进行录制，可以减少数据回溯时生成过多的数据，提高数据回溯效率。
其中，初始节点变化数据可以是全部文档对象模型节点的变化情况，文档对象模型节点的变化情况可以用于反映出用户的操作，自定义设置类型下的数据可以是一些加入了特殊插件的数据信息，可以是一些自定义设置的不必要操作轨迹，例如，用户点击查看结果操作时，不涉及一些订单提交步骤的操作，因此不需要进行记录。例如，监听到200条数据可以每100条一组计算每组数据大小是否超过阈值（阈值可以自定义设置，例如100kb），在没有超过时可以每1秒进行上报，并防抖节流，以输入框为例可在失去焦点时候捕获输入文本进行记录上报。当最后1秒回溯数据还未上报，用户跳出页面或者刷新页面时，可以采用navigator.sendBeacon（数据异常请求）方法补救避免丢失重要回溯事件数据。回溯上报数据中不排除丢失样式、DOM等数据，可以配合MutationObserver API 对上报产品对应页面的DOM和CSS快照进行补救和过滤可以避免呈现页面数据回溯或者页面回显时失败。
在本申请的一些实施例中，在录制前端页面的可视化内容和用户的操作轨迹之后，图1所示的方法还包括：将不同页面的页面样式压缩打包，得到多个压缩包；将多个压缩包回传至后端；在回显时，根据校验当前页面样式得到的样式版本，匹配对应的页面样式进行回显。
本申请在上述过程中，将提前存储的页面样式存储于后端，在进行回显时，可以根据样式版本直接获取后端存储的页面样式进行回显，提高了回显的效率。
步骤130：将可视化内容、操作轨迹和数据标识存储于后端。
在一些实施例中，本申请基于JS原生开发，可以支持电脑端浏览器页面、H5网页和微信公众号等页面的数据回溯。通过将录制页面可视化内容和用户的操作轨迹，通过UglifyJS（代码优化工具）混淆压缩生成SDK（软件开发工具包）文件，SDK提供公共初始化、开始、停止、录制配置、自定义指令方法和快速接入等操作设置，可以实现快速的和上述多种页面的接入。
步骤140：在回溯页面数据时，通过数据标识查看可视化内容和操作轨迹。
在本申请的一些实施例中，通过数据标识查看可视化内容和操作轨迹，包括：通过数据标识和用户设置的条件信息筛选可视化内容和操作轨迹，得到筛选后的可视化内容和操作轨迹；将筛选后的可视化内容和操作轨迹按照时间进行排序，并按照排序顺序进行展示。
本申请在上述过程中，在进行数据查看时可以根据用户设置的条件从数据标识对应标记的可视化内容和操作轨迹中筛选对应的数据进行查看，可以过滤不需要的数据，提高数据回溯的效率。
例如，回溯管理后台系统可通过统计图查看每天视频回溯数据情况时，可以通过筛选条件和数据标识进行查看不同用户的可视化内容和用户的操作轨迹，可扩展业务增加多条件，条件信息可以是设置默认支持渠道、数据标识、产品名称和操作时间等条件，通过筛选条件得出可视化内容和用户的操作轨迹对应的播放视频。使用前端录制的回溯数据，通过时间戳及身份号序列化排序，逐帧执行每条可视化内容和用户的操作轨迹，呈现视频效果。
在上述图1所示的过程中，本申请通过在加载前端页面时，确定缓存中是否存在数据标识；在确定缓存中存在数据标识时，录制前端页面的可视化内容和用户的操作轨迹，其中，可视化内容包括页面元素和页面样式；将可视化内容、操作轨迹和数据标识存储于后端；在回溯页面数据时，通过数据标识查看可视化内容和操作轨迹。通过存储可视化内容和用户的操作轨迹对应的数据标识，可以在进行页面数据回溯时可以直接通过数据标识查看用户的操作，无需像现有技术那样通过埋点逐步的进行回溯，可以达到提高回溯页面数据的效率的效果。
前文通过图1-图2描述了回溯页面数据的方法和上报页面可视化内容的方法，下面结合图3描述提交订单时页面数据保存的方法。
请参看图3，图3为本申请实施例提供的一种提交订单时页面数据保存的方法的流程图，如图3所示的提交订单时页面数据保存的方法包括：
在用户提交订单的过程中，在主节点会判断当前缓存中是否存在TOKEN（数据标识），当不存在数据标识时，使用双加密规则，生成TOKEN，当存在数据标识时，则保存页面和快照，具体的保存页面元素和页面样式快照于后端。用户行为上报包括保存用户的操作轨迹，保存用户的操作轨迹于后端。子节点上报可以上报当前提交订单过程中的触发数据回溯的指令，在提交订单时，显示未完成订单或者上报TOKEN、产品编码和订单绑定等信息，后端回调更新状态，将上报的页面回溯数据进行回显更新，实现用户操作的更正完成订单。
此外，图3所示的具体方法和步骤可以参看图1所示的方法，此处不在过多赘述。
前文通过图1描述了回溯页面数据的方法，下面结合图4-图5描述回溯页面数据的装置。
请参照图4，为本申请实施例中提供的一种回溯页面数据的装置400的示意框图，该装置400可以是电子设备上的模块、程序段或代码。该装置400与上述图1方法实施例对应，能够执行图1方法实施例涉及的各个步骤，该装置400具体的功能可以参见下文中的描述，为避免重复，此处适当省略详细描述。
可选的，所述装置400包括：
确定模块410，用于在加载前端页面时，确定缓存中是否存在数据标识；
录制模块420，用于在确定缓存中存在数据标识时，录制前端页面的可视化内容和用户的操作轨迹，其中，可视化内容包括页面元素和页面样式；
存储模块430，用于将可视化内容、操作轨迹和数据标识存储于后端；
查询模块440，用于在回溯页面数据时，通过数据标识查看可视化内容和操作轨迹。
可选的，所述装置还包括：
生成模块，用于所述确定模块在加载前端页面时，确定缓存中是否存在数据标识之后，在确定缓存中不存在数据标识时，基于双加密规则，生成数据标识，其中，双加密规则包括：通过前后端统一用户代理、授权平台标识、当前时间戳、加盐值、随机字符串和有效时间生成数据标识。
可选的，所述装置还包括：
回显模块，用于所述录制模块在录制前端页面的可视化内容和用户的操作轨迹之后，将不同页面的页面样式压缩打包，得到多个压缩包；将多个压缩包回传至后端；在回显时，根据校验当前页面样式得到的样式版本，匹配对应的页面样式进行回显。
可选的，录制模块具体用于：
录制前端页面的可视化内容和录制用户的操作轨迹。
可选的，录制模块具体用于：
获取前端页面的页面元素；对页面元素进行快照版本管理，得到前端页面的样式快照。
可选的，录制模块具体用于：
为每一个文档对象模型节点添加一个身份标识；在用户行为轨迹发生变动时，通过应用程序编程接口监听文档对象模型节点的变化，得到用户的操作轨迹。
可选的，录制模块具体用于：
通过应用程序编程接口监听文档对象模型节点的变化，得到初始节点变化数据；过滤初始节点变化数据中用户自定义设置类型下的数据，得到用户的操作轨迹。
可选的，操作轨迹，包括：
页面内容变更、页面滚动、视图变化、输入框录入和交互中的至少一个。
可选的，查询模块具体用于：
通过数据标识和用户设置的条件信息筛选可视化内容和操作轨迹，得到筛选后的可视化内容和操作轨迹；将筛选后的可视化内容和操作轨迹按照时间进行排序，并按照排序顺序进行展示。
请参照图5为本申请实施例中提供的一种回溯页面数据的装置的结构示意图，该装置可以包括存储器510和处理器520。可选的，该装置还可以包括：通信接口530和通信总线540。该装置与上述图1方法实施例对应，能够执行图1方法实施例涉及的各个步骤，该装置具体的功能可以参见下文中的描述。
具体的，存储器510，用于存储计算机可读指令。
处理器520，用于处理存储器存储的可读指令，能够执行图1方法中的各个步骤。
通信接口530，用于与其他节点设备进行信令或数据的通信。例如：用于与服务器或者终端的通信，或者与其它设备节点进行通信，本申请实施例并不限于此。
通信总线540，用于实现上述组件直接的连接通信。
其中，本申请实施例中设备的通信接口530用于与其他节点设备进行信令或数据的通信。存储器510可以是高速RAM存储器，也可以是非不稳定的存储器（non-volatilememory），例如至少一个磁盘存储器。存储器510可选的还可以是至少一个位于远离前述处理器的存储装置。存储器510中存储有计算机可读取指令，当所述计算机可读取指令由所述处理器520执行时，电子设备执行上述图1所示方法过程。处理器520可以用于装置400上，并且用于执行本申请中的功能。示例性地，上述的处理器520可以是通用处理器、数字信号处理器（Digital Signal Processor，DSP）、专用集成电路（Application SpecificIntegrated Circuit，ASIC）、现成可编程门阵列（Field Programmable Gate Array，FPGA）或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，本申请实施例并不局限于此。
本申请实施例还提供一种可读存储介质，所述计算机程序被处理器执行时，执行如图1所示方法实施例中电子设备所执行的方法过程。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置的具体工作过程，可以参考前述方法中的对应过程，在此不再过多赘述。
综上所述，本申请实施例提供一种回溯页面数据的方法、装置、电子设备和可读存储介质，该方法包括，在加载前端页面时，确定缓存中是否存在数据标识；在确定缓存中存在数据标识时，录制前端页面的可视化内容和用户的操作轨迹，其中，可视化内容包括页面元素和页面样式；将可视化内容、操作轨迹和数据标识存储于后端；在回溯页面数据时，通过数据标识查看可视化内容和操作轨迹。通过该方法可以达到提高回溯页面数据的效率的效果。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
Claims (12)
1.一种回溯页面数据的方法，其特征在于，包括：
在加载前端页面时，确定缓存中是否存在数据标识；
在确定所述缓存中存在所述数据标识时，录制所述前端页面的可视化内容和用户的操作轨迹，其中，所述可视化内容包括页面元素和页面样式；
将所述可视化内容、所述操作轨迹和所述数据标识存储于后端；
在回溯页面数据时，通过所述数据标识查看所述可视化内容和所述操作轨迹。
2.根据权利要求1所述的方法，其特征在于，在所述在加载前端页面时，确定缓存中是否存在数据标识之后，所述方法还包括：
在确定所述缓存中不存在所述数据标识时，基于双加密规则，生成所述数据标识，其中，所述双加密规则包括：通过前后端统一用户代理、授权平台标识、当前时间戳、加盐值、随机字符串和有效时间生成所述数据标识。
3.根据权利要求1或2所述的方法，其特征在于，在所述录制所述前端页面的可视化内容和用户的操作轨迹之后，所述方法还包括：
将不同页面的页面样式压缩打包，得到多个压缩包；
将所述多个压缩包回传至所述后端；
在回显时，根据校验当前页面样式得到的样式版本，匹配对应的页面样式进行回显。
4.根据权利要求1或2所述的方法，其特征在于，所述录制所述前端页面的可视化内容和用户的操作轨迹，包括：
录制所述前端页面的所述可视化内容和录制所述用户的所述操作轨迹。
5.根据权利要求4所述的方法，其特征在于，所述录制所述前端页面的所述可视化内容，包括：
获取所述前端页面的页面元素；
对所述页面元素进行快照版本管理，得到所述前端页面的样式快照。
6.根据权利要求4所述的方法，其特征在于，所述录制所述用户的所述操作轨迹，包括：
为每一个文档对象模型节点添加一个身份标识；
在用户行为轨迹发生变动时，通过应用程序编程接口监听所述文档对象模型节点的变化，得到所述用户的所述操作轨迹。
7.根据权利要求6所述的方法，其特征在于，所述通过应用程序编程接口监听所述文档对象模型节点的变化，得到所述用户的所述操作轨迹，包括：
通过所述应用程序编程接口监听所述文档对象模型节点的变化，得到初始节点变化数据；
过滤所述初始节点变化数据中用户自定义设置类型下的数据，得到所述用户的所述操作轨迹。
8.根据权利要求1或2所述的方法，其特征在于，所述操作轨迹，包括：
页面内容变更、页面滚动、视图变化、输入框录入和交互中的至少一个。
9.根据权利要求1或2所述的方法，其特征在于，所述通过所述数据标识查看所述可视化内容和所述操作轨迹，包括：
通过所述数据标识和所述用户设置的条件信息筛选所述可视化内容和所述操作轨迹，得到筛选后的可视化内容和操作轨迹；
将所述筛选后的可视化内容和操作轨迹按照时间进行排序，并按照排序顺序进行展示。
10.一种回溯页面数据的装置，其特征在于，包括：
确定模块，用于在加载前端页面时，确定缓存中是否存在数据标识；
录制模块，用于在确定所述缓存中存在所述数据标识时，录制所述前端页面的可视化内容和用户的操作轨迹，其中，所述可视化内容包括页面元素和页面样式；
存储模块，用于将所述可视化内容、所述操作轨迹和所述数据标识存储于后端；
查询模块，用于在回溯页面数据时，通过所述数据标识查看所述可视化内容和所述操作轨迹。
11.一种电子设备，其特征在于，包括：
存储器和处理器，所述存储器存储有计算机可读取指令，当所述计算机可读取指令由所述处理器执行时，运行如权利要求1-9中任一项所述方法中的步骤。
12.一种计算机可读存储介质，其特征在于，包括：
计算机程序，当所述计算机程序在计算机上运行时，使得所述计算机执行如权利要求1-9中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310355359.XA CN116070049B (zh) | 2023-04-06 | 2023-04-06 | 一种回溯页面数据的方法、装置、设备和可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310355359.XA CN116070049B (zh) | 2023-04-06 | 2023-04-06 | 一种回溯页面数据的方法、装置、设备和可读存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116070049A true CN116070049A (zh) | 2023-05-05 |
| CN116070049B CN116070049B (zh) | 2023-07-28 |
Family
ID=86180595
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310355359.XA Active CN116070049B (zh) | 2023-04-06 | 2023-04-06 | 一种回溯页面数据的方法、装置、设备和可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116070049B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117632885A (zh) * | 2024-01-25 | 2024-03-01 | 太平金融科技服务（上海）有限公司 | 一种回溯系统中的资源同步方法、装置、设备及介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112445757A (zh) * | 2020-09-08 | 2021-03-05 | 微民保险代理有限公司 | 可视化日志存储和回溯方法、装置和计算机设备 |
| CN112861050A (zh) * | 2021-04-26 | 2021-05-28 | 北京健康之家科技有限公司 | 页面数据回溯方法、装置及设备 |
| US20210326912A1 (en) * | 2020-08-21 | 2021-10-21 | Alipay (Hangzhou) Information Technology Co., Ltd. | Blockchain-based data processing systems, methods, and apparatuses |
| CN114398243A (zh) * | 2021-12-21 | 2022-04-26 | 广州佰锐网络科技有限公司 | 一种关于用户操作轨迹的回溯方法及系统 |
| CN115292636A (zh) * | 2022-07-05 | 2022-11-04 | 中信百信银行股份有限公司 | H5页面录制方法、装置和设备及存储介质 |
-
2023
- 2023-04-06 CN CN202310355359.XA patent/CN116070049B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20210326912A1 (en) * | 2020-08-21 | 2021-10-21 | Alipay (Hangzhou) Information Technology Co., Ltd. | Blockchain-based data processing systems, methods, and apparatuses |
| CN112445757A (zh) * | 2020-09-08 | 2021-03-05 | 微民保险代理有限公司 | 可视化日志存储和回溯方法、装置和计算机设备 |
| CN112861050A (zh) * | 2021-04-26 | 2021-05-28 | 北京健康之家科技有限公司 | 页面数据回溯方法、装置及设备 |
| CN114398243A (zh) * | 2021-12-21 | 2022-04-26 | 广州佰锐网络科技有限公司 | 一种关于用户操作轨迹的回溯方法及系统 |
| CN115292636A (zh) * | 2022-07-05 | 2022-11-04 | 中信百信银行股份有限公司 | H5页面录制方法、装置和设备及存储介质 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117632885A (zh) * | 2024-01-25 | 2024-03-01 | 太平金融科技服务（上海）有限公司 | 一种回溯系统中的资源同步方法、装置、设备及介质 |
| CN117632885B (zh) * | 2024-01-25 | 2024-04-16 | 太平金融科技服务（上海）有限公司 | 一种回溯系统中的资源同步方法、装置、设备及介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116070049B (zh) | 2023-07-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8768928B2 (en) | Document object model (DOM) based page uniqueness detection | |
| WO2017166644A1 (zh) | 一种数据采集方法和系统 | |
| CN100489879C (zh) | 一种对页面数据进行校验的方法、系统和服务器 | |
| US8856157B2 (en) | Automatic detection of columns to be obfuscated in database schemas | |
| CN111901192B (zh) | 一种页面访问数据的统计方法及装置 | |
| WO2020248875A1 (zh) | 版本比对方法、系统、计算机设备及可读存储介质 | |
| CN109376291B (zh) | 一种基于网络爬虫的网站指纹信息扫描的方法及装置 | |
| US20130218919A1 (en) | Method and apparatus for managing content | |
| US9298850B2 (en) | System and method for exclusion of irrelevant data from a DOM equivalence | |
| CN103443781A (zh) | 数据递送 | |
| CN111177618A (zh) | 网站搭建方法、装置、设备及计算机可读存储介质 | |
| CN107085549B (zh) | 故障信息生成的方法和装置 | |
| CN116070049B (zh) | 一种回溯页面数据的方法、装置、设备和可读存储介质 | |
| CN108737252B (zh) | 基于区块链的信息推送方法及装置 | |
| CN111400170B (zh) | 一种数据权限测试方法及装置 | |
| CN112925757A (zh) | 一种追踪智能设备操作日志的方法、设备、存储介质 | |
| CN114398243A (zh) | 一种关于用户操作轨迹的回溯方法及系统 | |
| CN115544183A (zh) | 数据可视化方法、装置、计算机设备和存储介质 | |
| CN112579596A (zh) | 一种数据回放方法、装置、存储介质和电子设备 | |
| CN105468511A (zh) | 网页脚本错误定位方法及装置 | |
| CN109240664B (zh) | 一种采集用户行为信息的方法及终端 | |
| CN111625528A (zh) | 配置管理数据库的校验方法、装置及可读存储介质 | |
| KR101111956B1 (ko) | 컴퓨팅 장치의 모니터링 내용 제공 시스템 및 방법 | |
| CN113051095B (zh) | 客户端运行错误的复现方法、装置、电子设备及存储介质 | |
| Li et al. | Modeling web application for cross-browser compatibility testing |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP01 | Change in the name or title of a patent holder |
Address after: Room 716, floor 7, building 2, No. 28 Andingmen East Street, Dongcheng District, Beijing 100010 Patentee after: Beijing Easy Yikang Information Technology Co.,Ltd. Address before: Room 716, floor 7, building 2, No. 28 Andingmen East Street, Dongcheng District, Beijing 100010 Patentee before: BEIJING QINGSONGCHOU INFORMATION TECHNOLOGY Co.,Ltd. |
|
| CP01 | Change in the name or title of a patent holder |