User front end behavior log recording method and system

Abstract

The invention discloses a user front-end behavior log recording method and system, and belongs to the technical field of computer application, and the method comprises the steps: front-end realization: employing a Vue framework, integrating a user-defined Vue plug-in, and automatically recording details of interaction between a user and the system; back-end processing: a user operation record interface receives and processes user behavior data sent by the front end, generates a standardized JSON object, and records the standardized JSON object through a log system; the online duration calculation interface is used for managing the session state of the user by using Redis, and calculating and accumulating the online duration of the user according to the heartbeat information; eLK log recording and analysis: creating a special index in Elasticsearch to store a user operation log and online time length data; and collecting and analyzing back-end logs by utilizing Logstash, and providing a data analysis interface. According to the method, the continuity and accuracy of user activeness statistics can be improved, and really active users and accidental visitors can be effectively distinguished.

Description

Technical Field

[0001] The present invention relates to the field of computer application technology, and in particular to a method and system for recording user front-end behavior logs. Background Art

[0002] There are limitations in user behavior monitoring in existing technologies, especially for those user interaction behaviors that do not directly trigger backend interface calls, which leads to incomplete activity data records and distorted analysis results. Existing technologies usually rely on backend interface interception mechanisms to capture user behavior logs. Although this model is more effective in dealing with scenarios with clear interface interactions, it ignores a large number of non-interface triggered activities performed by users on the front-end interface, such as page browsing, scrolling, mouse hovering, etc. These behaviors also profoundly affect the user's real activity and experience feedback. Summary of the invention

[0003] The technical task of the present invention is to address the above shortcomings and provide a user front-end behavior log recording method and system, which can not only improve the continuity and accuracy of user activity statistics, but also effectively distinguish between truly active users and accidental visitors, providing a more solid data foundation for product optimization and user portrait construction.

[0004] The technical solution adopted by the present invention to solve its technical problem is:

[0005] The embodiment of the present invention provides a method for recording a user front-end behavior log, comprising:

[0006] Front-end implementation: Adopt Vue framework and integrate custom Vue plug-ins to automatically record details of user interaction with the system, including user ID, system ID and custom parameters;

[0007] Backend processing: Java programming is used, including: user operation record interface, receiving and processing user behavior data sent by the front end, generating standardized JSON objects, and recording them through the log system; online time calculation interface, using Redis to manage user session status, calculating and accumulating user online time based on heartbeat information;

[0008] ELK log recording and analysis: including: creating a special index in Elasticsearch to store user operation logs and online time data; using Logstash to collect and parse backend logs, and providing a data analysis interface through Kibana.

[0009] This method achieves comprehensive, real-time monitoring and analysis of user behavior through sophisticated front-end tracking technology, efficient back-end processing logic, and a powerful ELK log management system, providing a solid data foundation for product optimization and user experience improvement.

[0010] Further, the front end, the custom Vue plug-in is a plug-in named v-track Vue, which automatically records user and system related information when the component is initialized, and a specific operation identifier when an event bound by the v-track instruction is triggered;

[0011] Use Vue Router's navigation guard function to monitor page browsing paths and user dwell time on each page, and send this information along with the user ID to the backend;

[0012] The heartbeat mechanism defined in the main entrance of App.vue is used to count the online time of users in real time after they log in, and terminate the timing when the user logs out.

[0013] Furthermore, the v-track plug-in realizes instant capture of user click behavior by binding specific instructions on the Vue component, and the instructions carry the operation name and unique code.

[0014] Furthermore, the page browsing path and dwell time monitoring function is implemented in the beforeRouteEnter and beforeRouteLeave hooks of Vue Router to accurately calculate the user's dwell time on each page.

[0015] Furthermore, the online duration real-time timing mechanism dynamically updates the user's online status by setting a timed heartbeat signal to the backend server after the user logs in, according to whether the heartbeat signal is received or not;

