Client operation real-time synchronization system and method based on H5DOM tree

Abstract

The invention relates to the technical field of internet communication, in particular to a client operation real-time synchronization system and method based on an H5DOM tree, and the system comprises an H5 front-end module which is used for initializing a data reporting SDK after a user logs in, monitoring the operation of the user on an H5 page, triggering an operation notification event, and reporting DOM node changes; the data reporting SDK module is used for receiving an operation notification event, verifying a user and an operation page, filtering sensitive information, encoding operation data into a structured format, and transmitting the operation data in real time through a WebSocket protocol; the data processing server module is used for storing the operation data reported by the SDK and providing data query service; and the telemarketing system end module is used for querying operation data when the seat initiates a user operation viewing request, rendering the operation data into a video in real time according to the DOM tree change, and synchronously displaying customer operation at a computer end of a seat person. The method is low in bandwidth, high in real-time performance and safe in privacy, sensitive information is not reported, and the risk of data leakage is avoided.

Description

Technical Field

[0001] The present invention relates to the field of Internet communication technology, and in particular to a client operation real-time synchronization system and method based on an H5 DOM tree. Background Art

[0002] In telesales scenarios, agents often need to guide customers through specific actions within the app's HTML5 interface, such as registration, payment, and form filling. However, because agents cannot see the customer's operation process in real time, communication efficiency is low, making it difficult to accurately identify bottlenecks in the customer's operation. This can even increase the risk of customer complaints due to blocked operations. When customers encounter difficulties during an operation, they often struggle to accurately describe the problem, and agents can only understand the customer's current status through verbal inquiries. This information asymmetry seriously affects sales conversion efficiency.

[0003] Existing solutions primarily include technologies like remote desktop sharing and screen recording, but these solutions have significant shortcomings. First, traditional remote sharing or screen recording technologies record the entire screen of the client's device, inevitably capturing sensitive information such as payment details and personal data, posing a serious risk of privacy breaches. Second, video streaming requires significant network bandwidth and is prone to lag and delays in mobile network environments, impacting the real-time interactive experience. Furthermore, given the diversity of user devices, adapting to different devices and operating systems presents a difficult technical challenge, making it difficult to provide a unified solution.

[0004] To address these issues, a technical solution is urgently needed that can display customer operation status in real time while protecting user privacy, while also requiring low bandwidth consumption and high compatibility. This is the result of a real-time customer operation synchronization system based on the H5 DOM tree. This system significantly reduces bandwidth consumption by collecting only DOM operation data rather than the full video stream. It also ensures user privacy by filtering sensitive information through pre-set rules. Furthermore, through server-side DOM tree reconstruction and dynamic rendering, it enables synchronized display of operations across platforms. This innovative technical solution provides a more efficient and secure tool for customer guidance in telesales scenarios, effectively resolving key issues with existing technologies. Summary of the Invention

[0005] Based on the above objectives, the present invention provides a real-time synchronization system for client operations based on H5 DOM tree, including:

[0006] The H5 front-end module is used to initialize data reporting to the SDK after the user logs in, monitor user operations on the H5 page, trigger operation notification events, and report DOM node changes;

[0007] The data reporting SDK module is used to receive operation notification events, verify users and operation pages, filter sensitive information, and encode operation data into a structured format for real-time transmission via the WebSocket protocol;

[0008] The data processing server module is used to store the operation data reported by the SDK and provide data query services;

[0009] The telesales system module is used to query operation data when an agent initiates a request to view user operations, render the data into a video in real time according to the changes in the DOM tree, and synchronously display the customer operations on the agent's computer.

[0010] Furthermore, the data reporting SDK module includes:

[0011] Identity verification unit, used to verify user identity and whether the operation page needs to be reported;

[0012] Data filtering unit, used to filter sensitive information such as passwords and payment information to ensure that only non-privacy operation data is reported;

[0013] A lightweight data reporting unit, used to encode operation data into a structured format and transmit it to the server in real time via the WebSocket protocol.

