Front-end information acquisition method and device and computer equipment

Abstract

The invention discloses a front-end information acquisition method, a front-end information acquisition device and computer equipment. The method comprises the steps that plug-in types loaded in a software development kit SDK are obtained, and plug-ins of different types are used for being matched with collection events of different types; receiving an operation instruction of the front-end interface, triggering a target collection event corresponding to the operation instruction, and obtaining a target element in a document object model DOM operated by the operation instruction; and collecting event data corresponding to the target element by adopting a target type plug-in matched with the target collection event. According to the invention, the technical problem of low flexibility caused by a fixed acquisition scheme in the prior art is solved.

Description

Technical Field

[0001] The present application relates to the field of data collection technology, and in particular to a front-end information collection method, device and computer equipment. Background Art

[0002] Tracking is a term in the field of data collection, which refers to the relevant technologies and implementation processes for capturing, processing and sending specific user behaviors or events. The essence of tracking technology is to first monitor the events in the application running process, and then judge and capture the events that need attention when they occur. With the rise of technologies such as data mining, the significance of data collection through tracking is becoming more and more prominent. Front-end tracking mainly tracks on web pages, clients, etc. to collect front-end data, such as application exceptions, application performance, user behavior, etc. These data can help developers and enterprises understand the health of front-end applications, user needs, behaviors and preferences, so as to optimize product design, improve user experience and satisfaction, and optimize customer journeys. There are generally two ways to collect data in related technologies. One is to collect data with tracking. The first is invasive integration. Data collection is affected by the page structure. The maintenance cost is high when the application is iteratively updated, and human resources are potentially invested. The second is to adopt a non-tracking solution. However, traditional non-tracking solutions are all unified collection solutions, which are not conducive to adapting to specific user needs and expanding the collection information. Summary of the invention

[0003] The embodiments of the present application provide a front-end information collection method, apparatus and computer equipment to at least solve the technical problem of low flexibility caused by fixed collection schemes in related technologies.

[0004] According to one aspect of an embodiment of the present application, a front-end information collection method is provided, including: obtaining a plug-in type loaded in a software development kit SDK, wherein different types of plug-ins are used to match different types of collection events; receiving an operation instruction of a front-end interface, triggering a target collection event corresponding to the operation instruction, and obtaining a target element in a document object model DOM operated by the operation instruction; and using a target type plug-in that matches the target collection event to collect event data corresponding to the target element.

[0005] Optionally, obtaining a target element in a target document object model operated by the operation instruction includes: based on a unique identifier of the target element, the unique identifier includes at least: XPath, tag name, URL, text content and sub-elements, wherein the XPath is used to represent the path of the target element in the document object model, the tag name is used to represent the tag name of the target element, the URL is used to represent the function of the target element, the text content represents the text content contained in the target element, and the sub-elements are used to represent the sub-elements of the target element; determining the position of the target element based on the unique identifier.

[0006] Optionally, a target type plug-in that matches the target acquisition event is used, including: obtaining the type of data collected by the target acquisition event, and determining the type of the target acquisition event based on the type of data collected by the target acquisition event; selecting a subtype of the target acquisition event from multiple subtypes corresponding to the type of the target acquisition event; and determining a target type plug-in that matches the target acquisition event based on the subtype of the target acquisition event.

[0007] Optionally, the type of the target collection event is determined according to the type of data collected by the target collection event, including: when the type of data collected by the target collection event is abnormal data, determining the type of the target collection event to be an error type or a console type; when the type of data collected by the target collection event is performance data, determining the type of the target collection event to be a performance type; when the type of data collected by the target collection event is trajectory data, determining the type of the target collection event to be a behavior type or a hypertext transfer protocol (http) type or a lifecycle type.

[0008] Optionally, determining a target type plug-in that matches the target acquisition event according to the subtype of the target acquisition event includes: when the indicator name corresponding to the subtype of the target acquisition event is white screen exception, determining that the target type plug-in is a white screen exception plug-in; when the indicator name corresponding to the subtype of the target acquisition event is code exception, resource loading exception and unhandled asynchronous operation promise exception, determining that the target type plug-in is an error plug-in; when the indicator name corresponding to the subtype of the target acquisition event is page crash, determining that the target type plug-in is a page crash plug-in; when the indicator name corresponding to the subtype of the target acquisition event is framework error, determining that the target type plug-in is a framework error plug-in; when the indicator name corresponding to the subtype of the target acquisition event is debug log, general log, information log, warning log and error log, determining that the target type plug-in is a console plug-in; when the indicator name corresponding to the subtype of the target acquisition event is basic performance data, maximum content rendering time, load performance measurement, first input delay In the case of delay, cumulative layout offset, first screen resource loading and next rendering interaction, the target type plug-in is determined to be a performance plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event is page views, page dwell time, page active time and page visible time, the target type plug-in is determined to be a behavior plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event is click event acquisition data, the target type plug-in is determined to be a DOM click event plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event is element exposure acquisition data, the target type plug-in is determined to be an element exposure plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event is page route jump, the target type plug-in is determined to be a page route history plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event is request monitoring, the target type plug-in is determined to be an HTTP request monitoring plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event belongs to a life cycle event, the target type plug-in is determined to be a page life cycle monitoring plug-in.