[0016] A heartbeat mechanism is defined at the main entrance of App.vue. After the user logs in, a request is sent to the backend at a preset interval to update the online status. When the user logs out, the heartbeat sending is terminated to accurately record the total online time per day.

[0017] Furthermore, the backend processing module utilizes the key-value storage feature of Redis, using "system code-date-user ID" as the key to efficiently manage user session information and online duration calculation;

[0018] Redis cache technology is used to manage user session status. When the user heartbeat is received for the first time, an entry with "system code-date-user ID" as the key is created to record the user login time. When subsequent heartbeats arrive, Redis is queried to obtain the login time, the difference with the current time is calculated, and it is added to the existing online time record. Finally, this data is persisted in Elasticsearch through the ELK framework.

[0019] Furthermore, in the ELK logging and analysis architecture, Logstash is responsible for collecting and parsing logs output by the backend, automatically routing them to the corresponding index of Elasticsearch based on the content, and Kibana provides advanced query and visual analysis tools.

[0020] The present invention also claims protection for a user front-end behavior log recording system, comprising:

[0021] The front-end implementation module uses the Vue framework and integrates a custom Vue plug-in called v-track to automatically record the details of the user's interaction with the system, including user identification, system identification, and custom parameters;

[0022] The backend processing module is programmed in Java and includes: a user operation record interface that receives and processes user behavior data sent by the frontend, generates standardized JSON objects, and records them through the log system; an online duration calculation interface that uses Redis to manage user session status and calculates and accumulates user online duration based on heartbeat information;

[0023] ELK log recording and analysis module, including: creating a special index in Elasticsearch to store user operation logs and online time data; using Logstash to collect and parse backend logs, and providing a data analysis interface through Kibana;

[0024] The system can implement the above-mentioned user front-end behavior log recording method.

[0025] The present invention also claims a user front-end behavior log recording device, comprising at least one memory and a processor;

[0026] The at least one memory is used to store a machine-readable program;

[0027] The at least one processor is used to call the machine-readable program to implement the above method.

[0028] The present invention also claims protection for a computer-readable medium having computer instructions stored thereon, which implement the above method when executed by a processor.

[0029] Compared with the prior art, the user front-end behavior log recording method and system of the present invention has the following beneficial effects:

[0030] By implementing the technical solution of the present invention, the comprehensiveness and accuracy of user behavior monitoring are significantly improved, and the technical problems of incomplete user activity data and distorted analysis results caused by reliance on backend request records in the prior art are effectively solved. The specific technical effects are reflected in the following aspects:

[0031] First, the establishment of a comprehensive front-end monitoring mechanism, including accurate recording of click behavior, page switching, and online time, ensures that both direct interaction and non-explicit request behaviors such as page browsing can be fully captured. This not only enriches the dimensions of user behavior data, but also greatly improves the accuracy of behavior analysis, allowing applications such as user portrait construction and personalized recommendations to be based on more detailed data.

[0032] Secondly, the combination of the backend interface and Redis cache technology enables real-time dynamic calculation and efficient storage of user online time, which not only reduces the burden on the database, but also ensures the timeliness and reliability of data processing. Through the integration of the ELK framework, log data can be recorded quickly and accurately, facilitating the subsequent audit and analysis of user behavior logs, and thus obtaining a more accurate user behavior portrait. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Figure 1 It is a diagram illustrating an implementation of a method for recording user front-end behavior logs provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0034] The embodiment of the present invention provides a method for recording a user front-end behavior log, comprising:

[0035] 1. Front-end implementation: Adopt Vue framework and integrate a custom Vue plug-in named v-track to automatically record the details of user interaction with the system, including user ID, system ID and custom parameters;