[0014] Furthermore, the data processing server module includes:

[0015] Data storage unit, used to receive and store operation data from the data reporting SDK;

[0016] A data query unit, used to support the telemarketing system to query operation data based on user identification;

[0017] The data archiving unit is used to regularly archive the operation data in the database.

[0018] Furthermore, the telemarketing system module includes:

[0019] A query request unit, used to initiate a request to view user operations;

[0020] Dynamic rendering unit, used to render into video in real time based on DOM tree change information;

[0021] The display unit is used to synchronously display customer operations on the agent's computer.

[0022] The real-time synchronization method for client operations based on the H5 DOM tree includes the following steps:

[0023] The H5 page is loaded, and after the user logs in, the data reporting SDK is called to initialize the SDK;

[0024] Monitor user operations on H5 pages, trigger operation notification events, and report DOM node changes;

[0025] Receive operation notification events, verify whether the user and the operation page need to be reported, filter sensitive information, encode the operation data into a structured format, and transmit it to the server in real time via the WebSocket protocol;

[0026] The server stores the operation data reported by the SDK and provides data query services;

[0027] When an agent initiates a request to view user operations, the operation data is queried and rendered as a video in real time according to the changes in the DOM tree, and the customer operations are synchronously displayed on the agent's computer.

[0028] Further steps to filter sensitive information include:

[0029] Identify sensitive data entry areas for passwords and payment information;

[0030] For identified sensitive areas, only the user's operation location and button click events are recorded, and the actual input content is not recorded;

[0031] For highly sensitive areas including payment passwords, data collection in this area is completely blocked.

[0032] Furthermore, the steps for real-time transmission via the WebSocket protocol include:

[0033] Adopting an incremental update strategy, only transmitting the changed DOM node information;

[0034] Control transmission delay within 100 milliseconds to ensure real-time performance.

[0035] Furthermore, the steps of rendering the video in real time according to the DOM tree changes include:

[0036] Reconstruct the DOM tree change sequence in chronological order;

[0037] Dynamically render DOM tree changes to generate video-like display effects;

[0038] Highlight key operation areas or buttons.

[0039] The real-time synchronization method for customer operations based on the H5 DOM tree also includes the following steps for analyzing operation data:

[0040] Record the customer's operation path and the time spent at each step;

[0041] Analyze abnormal patterns in customer operations for risk control or marketing optimization;

[0042] When it is detected that the customer stays at a certain step for too long, a prompt will be automatically sent to the agent.

[0043] Furthermore, the method is applied to customer guidance in telephone sales scenarios, including but not limited to user registration, product purchase, and payment process operations.

[0044] Beneficial effects of the present invention:

[0045] First, this invention utilizes lightweight data acquisition and transmission technology based on the H5 DOM tree, offering significant bandwidth advantages over traditional screen sharing or video streaming solutions. The system transmits only DOM operation data, not the entire video image. A single operation requires only tens of bytes of data, and transmission latency is controlled to under 100 milliseconds, achieving true real-time synchronization. Even under poor network conditions, the system maintains stable data transmission, ensuring agents can promptly observe customer operation status and improving the efficiency and accuracy of sales guidance.

[0046] Second, this invention utilizes a sophisticated data filtering mechanism to prevent sensitive information from being reported, effectively mitigating the risk of data leakage. The system intelligently identifies sensitive areas such as password input boxes and payment information areas, applying special processing to these areas: only the user's action location and button clicks are recorded, not the actual input content. For the highly sensitive payment password area, the system completely blocks data collection. This design not only meets the agent's need to understand the customer's operational status, but also ensures customer privacy and security. It complies with modern data protection regulations and provides a strong safeguard for enterprises to mitigate compliance risks.