[0009] Optionally, collecting event data corresponding to the target element includes: obtaining the event data corresponding to the target element; encapsulating the event data and the name of the target collection event into buried point data; pushing the buried point data to the task queue of the SDK, and uploading the buried point data to the server through the task queue.

[0010] Optionally, the method further includes: detecting the state of the current page; and when the state of the current page changes from a visible state to a hidden state, sending all the buried point data in the task queue to the server.

[0011] According to another aspect of an embodiment of the present application, a front-end information collection device is also provided, including: an acquisition module, used to obtain the plug-in type loaded in a software development kit SDK, wherein different types of plug-ins are used to match different types of collection events; a receiving module, used to receive operation instructions of a front-end interface, trigger a target collection event corresponding to the operation instruction, and obtain a target element in a document object model DOM operated by the operation instruction; and a collection module, used to adopt a target type plug-in that matches the target collection event to collect event data corresponding to the target element.

[0012] According to another aspect of the embodiment of the present application, a computer device is also provided, including: a memory and a processor, wherein the memory is used to store program instructions; the processor is connected to the memory and is used to execute the above-mentioned front-end information collection method.

[0013] According to another aspect of the embodiments of the present application, a non-volatile storage medium is provided, which includes a stored computer program, wherein the device where the non-volatile storage medium is located executes the above-mentioned front-end information collection method by running the computer program.

[0014] According to another aspect of the embodiments of the present application, a computer program product is provided, including computer instructions, which implement the above-mentioned front-end information collection method when executed by a processor.

[0015] In an embodiment of the present application, by obtaining the plug-in type loaded in the software development kit SDK, where different types of plug-ins are used to match different types of collection events; receiving an operation instruction from the front-end interface, triggering a target collection event corresponding to the operation instruction, and obtaining a target element in the document object model DOM operated by the operation instruction; using a target type plug-in that matches the target collection event to collect event data corresponding to the target element, thereby achieving the purpose of loading plug-ins for collecting different data according to different needs, thereby achieving the technical effect of flexibly loading the required plug-ins for data collection, and further solving the technical problem of low flexibility in the related technology due to fixed collection schemes. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0017] Figure 1 It is a hardware structure block diagram of a computer terminal for implementing a front-end information collection method according to an embodiment of the present application;

[0018] Figure 2is a flow chart of a front-end information collection method according to an embodiment of the present application;

[0019] Figure 3 is a flow chart of another front-end information collection method according to an embodiment of the present application;

[0020] Figure 4 It is a structural diagram of a front-end information collection device according to an embodiment of the present application. DETAILED DESCRIPTION

[0021] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0022] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0023] The information collected in the embodiments of the present application is information and data authorized by the user or fully authorized by all parties, and the collection, storage, use, processing, transmission, provision, disclosure and application of the relevant data comply with the relevant laws, regulations and standards of the relevant regions, take necessary confidentiality measures, do not violate public order and good morals, and provide corresponding operation entrances for users to choose to authorize or reject automated decision-making results; if the user chooses to reject, the expert decision-making process will be entered.

[0024] In order to solve the problems existing in the related art, the present application embodiment provides a front-end information collection method, which can be run on Figure 1 In the computer terminal shown, the computer terminal is explained below.

[0025] The front-end information collection method embodiment provided in the embodiment of the present application can be executed in a mobile terminal, a computer terminal or a similar computing device. Figure 1 The hardware structure block diagram of a computer terminal for implementing the front-end information collection method is shown in FIG. Figure 1 As shown, the computer terminal 10 may include one or more (102a, 102b, ..., 102n are used to illustrate) processors (the processor may include but is not limited to a processing device such as a microprocessor MCU or a programmable logic device FPGA), a memory 104 for storing data, and a transmission module 106 for communication functions connected via a wired and / or wireless network. In addition, it may also include: a display, a keyboard, a cursor control device, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of the I / O interface), a network interface, and a BUS bus. Those skilled in the art can understand that Figure 1 The structure shown is only for illustration and does not limit the structure of the above electronic device. Figure 1 More or fewer components as shown, or with Figure 1 Different configurations are shown.

[0026] It should be noted that the one or more processors and / or other data processing circuits described above may generally be referred to herein as "data processing circuits". The data processing circuits may be embodied in whole or in part as software, hardware, firmware, or any other combination thereof. In addition, the data processing circuit may be a single independent processing module, or may be incorporated in whole or in part into any of the other components in the computer terminal 10. As described in the embodiments of the present application, the data processing circuit acts as a processor control (e.g., selection of a variable resistor terminal path connected to an interface).