[0036] The front-end implementation specifically includes: (1) automatically recording user and system related information when the component is initialized, as well as specific operation identifiers when events bound to the v-track directive are triggered; (2) using the Vue Router navigation guard function to monitor page browsing paths and the user's stay time on each page, and sending this information together with the user identifier to the back-end; (3) a heartbeat mechanism defined at the main entrance of App.vue, which is used to count the online time of the user after logging in in real time, and terminates the timing when the user logs out.

[0037] 2. Backend processing: Java programming is used, including: (1) user operation record interface, which receives and processes user behavior data sent by the front end, generates standardized JSON objects, and records them through the log system; (2) online time calculation interface, which uses Redis to manage user session status and calculates and accumulates user online time based on heartbeat information.

[0038] 3. ELK log recording and analysis: including: (1) creating a special index in Elasticsearch to store user operation logs and online time data; (2) using Logstash to collect and parse backend logs, and providing a data analysis interface through Kibana.

[0039] The v-track plug-in realizes instant capture of user click behavior by binding specific instructions on the Vue component, and the instructions carry the operation name and unique code.

[0040] The page browsing path and dwell time monitoring function is implemented in the beforeRouteEnter and beforeRouteLeave hooks of Vue Router to accurately calculate the user's dwell time on each page.

[0041] The online duration real-time timing mechanism sets a timed heartbeat signal to the backend server after the user logs in, and dynamically updates the user's online status according to whether the heartbeat signal is received or not;

[0042] A heartbeat mechanism is defined at the main entrance of App.vue. After the user logs in, a request is sent to the backend at a preset interval to update the online status. When the user logs out, the heartbeat sending is terminated to accurately record the total online time per day.

[0043] The backend processing module uses the key-value storage feature of Redis, using "system code-date-user ID" as the key to efficiently manage user session information and online duration calculation;

[0044] Redis cache technology is used to manage user session status. When the user heartbeat is received for the first time, an entry with "system code-date-user ID" as the key is created to record the user login time. When subsequent heartbeats arrive, Redis is queried to obtain the login time, the difference with the current time is calculated, and it is added to the existing online time record. Finally, this data is persisted in Elasticsearch through the ELK framework.

[0045] In the ELK logging and analysis architecture, Logstash is responsible for collecting and parsing logs output by the backend, automatically routing them to the corresponding index of Elasticsearch based on the content, and Kibana provides advanced query and visual analysis tools.

[0046] Figure 1 The data flow diagram for recording user behavior log information mainly collects user logs in different ways on the front end, then passes through the back-end interface, logback, logstash, and finally records them in elasticsearch to complete the recording of user behavior logs.

[0047] The content of this method is further explained in detail below through the actual case of the document handling system. With the acceleration of digital transformation, the document handling system needs to have a deep understanding of user behavior in order to continuously optimize the functional layout and improve the user experience. This implementation case describes in detail how to apply the above invention content in the document handling system to achieve the whole process of real-time monitoring and analysis of user online behavior.

[0048] 1. Front-end implementation steps

[0049] 1. Front-end tracking component integration

[0050] Add a Vue plug-in named v-track to the front-end project of the document handling system, and register this plug-in globally in the main.js file in the root directory of the project. Add a callback function that can carry custom parameters to the plug-in, request the back-end log recording interface in the callback function, and add parameters such as the user_id and username of the current logged-in user, and the current system identifier sys_code to the interface, as well as custom parameters passed from different tracking points.

[0051] 2. Interaction behavior records

[0052] On key interactive components such as the "Business Processing" and "Check Progress" buttons, by adding v-track instructions and specifying the operation name (such as "Click the Business Processing Button") and the unique code, every user click can be instantly captured and reported to the backend.

[0053] 3. Page browsing path and dwell time monitoring

[0054] Using Vue Router, code is embedded in the beforeRouteEnter and beforeRouteLeave hook functions to record the entry and exit time of each page, and then calculate the length of time the user stays on a specific page. This data is packaged with the page ID and user information and sent to the backend server.

[0055] 4. Real-time timing of online time