[0047] 3. The present invention is based on the H5 technology architecture and has excellent cross-platform compatibility. It can adapt to various mobile APPs and browser environments without considering differences in the operating system, screen resolution, etc. of the client's device. At the same time, the operational data collected by the system is not only used for real-time display, but can also be precipitated into analyzable user behavior data for various business scenarios such as risk analysis, anti-fraud, and user experience optimization. For example, by analyzing the time customers spend at certain operating steps, pain points in product design can be identified; by detecting abnormal operating patterns, risk control systems can be assisted in fraud identification. This data assetization feature creates long-term business value for enterprises that goes beyond the value of immediate customer service. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] In order to more clearly illustrate the technical solutions in the present invention or the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only for the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0049] Fig. 1 Schematic diagram of the system architecture of an embodiment of the present invention;

[0050] Fig. 2 Schematic diagram of the workflow of an embodiment of the present invention. DETAILED DESCRIPTION

[0051] The present invention is described in detail below with reference to the accompanying drawings and specific embodiments. It is also noted that, to provide a more detailed description, the following embodiments are best and preferred embodiments, and those skilled in the art may employ alternative methods for implementing certain known technologies. Furthermore, the accompanying drawings are intended only to provide a more detailed description of the embodiments and are not intended to limit the present invention.

[0052] It should be noted that references in the specification to "one embodiment," "an embodiment," "an exemplary embodiment," "some embodiments," etc. indicate that the described embodiments may include specific features, structures, or characteristics, but not every embodiment necessarily includes such specific features, structures, or characteristics. In addition, when specific features, structures, or characteristics are described in conjunction with an embodiment, it is within the knowledge of persons skilled in the relevant art to implement such features, structures, or characteristics in conjunction with other embodiments (whether or not explicitly described).

[0053] In general, terms can be understood, at least in part, from their use in context. For example, depending at least in part on the context, the term "one or more" as used herein can be used to describe any feature, structure, or characteristic in the singular sense, or can be used to describe a combination of features, structures, or characteristics in the plural sense. Additionally, the term "based on" can be understood as not necessarily intended to convey an exclusive set of factors, but can instead, depending at least in part on the context, allow for the presence of other factors that are not necessarily explicitly described.

[0054] See Figs. 1-2

[0055] 1. System Architecture Implementation

[0056] This invention provides a real-time synchronization system for customer operations based on the H5 DOM tree. Its overall architecture consists of four main modules: the H5 front-end, the data reporting SDK, the data processing server, and the telemarketing system. The specific implementation of each module is as follows:

[0057] 1. H5 front-end module

[0058] The H5 front-end module is responsible for collecting user operation data on the H5 page. Its specific implementation is as follows:

[0059] When the H5 page is loaded, the system detects the user's login status, and only calls the data reporting SDK after the user successfully logs in, and initializes the SDK.

[0060] After initialization, the system starts listening to various user operations on the H5 page, including but not limited to clicking, sliding, inputting, and other DOM interaction events.

[0061] When monitoring user operations, the system triggers operation notification events and reports relevant DOM node change information.

[0062] 2. Data reporting SDK module

[0063] The data reporting SDK module is responsible for processing and transmitting user operation data. Its specific implementation is as follows:

[0064] Receive operation notification events from the H5 front end, verify user identity and operation page, and determine whether to report the operation to achieve controllability of the reporting range.

[0065] Through the data filtering module, the collected data is processed to filter sensitive information such as passwords and payment information, ensuring that only non-private operation data is reported.

[0066] The lightweight data reporting module encodes the processed operation data into a structured format and transmits it to the server in real time through the WebSocket protocol.

[0067] 3. Data processing server module

[0068] The data processing server module is responsible for receiving, storing, and processing user operation data. Its specific implementation is as follows:

[0069] Receive operation data from the data reporting SDK and store it in the database.

[0070] Provide data query services, allowing the electric sales system to query operation data based on user identification, time range, and other conditions.

[0071] Periodically archive operation data in the database to optimize storage space and query efficiency.

[0072] 4. Electric sales system module

[0073] The electric sales system module is responsible for displaying customer operation information for telephone sales representatives to view. Its specific implementation is as follows:

[0074] When a representative initiates a request to view user operations, the system queries the relevant operation data from the data processing server.