[0027] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the front-end information collection method in the embodiment of the present application. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory 104, that is, realizing the above-mentioned front-end information collection method. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 104 may further include a memory remotely arranged relative to the processor, and these remote memories may be connected to the computer terminal 10 via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0028] The transmission module 106 is used to receive or send data via a network. The specific example of the above network may include a wireless network provided by a communication provider of the computer terminal 10. In one example, the transmission module 106 includes a network adapter (Network Interface Controller, NIC), which can be connected to other network devices through a base station so as to communicate with the Internet. In one example, the transmission module 106 can be a radio frequency (Radio Frequency, RF) module, which is used to communicate with the Internet wirelessly.

[0029] The display may be, for example, a touch screen liquid crystal display (LCD) that enables a user to interact with a user interface of the computer terminal 10 .

[0030] It should be noted that, in some optional embodiments, the above Figure 1 The computer terminal shown may include hardware elements (including circuits), software elements (including computer code stored on a computer-readable medium), or a combination of hardware elements and software elements. It should be noted that Figure 1 This is merely one example of a particular embodiment and is intended to illustrate the types of components that may be present in the computer terminal described above.

[0031] In the above-mentioned operating environment, an embodiment of the present application provides an embodiment of a front-end information collection method. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although the logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0032] Figure 2 is a flow chart of a front-end information collection method according to an embodiment of the present application, such as Figure 2 As shown, the method comprises the following steps:

[0033] Step S202, obtaining the plug-in type loaded in the software development kit SDK, wherein different types of plug-ins are used to match different types of acquisition events;

[0034] In step S202, the front-end collected data can be classified, plug-ins can be integrated for collection as needed, and plug-ins can be customized to expand the collection content.

[0035] Step S204, receiving an operation instruction from the front-end interface, triggering a target acquisition event corresponding to the operation instruction, and obtaining a target element in the document object model DOM operated by the operation instruction;

[0036] In step S204, when the front-end page is loaded, all user operations are captured through the global event listener, including but not limited to clicks, scrolling, form submission, etc.

[0037] Step S206: using a target type plug-in that matches the target collection event to collect event data corresponding to the target element.

[0038] Through the above steps S202 to S206, by obtaining the plug-in type loaded in the software development kit SDK, different types of plug-ins are used to match different types of collection events; receiving the operation instruction of the front-end interface, triggering the target collection event corresponding to the operation instruction, and obtaining the target element in the document object model DOM operated by the operation instruction; using the target type plug-in matching the target collection event to collect the event data corresponding to the target element, thereby achieving the purpose of loading plug-ins for collecting different data according to different needs, thereby achieving the technical effect of flexibly loading the required plug-ins for data collection, and then solving the technical problem of low flexibility due to fixed collection schemes in related technologies. The following is a detailed description.

[0039] It should also be noted that the present application can not only solve the technical problem of low flexibility, but also standardize the format of collected data to facilitate subsequent retrieval and statistical analysis using the collected data, and locate the unique identifier of the page element based on Xpath and element free attributes more accurately, and prevent the loss of collected data due to network interruption and other reasons through data persistence processing.

[0040] In some embodiments of the present application, the specific steps for obtaining the target element in the target document object model operated by the operation instruction are as follows: based on the unique identifier of the target element, the unique identifier includes at least: XPath, tag name, URL, text content and sub-elements, wherein the XPath is used to represent the path of the target element in the document object model, the tag name is used to represent the tag name of the target element, the URL is used to represent the function of the target element, the text content represents the text content contained in the target element, and the sub-elements are used to represent the sub-elements of the target element; determine the position of the target element based on the unique identifier.

[0041] It can be understood that XPath is a path expression used to accurately locate an element in the Document Object Model (DOM) tree. In the context of non-embedded data collection, XPath provides path information of elements in the DOM tree, and XPath can help track specific elements even if the page structure changes. For example, the XPath expression / html / body / div[2] / a means starting from the root element of the HTML document and locating the a tag under the second div element. Tag name (tagName): This is the type identifier of the HTML or XML element, such as div, a, p, etc. The tag name is the basic attribute of the element and can help identify the type of the element. When generating a unique element identifier, the tag name is a required part because it is a basic description of the element type. URL (href): For some elements, such as Link (for creating hyperlinks), Pictures (for embedding display images in web pages), <iframe>Frames (used to embed and display another HTML document in the current page), etc., URL (usually refers to href or src attributes) describes the resource referenced by the element or the address to which it jumps. This information is very important in data collection without embedding points, especially when tracking user behavior or resource loading. If an element has no URL attribute, an empty string can be used to represent it. Text content (text): This is the text content contained in the element itself or its descendant elements. For elements that display text, such as forms, paragraphs, and titles, text content is the key information to distinguish elements. For example, two Elements may have the same tag name and position, but different text content makes them different in function and information. If an element has no text content, it can also be represented by an empty string. Children: refers to the direct child elements of the target element. When generating an element unique identifier, if the element has child elements, similar unique identification information will be recursively generated for each child element to form an array of child elements. The information of child elements can further enhance the accuracy of element identification, especially when dealing with complex DOM structures. The order of child elements is also important because the order of elements in the DOM tree reflects their actual layout on the page.

