DOM Node Modification Capture for Accurate Web Session Replay
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current systems for capturing user interactions and graphical user interface changes on web documents are inefficient and inaccurate, particularly in dynamic environments with varying devices and network conditions, leading to incomplete data capture and increased bandwidth usage.
Innovation Solution
The system efficiently captures and sends minimal DOM node modifications from a client device to a server-side capture engine, using unique identifiers for user interactions like mouse movements and clicks, and compressing data to ensure accurate playback and analysis without sending the entire DOM or HTML, thus addressing inefficiencies and inaccuracies in existing methods.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Measurement precision
If the entire DOM or HTML is sent back to the server to sync the replay engine with the actual document, then the replay engine achieves accurate synchronization with the remote document, but additional client bandwidth is consumed and other client interactions are slowed down
Solution Approach 1:
The patent extracts only the necessary modifications from the complete DOM/HTML and sends them to the server. Instead of transmitting the entire document structure, the system identifies and sends only the specific node modifications that occurred, significantly reducing bandwidth consumption while maintaining synchronization accuracy.
Solution Approach 2:
The patent segments the DOM modification data into individual node modification events. Each modification is captured as a separate event with specific details about what changed, allowing the server to reconstruct the document state incrementally without receiving the complete DOM tree.
2Device complexity
If Cartesian coordinates are used to capture mouse movements and clicks, then the capture system is simple to implement, but the results are ineffective and inaccurate for analyzing user interactions on responsive documents with dynamic layouts
Solution Approach 1:
The patent changes the parameter used to identify user interactions from Cartesian coordinates to DOM node identifiers. Instead of recording x,y coordinates that become meaningless on responsive layouts, the system captures the actual DOM nodes that were interacted with, ensuring accurate identification of user actions regardless of layout changes.
3Adaptability or versatility
If client-side plugins or server-delivered scripts modify the DOM prior to document load completion, then dynamic content can be loaded and rendered, but keeping the client-side capture agent's data in sync with the replay engine becomes challenging
Solution Approach 1:
The patent implements preliminary action by capturing DOM modifications as they occur during document loading and modification, rather than attempting to sync after the fact. The capture agent monitors and records each modification event in real-time, creating a complete log of DOM changes that can be reliably replayed later.
Data Source
AI summary
The present disclosure describes how to capture events (e.g., changes and user interactions) of a document and combine those changes with the original tree data structure displayed to accurately and efficiently enable a replay engine to redisplay the tree data structure, changes, and user interactions which occurred at the client device. The data collected from a client-side capture engine can be combined with a minimal amount of contextual information to a replay engine so as to accurately and efficiently replay a session of a plurality of documents.