[0075] After receiving the operation data, the system renders it into a video-like display effect in real time based on the DOM tree change information.

[0076] The customer's operation process is displayed synchronously on the agent's computer, so that the agent can intuitively understand the customer's actual operation status.

[0077] Example

[0078] Example 1: Operation synchronization in user registration scenario

[0079] In this embodiment, the telephone sales agent guides the customer to complete the registration process on the H5 page within the APP. The specific implementation process is as follows:

[0080] H5 front-end initialization and data collection:

[0081] After the customer opens the registration H5 page in the APP, the page is loaded and triggers SDK initialization.

[0082] After the SDK is initialized, the system starts monitoring the customer's operation behavior.

[0083] When a customer clicks the "Register" button and fills in form fields, such as username, mobile phone number, or sliding verification code, the system captures these DOM operation events in real time.

[0084] Data filtering and lightweight transmission:

[0085] After receiving the operation notification event, the data reporting SDK first verifies whether the operation needs to be reported.

[0086] The system automatically filters sensitive information. For example, when a customer enters content in the password input box, the SDK only records "the user entered content in the password field" instead of the actual password value entered.

[0087] Server-side data processing:

[0088] After receiving the operation data, the server stores it in the MongoDB database.

[0089] Optimize data indexes to improve query efficiency.

[0090] The system regularly archives operational data that is more than 7 days old, preferably every morning.

[0091] Telemarketing system display:

[0092] While on a call with a customer, an agent initiates a "View Customer Operations" request through the telesales system interface.

[0093] The system queries recent operation data based on customer identification, such as mobile phone number or user ID.

[0094] Reconstruct the queried DOM operation data into a DOM tree change sequence in chronological order.

[0095] The system dynamically renders these DOM tree changes to generate a video-like display effect, allowing agents to intuitively see the customer's operations on the page.

[0096] The agent found that the customer stayed on the verification code sliding step for too long and immediately provided corresponding guidance.

[0097] Example 2: Operation synchronization in the payment process

[0098] In this embodiment, the telephone sales agent guides the customer to complete the product purchase and payment process. The specific implementation process is as follows:

[0099] H5 front-end initialization and data collection:

[0100] When the customer opens the product payment H5 page, the system detects that the customer is logged in and automatically initializes the SDK.

[0101] The system monitors customer operations on the payment page, including selecting a payment method, clicking a payment button, and other DOM interaction events.

[0102] Sensitive Information Protection:

[0103] When the customer enters the bank card information input interface, the data reporting SDK recognizes that the page contains sensitive information.

[0104] The SDK automatically marks the page as a "sensitive area" and only reports the user's click locations and button operations on the page, without reporting the actual card number, password, and other information entered.

[0105] For the payment password input interface, the system completely blocks data collection in this area to ensure payment security.

[0106] Real-time data transmission and processing:

[0107] The system adopts an incremental update strategy, only transmitting the changed DOM node information, further reducing the amount of data transmission.

[0108] After receiving the data, the server establishes a special data analysis model for the payment process to record indicators such as the customer's stay time and number of retries in the payment process.

[0109] Intelligent display of telemarketing system:

[0110] When the agent checks the customer's operations through the telesales system, the system automatically recognizes that the customer is currently in the payment process.

[0111] The system optimizes the display effect for payment scenarios, such as highlighting key buttons such as "Confirm Payment" and "Cancel".

[0112] When the system detects that the customer spends too long at a certain step, such as selecting a payment method, it automatically sends a reminder to the agent, suggesting that the agent intervene and provide guidance in a timely manner.

[0113] Agents can accurately guide customers to complete the payment process based on the real-time display of customer operations.

[0114] Through the above implementation methods and examples, the present invention realizes real-time synchronization of customer operations based on the H5 DOM tree, effectively solving the problem that agents in telephone sales scenarios cannot view customer operations in real time, while taking into account data transmission efficiency and privacy security, and has significant practical value.