[0042] It should be noted that in the tag, the href attribute defines the target address of the link. Users can jump to a new page or document by clicking on this link. In the tag, the src attribute defines the source URL of the image file.

[0043] For example: unique identifier key = {Xpath, tagName, url(href), text, children}, where Xpath, tagName and children are required attributes of the element, url(href) and text are not required, and if empty, they can be replaced by empty strings. Xpath is the path of the element in the DOM tree; tagName is the tag name of the html element; url(href) is the content and function of the element itself, that is, an attribute of the a tag, which can jump to the page when clicked; text is a common basic attribute of the element, that is, the textContent (text content) attribute, which represents all text content displayed under the element; children refers to the child elements of the current element. If there are child elements, the array of attribute keys of all child elements under the current element is used to represent them. Since the child elements are ordered, this array is also ordered, that is, stored from left to right.

[0044] The unique identifier SDK can accurately track elements in user interaction and performance monitoring. Even if the layout or structure of the page changes, as long as these key attributes do not change, the unique identifier of the element can remain stable.

[0045] In some embodiments of the present application, the specific steps of using a target type plug-in that matches the target acquisition event are as follows: obtaining the type of data collected by the target acquisition event, and determining the type of the target acquisition event based on the type of data collected by the target acquisition event; selecting a subtype of the target acquisition event from a plurality of subtypes corresponding to the type of the target acquisition event; and determining a target type plug-in that matches the target acquisition event based on the subtype of the target acquisition event.

[0046] Wherein, the method of determining the type of the target acquisition event according to the type of data collected by the target acquisition event is as follows: when the type of data collected by the target acquisition event is abnormal data, the type of the target acquisition event is determined to be an error type or a console type; when the type of data collected by the target acquisition event is performance data, the type of the target acquisition event is determined to be a performance type; when the type of data collected by the target acquisition event is trajectory data, the type of the target acquisition event is determined to be a behavior type or a hypertext transfer protocol http type or a lifecycle type.

[0047] Specifically, determining a target type plug-in that matches the target acquisition event according to the subtype of the target acquisition event includes: when the indicator name corresponding to the subtype of the target acquisition event is white screen exception, determining that the target type plug-in is a white screen exception plug-in; when the indicator name corresponding to the subtype of the target acquisition event is code exception, resource loading exception and unprocessed asynchronous operation promise exception, determining that the target type plug-in is an error plug-in; when the indicator name corresponding to the subtype of the target acquisition event is page crash, determining that the target type plug-in is a page crash plug-in; when the indicator name corresponding to the subtype of the target acquisition event is framework error, determining that the target type plug-in is a framework error plug-in; when the indicator name corresponding to the subtype of the target acquisition event is debug log, general log, information log, warning log and error log, determining that the target type plug-in is a console plug-in; when the indicator name corresponding to the subtype of the target acquisition event is basic performance data, maximum content rendering time, load performance measurement, first In the case of input delay, cumulative layout offset, first screen resource loading and next rendering interaction, the target type plug-in is determined to be a performance plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event is page views, page dwell time, page active time and page visible time, the target type plug-in is determined to be a behavior plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event is click event acquisition data, the target type plug-in is determined to be a DOM click event plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event is element exposure acquisition data, the target type plug-in is determined to be an element exposure plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event is page route jump, the target type plug-in is determined to be a page route history plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event is request monitoring, the target type plug-in is determined to be an HTTP request monitoring plug-in; in the case that the indicator name corresponding to the subtype of the target acquisition event belongs to a life cycle event, the target type plug-in is determined to be a page life cycle monitoring plug-in.

[0048] Table 1 shows the mapping relationship between different data types and collection event types. As shown in Table 1, the collection data is divided into three types: abnormality, performance, and user trajectory. The preset collection event type includes 6 types, 33 subtypes, and 12 collection plug-ins.Table 1

[0050]

[0051]

[0052] Wherein, plugin-blank-screen: white screen exception plug-in. This plug-in is responsible for monitoring the white screen exception during web page loading, that is, the content cannot be displayed in time at the initial stage of page loading, and the user sees a blank until all resources are loaded or the page rendering is completed. The plug-in records information such as the duration of the white screen to help analyze the page loading performance. plugin-error: error plug-in. This plug-in is used to collect error information during front-end runtime, including JavaScript code errors, resource loading failures, etc., which helps developers to quickly locate and fix problems. plugin-page-crash: page crash plug-in. This plug-in monitors the abnormal crash of the page, such as the page cannot respond due to resource loading timeout, memory overflow, etc., and records the detailed information of the page crash for troubleshooting and performance optimization. plugin-vue: Vue framework error plug-in. Specially used to collect error information related to the Vue.js framework, helping developers to promptly find and fix problems in the framework when using Vue.js (a programming language) to develop applications. plugin-console: console plug-in. Used to monitor and collect output information of the front-end console (console), including logs, warnings, errors, etc., which can assist developers in debugging and performance analysis. plugin-performance: performance plugin. Responsible for collecting data related to page performance, such as loading time, rendering efficiency, first input delay, cumulative layout offset, etc., to help monitor and optimize page loading and running performance. plugin-behavior: behavior plugin. Used to monitor the user's interaction with the page, such as page views, dwell time, element exposure, click events, etc. plugin-dom-click: DOM click event plugin. Specially collects data generated when users click on DOM elements on the page, which is used to analyze the user's attention and frequency of use of each element in the page. plugin-exposure: element exposure plugin. Monitors the visibility of elements in the page, that is, whether the element is within the user's field of view and the duration of exposure. plugin-history: page routing history plugin.Records page routing jumps, including how users browse pages. plugin-http: HTTP request monitoring plugin. Monitors HTTP requests between front-end applications and back-end services, including request and response time, status code, etc., which helps debug network communication problems and improve data transmission efficiency. plugin-lifecycle: Page lifecycle monitoring plugin. Monitors page state changes throughout the life cycle from loading to closing, such as page loading, unloading, gaining focus, losing focus, etc., which plays an important role in page performance and user experience analysis.