[0056] In the App.vue main component, set up a heartbeat mechanism to send a request to the backend at a certain interval (for example, 1 minute) to indicate that the user is still active. When the user logs out, the heartbeat stops, and the system calculates and records the user's total online time per day.

[0057] 2. Backend Implementation Steps

[0058] 1. User operation record interface

[0059] The backend introduces the jar package of user log records. The user operation record interface is responsible for receiving the data reported by the frontend. After parsing, it organizes the click behavior or page access information into a standard JSON format and records it in the log system through log4j.

[0060] 2. Online duration calculation interface

[0061] Redis is used to track user sessions. When the user's heartbeat is received for the first time, the system creates a session record in Redis and calculates the cumulative online time in subsequent heartbeats. All data is eventually synchronized to Elasticsearch storage through scheduled tasks.

[0062] 3. ELK log recording and analysis

[0063] By configuring Logstash, we ensured that the logs collected from Logback could be correctly parsed and classified, and imported the user operation logs and online time data into the "user-oper-log" and "user-time-log" indexes of Elasticsearch according to the log content. Using Kibana, we built multi-dimensional dashboards and reports to intuitively display user behavior patterns, such as the most frequently visited page sequences, average online time, etc., providing strong data support for product iteration.

[0064] Through the above implementation methods, the processing system not only realizes all-round and real-time monitoring of user behavior, but also provides accurate data guidance for system function optimization and user experience upgrade through powerful data analysis capabilities.

[0065] This method provides an innovative front-end behavior monitoring system. It uses front-end embedding technology and is flexibly deployed on various page elements. Whether it is a button click, form submission, or sliding, touching and other interactions, fine-grained capture can be achieved. In addition, through the intelligent page route switching monitoring mechanism, this method can track and record every page browsing path change or route jump of the user in real time, regardless of whether these operations trigger background communication, thereby ensuring the integrity of the user's browsing trajectory. This method also designs a timed heartbeat signal sending strategy to continuously monitor and record the user's stay time on a certain page, as well as the total online time of the day, which makes up for the shortcomings of traditional methods in evaluating user stickiness. This strategy not only improves the continuity and accuracy of user activity statistics, but also effectively distinguishes truly active users from occasional visitors, providing a more solid data foundation for product optimization and user portrait construction.

[0066] In summary, this method not only solves the data omission problem caused by the traditional method's reliance on back-end interaction records by integrating front-end tracking, intelligent routing monitoring and heartbeat mechanism, but also significantly enhances the breadth and depth of data analysis, reduces the risk of misjudgment caused by missing data, and at the same time, through highly customized monitoring configuration, makes the implementation cost controllable, improves data collection efficiency, and ultimately helps enterprises and developers understand user behavior patterns more accurately, optimize user experience, and drive scientific decision-making for product iteration and market strategy.

[0067] The embodiment of the present invention also provides a user front-end behavior log recording system, which can implement the user front-end behavior log recording method described in the above embodiment. By accurately capturing the front-end user interaction details and online time, the user behavior trajectory can be restored and the system function usage statistics can be achieved; the system includes:

[0068] 1. The front-end implementation module uses the Vue framework and integrates a custom Vue plug-in called v-track to automatically record the details of the user's interaction with the system, including user identification, system identification, and custom parameters. The specific steps include:

[0069] (1) Front-end tracking component integration: Develop a custom Vue plug-in named v-track, which is globally registered in main.js and configured with a callback function containing user ID, system ID, and custom parameters. Whenever the component is initialized, it automatically records user and system related information, as well as the specific operation ID passed when the event is triggered.

[0070] (2) Interaction behavior recording: By binding the v-track instruction on the Vue component to be monitored and passing in the operation name and unique code, the user's click behavior can be captured and reported in real time.

[0071] (3) Monitoring page browsing path and dwell time: Using the navigation guard function of Vue Router, the page dwell time is calculated when the page enters (beforeRouteEnter) and leaves (beforeRouteLeave), and sent to the backend together with the page ID and user information.