[0115] The present invention encompasses any alternatives, modifications, equivalents, and solutions that fall within the spirit and scope of the present invention. To provide a thorough understanding of the present invention, specific details are described in detail below in connection with the preferred embodiments of the present invention, but those skilled in the art will be able to fully understand the present invention without these detailed descriptions. Furthermore, to avoid unnecessary confusion regarding the essence of the present invention, well-known methods, processes, procedures, components, and circuits have not been described in detail.

[0116] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present invention. These improvements and modifications should also be regarded as within the scope of protection of the present invention.

Claims

1. A real-time synchronization system for customer operations based on H5 DOM tree, characterized in that: include: The H5 front-end module is used to initialize data reporting to the SDK after the user logs in, monitor user operations on the H5 page, trigger operation notification events, and report DOM node changes; The data reporting SDK module is used to receive operation notification events, verify users and operation pages, filter sensitive information, and encode operation data into a structured format for real-time transmission via the WebSocket protocol; The data processing server module is used to store the operation data reported by the SDK and provide data query services; The telesales system module is used to query operation data when an agent initiates a request to view user operations, render the data into a video in real time according to the changes in the DOM tree, and synchronously display the customer operations on the agent's computer.

2. The system according to claim 1, wherein: The data reporting SDK module includes: Identity verification unit, used to verify user identity and whether the operation page needs to be reported; Data filtering unit, used to filter sensitive information such as passwords and payment information to ensure that only non-privacy operation data is reported; A lightweight data reporting unit, used to encode operation data into a structured format and transmit it to the server in real time via the WebSocket protocol.

3. The system according to claim 1, wherein: The data processing server module includes: Data storage unit, used to receive and store operation data from the data reporting SDK; A data query unit, used to support the telemarketing system to query operation data based on user identification; The data archiving unit is used to regularly archive the operation data in the database.

4. The system according to claim 1, wherein: The telemarketing system end module includes: A query request unit, used to initiate a request to view user operations; Dynamic rendering unit, used to render into video in real time based on DOM tree change information; The display unit is used to synchronously display customer operations on the agent's computer.

5. A real-time synchronization method for client operations based on H5 DOM tree, characterized in that: The following steps are involved: Step 1: Load the H5 page, call the data reporting SDK after the user logs in, and initialize the SDK; Step 2: Monitor user operations on the H5 page, trigger operation notification events, and report DOM node changes; Step 3: Receive the operation notification event, verify whether the user and the operation page need to be reported, filter sensitive information, encode the operation data into a structured format, and transmit it to the server in real time via the WebSocket protocol; Step 4: The server stores the operation data reported by the SDK and provides data query services; Step 5: When the agent initiates a request to view user operations, the operation data is queried and rendered as a video in real time according to the changes in the DOM tree, and the customer operations are synchronously displayed on the agent's computer.

6. The method according to claim 5, characterized in that The step of filtering sensitive information includes: Step 1: Identify sensitive data input areas for passwords and payment information; Step 2: For the identified sensitive areas, only the user's operation location and button click events are recorded, without recording the actual input content; Step 3: Completely block data collection in highly sensitive areas including payment passwords.

7. The method according to claim 5, characterized in that The steps of real-time transmission via the WebSocket protocol include: Step 1: Use an incremental update strategy to only transmit the changed DOM node information; Step 2: Control the transmission delay to within 100 milliseconds to ensure real-time performance.

8. The method according to claim 5, characterized in that The step of rendering the video in real time according to the DOM tree changes includes: Step 1: Reconstruct the DOM tree change sequence in chronological order; Step 2: Dynamically render DOM tree changes to generate a video-like display effect; Step 3: Highlight key operation areas or buttons.

9. The method according to claim 5, characterized in that It also includes operational data analysis steps: Record the customer's operation path and the time spent at each step; Analyze abnormal patterns in customer operations for risk control or marketing optimization; When it is detected that the customer stays at a certain step for too long, a prompt will be automatically sent to the agent.

10. The method according to claim 5, characterized in that The method is applied to customer guidance in telephone sales scenarios, including but not limited to user registration, product purchase, and payment process operations.

Images