[0053] It should also be noted that the functions of the indicator names corresponding to the subtypes are as follows:

[0054] blankScreen: white screen exception refers to the blank time that occurs during the page loading process, which is usually caused by resource loading delay.

[0055] js: JavaScript code exception, refers to an error that occurs during the execution of JavaScript code.

[0056] resource: resource loading exception, which means that the resources loaded on the page (such as pictures, CSS, JS files) failed to load successfully.

[0057] unhandledrejection: an unhandled Promise exception, which means that the Promise object is rejected (i.e. an error occurs), but there is no corresponding error handling code.

[0058] crash: A page crash usually refers to a page that becomes unresponsive or completely unavailable for display due to some reason (such as insufficient memory, JS error).

[0059] vue: Vue framework error refers to an error that occurs in an application developed using the Vue.js framework.

[0060] debug: debug log, a log used to record debug information during the development phase.

[0061] log: a general log used to record program running status, operation information, etc.

[0062] info: information log, which records information messages during program operation.

[0063] warn: warning log, which records warning information that may be problematic but does not affect program operation.

[0064] Error: Error log, records the error information that occurs during program execution.

[0065] basic: basic performance data, refers to the basic performance indicators of page loading and rendering.

[0066] lcp: Largest Contentful Paint, which measures the time from when the page starts loading to when the main content of the page is first fully rendered.

[0067] fid: First input delay, FirstInputDelay, refers to the time from the start of page loading to the first time the user can interact with the page elements.

[0068] cls: CumulativeLayoutShift, which measures the change in element position caused by unstable layout during page loading.

[0069] resource: first screen resource loading, refers to the loading status of all resources required to load the visible content on the first screen.

[0070] inp: next rendering interaction, which may be related to the processing of user input or the next rendering of the page.

[0071] pv: Page View, which counts the number of times a user visits a page.

[0072] tp: page dwell time, i.e. the dwell time of a user on a certain page.

[0073] pat: page active duration, the time the user performs effective operations on the page.

[0074] pvt: page visibility duration, the time the page is visible to the user.

[0075] click: click event, a user's click operation on a page.

[0076] Exposure: element exposure, the extent to which page elements are seen by users.

[0077] history: page routing jump, recording the user's jump history between pages.

[0078] xhr: XMLHttpRequest, a technology for asynchronous page loading and communication.

[0079] fetch: Fetch request, a modern, more flexible API for asynchronously requesting data.

[0080] load: load event, an event triggered when the page loading is completed.

[0081] unload: unload event, an event triggered before the page is unloaded or the window is closed.

[0082] active: The page gets the focus event, and the user turns his attention to the current page.

[0083] passive: The page is visible but there is no focus event. The page is visible but the user does not directly interact with it.

[0084] Hidden: The page is invisible. The page is blocked by other windows or tabs and cannot be seen by the user.

[0085] frozen: a page is frozen event. The page enters a frozen state due to a long period of no user interaction or other reasons.

[0086] discarded: a page discard event, in which the page is discarded from the memory, usually due to the browser resource management policy.

[0087] terminated: a page is terminated event, and the page is completely terminated due to some reasons (such as the user closing the browser).

[0088] Optionally, the above plug-in can be integrated as needed, installed locally through a package manager, or introduced into the project through a CDN (Content Delivery Network). SDK supports loading plug-ins through plug-in options during initialization, and also supports loading and using plug-ins through the use method (a method for loading plug-ins).

[0089] In some embodiments of the present application, the method for collecting event data corresponding to the target element is as follows: obtain the event data corresponding to the target element; encapsulate the event data and the name of the target collection event into buried point data; push the buried point data to the task queue of the SDK, and upload the buried point data to the server through the task queue.

[0090] The acquisition event encapsulates the event data into an event message in a preset format, for example, the event message structure is composed of a header + a body, wherein the header contains 20 fixed fields, and the body contains 2 fixed fields and a field data for storing custom acquisition information. Table 2 shows the definition of the event message. Table 2