[0072] (4) Real-time timing of online time: A heartbeat mechanism is defined at the main entrance of App.vue. After the user logs in, a request is sent to the backend at a preset interval to update the online status. When the user logs out, the heartbeat sending is terminated to accurately record the total online time of a single day.

[0073] 2. Backend processing module: The backend system designs two sets of key interfaces, which are written in Java and packaged as independent jar packages for easy deployment and calling. Including:

[0074] (1) User operation record interface: Receives and parses user behavior data sent by the front end, organizes it into a standard JSON object according to the operation type (click or page visit), and outputs the data to the log system through the log framework (such as log4j) using the Logger.info method.

[0075] (2) Online duration calculation interface uses Redis cache technology to manage user session status. When the user heartbeat is received for the first time, an entry with "system code-date-user ID" as the key is created to record the user login time. When the subsequent heartbeat arrives, Redis is queried to obtain the login time, the time difference is calculated, and the time difference is added to the existing online duration record. Finally, this data is persisted in Elasticsearch through the ELK framework.

[0076] 3. ELK log recording and analysis module, including: creating a special index in Elasticsearch to store user operation logs and online time data; using Logstash to collect and parse backend logs, and providing a data analysis interface through Kibana; the details are as follows:

[0077] In Elasticsearch, two indexes, user-oper-log and user-time-log, are pre-created to store user operation logs and online time data, respectively. The backend log output is configured through Logback, connected to Logstash for log collection and parsing, and automatically routed to the correct Elasticsearch index based on the index identifier in the log content. Kibana, as a visual interface, provides data analysts with intuitive query and analysis tools to deeply explore user behavior patterns.

[0078] This system uses sophisticated front-end tracking technology, efficient back-end processing logic and powerful ELK log management system to achieve comprehensive, real-time monitoring and analysis of user behavior, providing a solid data foundation for product optimization and user experience improvement.

[0079] By integrating front-end behavior monitoring technology, it not only records transactional requests in the traditional sense, but more importantly, it monitors users in all aspects, from mouse click events to page browsing path changes, as well as the length of time users stay when visiting a certain page, to the total online time on the day. All collected information is transmitted to the backend through an interface, and integrated, stored and analyzed using the powerful ELK framework, providing solid data support for in-depth analysis of user behavior patterns and quantification of activity. The breadth and depth of its user behavior log records are designed to provide enterprises and developers with a more detailed and multi-dimensional view of user behavior, promote more accurate user portrait construction and experience optimization strategies, and are different from existing solutions on the market that focus on core business log records.

[0080] The embodiment of the present invention also provides a user front-end behavior log recording device, comprising at least one memory and a processor;

[0081] The at least one memory is used to store a machine-readable program;

[0082] The at least one processor is used to call the machine-readable program to implement the user front-end behavior log recording method described in the above embodiment.

[0083] The embodiment of the present invention also provides a computer-readable medium, on which computer instructions are stored, and when the computer instructions are executed by a processor, the processor executes the user front-end behavior log recording method described in the above embodiment. Specifically, a system or device equipped with a storage medium can be provided, on which a software program code that implements the functions of any of the above embodiments is stored, and a computer (or CPU or MPU) of the system or device reads and executes the program code stored in the storage medium.

[0084] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.

[0085] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer by a communication network.

[0086] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.

[0087] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or written to a memory provided in an expansion unit connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or the expansion unit is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.

[0088] The present invention is shown and described in detail above through the accompanying drawings and preferred embodiments. However, the present invention is not limited to these disclosed embodiments. Based on the above multiple embodiments, those skilled in the art can know that the code review methods in the above different embodiments can be combined to obtain more embodiments of the present invention, and these embodiments are also within the protection scope of the present invention.

Claims