[0092]

[0093] In some embodiments of the present application, the problem of data loss caused by changes in page visibility is avoided, especially in the case of unstable network or frequent user operations leading to page switching, the integrity and validity of the data are maintained. The plug-in sends data as much as possible when the page is hidden, and restores the unsent data when the page is visible again, thereby significantly reducing the data packet loss rate, ensuring the comprehensiveness and accuracy of the data in the analysis phase, specifically, detecting the state of the current page; when the state of the current page changes from a visible state to a hidden state, all the buried point data in the task queue are sent to the server.

[0094] For example: a data persistence plug-in (plugin-persist) is provided, which stores the unsent data locally when the page is hidden or closed, and reads and restores it from the local storage when it is opened next time to prevent the loss of collected data due to network interruption and other reasons. The SDK reports the collected data in batches through a task queue to reduce network overhead. In the traditional way, the collected data is easily lost when the page is closed or hidden. To solve this problem, a data cache plug-in is also provided, which can trigger the data reporting action of SDK immediately when the page is hidden, and then the unreported data is persistently stored in localstorage. When the next page is changed from invisible to visible state (visible state includes page loading again), the data stored in localstorage is pushed into the reporting queue of SDK. The packet loss rate of collected data can be effectively reduced in this way, ensuring the integrity and validity of data in the analysis phase.

[0097] Figure 3 shows another front-end information collection method, as shown in Figure 3: web-based non-intrusive collection SDK. The principle of non-intrusive collection is to listen for global events, filter and obtain valid data for collection and reporting. Among them, the data collection of listening for global events is implemented based on the DOM event flow mechanism. When in use, integrate the collection SDK into the Web application and add relevant configurations of the collection SDK in the configuration. When the application runs, the SDK will obtain data according to the page operation instructions and send it to the server.

[0098] For example: when the front-end page is loaded, capture all user operations through a global event listener (such as addEventListener), including but not limited to clicks, scrolls, form submissions, etc.

[0099] When a user operation is detected, locate the specific element (target element) in the page, and then obtain the relevant attributes of the element, such as the type, position, content, style, etc. of the element.

[0100] Obtain the name and data of the current event according to the target collection event and the target element. According to the type and purpose of the user operation, determine the classification of the event (such as click event, resource loading event, etc.), and identify the name of the target collection event through predefined event types or subtypes.

[0101] Obtain event data according to the target element, including at least: detailed information of the target element, operation time, user identification, etc.

[0102] The name and data of the event generate buried point data, and push the buried point data to the SDK task queue. Insert a series of common fields into the buried point data object, such as device identification, session ID, operating system information, browser information, collection time, etc. These fields can provide additional context information to help the server analyze data more accurately. When the data in the task queue reaches a certain quantity or time interval, the SDK packages all the buried point data in the queue and calls a network request (through sendBeacon or a compatible sending method) to send the data to the server.

[0103] Figure 4 is a front-end information collection device according to an embodiment of the present application. The device includes:

[0104] An obtaining module 40, configured to obtain the types of plugins loaded in the software development kit (SDK), where different types of plugins are used to match different types of collection events;

[0105] A receiving module 42, configured to receive an operation instruction of the front-end interface, trigger a target collection event corresponding to the operation instruction, and obtain a target element in the document object model (DOM) operated by the operation instruction;

[0106] A collection module 44, configured to use a target type of plugin that matches the target collection event to collect event data corresponding to the target element.

[0107] Through the above front-end information collection device, by obtaining the types of plugins loaded in the software development kit (SDK), where different types of plugins are used to match different types of collection events; receiving an operation instruction of the front-end interface, triggering a target collection event corresponding to the operation instruction, and obtaining a target element in the document object model (DOM) operated by the operation instruction; using a target type of plugin that matches the target collection event to collect event data corresponding to the target element, the purpose of loading plugins for collecting different data according to different requirements is achieved, thereby realizing the technical effect of flexibly loading required plugins for data collection, and further solving the technical problem of low flexibility caused by a fixed collection scheme in the related art.

[0108] The receiving module 42 includes: an obtaining sub-module, configured to obtain a target element in the target document object model operated by the operation instruction, including: according to the unique identifier of the target element, the unique identifier at least includes: XPath, tag name, URL, text content, and sub-elements, where the XPath is used to represent the path of the target element in the document object model, the tag name is used to represent the tag name of the target element, the URL is used to represent the function of the target element, the text content represents the text content included in the target element, and the sub-elements are used to represent the sub-elements of the target element; determining the position where the target element is located based on the unique identifier.

[0109] The acquisition submodule includes: a matching unit, which is used to adopt a target type plug-in that matches the target acquisition event, including: acquiring the type of data collected by the target acquisition event, and determining the type of the target acquisition event according to the type of data collected by the target acquisition event; selecting the subtype of the target acquisition event from multiple subtypes corresponding to the type of the target acquisition event; and determining the target type plug-in that matches the target acquisition event according to the subtype of the target acquisition event.

[0110] The matching unit includes: a determination subunit, which is used to determine the type of the target acquisition event according to the type of data collected by the target acquisition event, including: when the type of data collected by the target acquisition event is abnormal data, determining the type of the target acquisition event to be an error type or a console type; when the type of data collected by the target acquisition event is performance data, determining the type of the target acquisition event to be a performance type; when the type of data collected by the target acquisition event is trajectory data, determining the type of the target acquisition event to be a behavior type or a hypertext transfer protocol http type or a lifecycle type.

[0111] The determination subunit is also used to determine a target type plug-in that matches the target acquisition event according to the subtype of the target acquisition event, including: when the indicator name corresponding to the subtype of the target acquisition event is white screen exception, determining that the target type plug-in is a white screen exception plug-in; when the indicator name corresponding to the subtype of the target acquisition event is code exception, resource loading exception and unprocessed asynchronous operation promise exception, determining that the target type plug-in is an error plug-in; when the indicator name corresponding to the subtype of the target acquisition event is page crash, determining that the target type plug-in is a page crash plug-in; when the indicator name corresponding to the subtype of the target acquisition event is framework error, determining that the target type plug-in is a framework error plug-in; when the indicator name corresponding to the subtype of the target acquisition event is debug log, general log, information log, warning log and error log, determining that the target type plug-in is a console plug-in; when the indicator name corresponding to the subtype of the target acquisition event is basic performance data, maximum content rendering time, load performance measurement , first input delay, cumulative layout offset, first screen resource loading and next rendering interaction, the target type plug-in is determined to be a performance plug-in; when the indicator name corresponding to the subtype of the target acquisition event is page views, page dwell time, page active time and page visible time, the target type plug-in is determined to be a behavior plug-in; when the indicator name corresponding to the subtype of the target acquisition event is click event acquisition data, the target type plug-in is determined to be a DOM click event plug-in; when the indicator name corresponding to the subtype of the target acquisition event is element exposure acquisition data, the target type plug-in is determined to be an element exposure plug-in; when the indicator name corresponding to the subtype of the target acquisition event is page route jump, the target type plug-in is determined to be a page route history plug-in; when the indicator name corresponding to the subtype of the target acquisition event is request monitoring, the target type plug-in is determined to be an HTTP request monitoring plug-in; when the indicator name corresponding to the subtype of the target acquisition event belongs to a life cycle event, the target type plug-in is determined to be a page life cycle monitoring plug-in.

[0112] The acquisition module 44 includes: an acquisition submodule, which is used to collect the event data corresponding to the target element, including: obtaining the event data corresponding to the target element; encapsulating the event data and the name of the target acquisition event into buried point data; pushing the buried point data to the task queue of the SDK, and uploading the buried point data to the server through the task queue.

[0113] The front-end information collection device further includes: a detection module, configured to detect the status of the current page; when the status of the current page changes from a visible state to a hidden state, send all the buried point data in the task queue to the server.

[0114] It should be noted that the front-end information collection device shown in Figure 4 is used to execute the front-end information collection method shown in Figure 2. Therefore, the relevant explanations in the above front-end information collection method also apply to this front-end information collection device, and will not be elaborated here.

[0115] An embodiment of the present application further provides a computer device, including: a memory and a processor, wherein the memory is used to store program instructions; the processor is connected to the memory and is used to execute the above front-end information collection method.

[0116] An embodiment of the present application further provides a non-volatile storage medium, which includes a stored computer program. The device where the non-volatile storage medium is located executes the above front-end information collection method by running the computer program.

[0117] An embodiment of the present application further provides a computer program product, including computer instructions, which implement the steps of the front-end information collection method in the present application when executed by a processor.

[0118] The serial numbers of the above embodiments of the present application are only for description and do not represent the advantages and disadvantages of the embodiments.

[0119] In the above embodiments of the present application, the descriptions of each embodiment have their own emphases. For parts not detailed in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0120] In the several embodiments provided by the present application, it should be understood that the disclosed technical content can be implemented in other ways.The device embodiments described above are merely illustrative, for example, the division of units may be a logical function division, and there may be other division methods in actual implementation, for example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces, indirect coupling or communication connection of units or modules, which may be electrical or other forms.

[0121] The unit described as a separate component may or may not be physically separated, and the component displayed as a unit may or may not be a physical unit, that is, it may be located in one place, or it may be distributed on multiple units. Some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0122] In addition, each functional unit in each embodiment of the present application can be integrated into a processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. If the integrated unit is implemented in the form of software functional unit and sold or used as an independent product, it can be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including some instructions to make a computer device (which can be a personal computer, server or network equipment, etc.) perform all or part of the steps of each embodiment method of the present application. And the aforementioned storage medium includes: various media that can store program code such as USB flash drive, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, magnetic disk or optical disk.

[0124] The above is only a preferred implementation of the present application. 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 application. These improvements and modifications should also be regarded as the scope of protection of the present application.< / iframe>

Claims