1. A method for recording user front-end behavior logs, characterized in that: include: Front-end implementation: Adopt Vue framework and integrate custom Vue plug-ins to automatically record details of user interaction with the system, including user ID, system ID and custom parameters; Backend processing: Java programming is used, including: user operation record interface, receiving and processing user behavior data sent by the front end, generating standardized JSON objects, and recording them through the log system; online time calculation interface, using Redis to manage user session status, calculating and accumulating user online time based on heartbeat information; ELK log recording and analysis: including: creating a special index in Elasticsearch to store user operation logs and online time data; using Logstash to collect and parse backend logs, and providing a data analysis interface through Kibana.

2. A user front-end behavior log recording method according to claim 1, characterized in that: The front end, the custom Vue plug-in is a plug-in named v-track Vue, which automatically records user and system related information when the component is initialized, and the specific operation identifier when the event bound by the v-track instruction is triggered; Use Vue Router's navigation guard function to monitor page browsing paths and user dwell time on each page, and send this information along with the user ID to the backend; The heartbeat mechanism defined in the main entrance of App.vue is used to count the online time of users in real time after they log in, and terminate the timing when the user logs out.

3. A user front-end behavior log recording method according to claim 1 or 2, characterized in that: The v-track plug-in realizes instant capture of user click behavior by binding specific instructions on the Vue component. The instruction carries the operation name and unique code.

4. A user front-end behavior log recording method according to claim 1, characterized in that: The page browsing path and dwell time monitoring function is implemented in the beforeRouteEnter and beforeRouteLeave hooks of Vue Router to accurately calculate the user's dwell time on each page.

5. A user front-end behavior log recording method according to claim 1, characterized in that: The online duration real-time timing mechanism sets a timed heartbeat signal to the backend server after the user logs in, and dynamically updates the user's online status according to whether the heartbeat signal is received or not; A heartbeat mechanism is defined at the main entrance of App.vue. After the user logs in, a request is sent to the backend at a preset interval to update the online status. When the user logs out, the heartbeat sending is terminated to accurately record the total online time per day.

6. A user front-end behavior log recording method according to claim 1 or 5, characterized in that: The backend processing module uses the key-value storage feature of Redis, with "system code-date-user ID" as the key, to manage user session information and online duration calculation; Redis cache technology is used to manage user session status. When the user heartbeat is received for the first time, an entry with "system code-date-user ID" as the key is created to record the user login time. When subsequent heartbeats arrive, Redis is queried to obtain the login time, the time difference with the current time is calculated, and the time is added to the existing online duration record. Finally, this data is persisted to Elasticsearch through the ELK framework.

7. A user front-end behavior log recording method according to claim 1, characterized in that: In the ELK logging and analysis architecture, Logstash is responsible for collecting and parsing logs output by the backend, automatically routing them to the corresponding index of Elasticsearch based on the content, and Kibana provides advanced query and visual analysis tools.

8. A user front-end behavior log recording system, characterized in that: include: The front-end implementation module uses the Vue framework and integrates a custom Vue plug-in called v-track to automatically record the details of the user's interaction with the system, including user identification, system identification, and custom parameters; The backend processing module is programmed in Java and includes: a user operation record interface that receives and processes user behavior data sent by the frontend, generates standardized JSON objects, and records them through the log system; an online duration calculation interface that uses Redis to manage user session status and calculates and accumulates user online duration based on heartbeat information; ELK log recording and analysis module, including: creating a special index in Elasticsearch to store user operation logs and online time data; using Logstash to collect and parse backend logs, and providing a data analysis interface through Kibana; The system can implement the user front-end behavior log recording method described in any one of claims 1 to 7.

9. A user front-end behavior log recording device, characterized in that: comprising at least one memory and a processor; The at least one memory is used to store a machine-readable program; The at least one processor is used to call the machine-readable program to implement the method described in any one of claims 1 to 7.

10. A computer readable medium, characterized in that The computer readable medium stores computer instructions, and when the computer instructions are executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images