1. A front-end information collection method, characterized in that: include: Get the plug-in type loaded in the software development kit SDK, where different types of plug-ins are used to match different types of collection events; Receive an operation instruction from the front-end interface, trigger a target acquisition event corresponding to the operation instruction, and obtain a target element in the document object model DOM operated by the operation instruction; A target type plug-in matching the target collection event is used to collect event data corresponding to the target element.

2. The method according to claim 1, characterized in that Obtaining a target element in a target document object model operated by the operation instruction includes: According to the unique identifier of the target element, the unique identifier at least includes: XPath, tag name, URL, text content and sub-element, wherein the XPath is used to represent the path of the target element in the document object model, the tag name is used to represent the tag name of the target element, the URL is used to represent the function of the target element, the text content represents the text content contained in the target element, and the sub-element is used to represent the sub-element of the target element; The location of the target element is determined based on the unique identifier.

3. The method according to claim 2, characterized in that Adopt the target type plug-in that matches the target acquisition event, including: Acquire the type of data collected by the target collection event, and determine the type of the target collection event according to the type of data collected by the target collection event; Selecting a subtype of the target acquisition event from a plurality of subtypes corresponding to the type of the target acquisition event; A target type plug-in matching the target acquisition event is determined according to the subtype of the target acquisition event.

4. The method according to claim 3, characterized in that Determining the type of the target collection event according to the type of data collected by the target collection event includes: In a case where the type of data collected by the target collection event is abnormal data, determining the type of the target collection event to be a fault error type or a console console type; In the case where the type of data collected by the target collection event is performance data, determining the type of the target collection event to be a performance type; In a case where the type of data collected by the target collection event is trajectory data, the type of the target collection event is determined to be a behavior type, a hypertext transfer protocol http type, or a lifecycle type.

5. The method according to claim 4, characterized in that Determining a target type plug-in matching the target acquisition event according to the subtype of the target acquisition event includes: When the indicator name corresponding to the subtype of the target acquisition event is white screen exception, determining that the target type plug-in is a white screen exception plug-in; In the case where the indicator name corresponding to the subtype of the target acquisition event is code exception, resource loading exception, and unprocessed asynchronous operation promise exception, determining that the target type plug-in is an error plug-in; When the indicator name corresponding to the subtype of the target acquisition event is page crash, determining that the target type plug-in is a page crash plug-in; In a case where the indicator name corresponding to the subtype of the target acquisition event is a framework error, determining that the target type plug-in is a framework error plug-in; In the case where the indicator name corresponding to the subtype of the target collection event is debug log, general log, information log, warning log and error log, determining that the target type plug-in is a console plug-in; In a case where the indicator name corresponding to the subtype of the target acquisition event is basic performance data, maximum content rendering time, measured loading performance, first input delay, cumulative layout offset, first screen resource loading, and next rendering interaction, determining that the target type plug-in is a performance plug-in; When the indicator names corresponding to the subtype of the target acquisition event are page views, page dwell time, page active time, and page visible time, determining that the target type plug-in is a behavior plug-in; In the case where the indicator name corresponding to the subtype of the target collection event is click event collection data, determining that the target type plug-in is a DOM click event plug-in; In a case where the indicator name corresponding to the subtype of the target acquisition event is element exposure acquisition data, determining that the target type plug-in is an element exposure plug-in; In the case where the indicator name corresponding to the subtype of the target acquisition event is page route jump, determining that the target type plug-in is a page route history plug-in; In the case where the indicator name corresponding to the subtype of the target collection event is request monitoring, determining that the target type plug-in is an HTTP request monitoring plug-in; In the case that the indicator name corresponding to the subtype of the target acquisition event belongs to a lifecycle event, it is determined that the target type plug-in is a page lifecycle monitoring plug-in.

6. The method according to claim 1, characterized in that Collecting event data corresponding to the target element includes: Obtaining event data corresponding to the target element; Encapsulate the event data and the name of the target collection event into embedding data; The tracking data is pushed to the task queue of the SDK, and the tracking data is uploaded to the server through the task queue.

7. The method according to claim 1, characterized in that The method further comprises: Detect the status of the current page; When the state of the current page changes from a visible state to a hidden state, all the embedded point data in the SDK task queue are sent to the server.

8. A front-end information collection device, characterized in that: include: The acquisition module is used to obtain the plug-in type loaded in the software development kit SDK, where different types of plug-ins are used to match different types of collection events; A receiving module is used to receive an operation instruction from a front-end interface, trigger a target acquisition event corresponding to the operation instruction, and obtain a target element in a document object model DOM operated by the operation instruction; The collection module is used to collect event data corresponding to the target element by using a target type plug-in that matches the target collection event.

9. A computer device, characterized in that: include: A memory and a processor, wherein the memory is used to store program instructions; The processor is connected to the memory and is used to execute the front-end information collection method described in any one of claims 1-7.

10. A computer program product comprising computer instructions, characterized in that When the computer instructions are executed by the processor, the front-end information collection method described in any one of claims 1 to 7 is implemented.

Images