A front-end embedding method, device, equipment, and storage medium

Abstract

The present application discloses a front-end tracking method, device, equipment, and storage medium, including: determining a front-end page to be monitored; creating a target link for calling a tracking collector pre-created based on a JavaScript script; introducing the target link to the front-end page to be monitored, so as to add the tracking collector to the front-end page to be monitored; obtaining custom tracking configuration parameters through the tracking collector, and using the tracking configuration parameters to configure corresponding target tracking points for the nodes to be monitored on the DOM tree corresponding to the front-end page to be monitored, so as to monitor the nodes to be monitored through the target tracking points to obtain tracking monitoring data. It can be seen that the present application can achieve the isolation of tracking points from the front-end page business, achieve rapid tracking, improve the efficiency of development, and can feed back high-value information to developers, providing higher reference information for the development and operation of applications.

Description

Technical Field

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

[0002] At present, with the rapid development of information technology, a large number of users use application terminals to obtain information and realize their own business needs. For example, users browse a large number of web pages to obtain the information they need, and use shopping software to shop online. At the same time, content providers are also providing users with as much information as possible, but a lot of information is not useful to users. Therefore, how to count the information that users are interested in is extremely important for content providers.

[0003] At present, the user behavior information is usually collected by front-end tracking. The front-end tracking system provides support for website operation by collecting, analyzing and visualizing data such as the number of user visits, page dwell time, content dwell time, user conversion rate, button click rate, etc. The commonly used front-end tracking method is manual tracking, that is, the monitored behavior is embedded in the corresponding node during coding, such as the callback function after clicking a button or link, and the sending of a request when the page is loaded. However, although this can also achieve the effect of tracking, it is relatively intrusive to the code, making the business code more cumbersome, which is not conducive to the stability and maintainability of the code, and at the same time reduces development efficiency. Summary of the invention

[0004] In view of this, the purpose of this application is to provide a front-end tracking method, device, equipment, and storage medium, which can achieve fast tracking, reduce the workload of developers' manual tracking, and improve development efficiency. The specific solution is as follows:

[0005] In a first aspect, the present application discloses a front-end tracking method, including:

[0006] Determine the front-end page to be monitored;

[0007] Create a target link for calling the tracking collector created in advance based on the JavaScript script;

[0008] Introducing the target link to the front-end page to be monitored, so as to add the embedding collector to the front-end page to be monitored;

[0009] The customized tracking point configuration parameters are obtained through the tracking point collector, and the tracking point configuration parameters are used to configure corresponding target tracking points for the nodes to be monitored on the DOM tree corresponding to the front-end page to be monitored, so as to monitor the nodes to be monitored through the target tracking points to obtain tracking point monitoring data.

[0010] Optionally, before creating a target link for calling a tracking collector pre-created based on a JavaScript script, the process further includes:

[0011] Create a tracking collector including a DOM parser based on JavaScript scripts;

[0012] Correspondingly, the step of obtaining the customized tracking point configuration parameters through the tracking point collector, and using the tracking point configuration parameters to configure the corresponding target tracking point for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored, includes:

[0013] The DOM parser in the tracking point collector is used to parse the DOM tree corresponding to the front-end page to be monitored, and the customized tracking point configuration parameters are obtained through the tracking point collector. Then, the corresponding target tracking points are configured for the monitored nodes on the DOM tree corresponding to the front-end page to be monitored by injecting the tracking point configuration parameters into DOM native events.

[0014] Optionally, the step of creating a tracking point collector including a DOM parser based on a JavaScript script includes:

[0015] Create a tracking collector based on JavaScript scripts, including a DOM parser, data storage device, and data uploader;

[0016] Furthermore, after the target buried point is used to monitor the node to be monitored to obtain buried point monitoring data, the method further includes:

[0017] The data storage device is used to compress and package the buried point monitoring data, and the data packets obtained after packaging are saved. Then, the data packets saved in the data storage device are uploaded to the data analyzer connected to the buried point collector through the data uploader, so that the acquired data packets can be analyzed by the data analyzer.

[0018] Optionally, uploading the data packet stored in the data storage device to a data analyzer connected to the embedding collector by the data uploader includes:

[0019] Determine whether the size of the data packet currently stored in the data storage device is greater than a preset threshold value, and if so, upload the data packet currently stored in the data storage device to a data analyzer connected to the burying point collector through the data uploader;

[0020] Or, according to a preset data packet uploading cycle, the data packets stored in the data storage device are regularly uploaded to a data analyzer connected to the buried point collector through the data uploader.

[0021] Optionally, analyzing the acquired data packet by the data analyzer includes:

[0022] The acquired data packet is decompressed by the data analyzer, and the decompressed data is analyzed using big data technology, and then the analysis result data is saved in a preset database so that the visualization display device can read and display the analysis result data saved in the preset database through web display technology.

[0023] Optionally, the step of creating a target link for calling a tracking collector that is pre-created based on a JavaScript script includes:

[0024] Determine the deployment location of the tracking collector created in advance based on the JavaScript script; the deployment location includes an independent server or a content distribution network;

[0025] Create a target link for calling the tracking point collector located at the deployment location.

[0026] Optionally, the obtaining of custom tracking configuration parameters through the tracking collector includes:

[0027] The customized burying point configuration parameters are obtained through the burying point collector and by using the customized configuration interface; the burying point configuration parameters include the burying point event type and the burying point type.

[0028] In a second aspect, the present application discloses a front-end embedding device, comprising:

[0029] A page determination module is used to determine the front-end page to be monitored;

[0030] A link creation module is used to create a target link for calling a tracking collector that is pre-created based on a JavaScript script;

[0031] A link introduction module, used to introduce the target link into the front-end page to be monitored, so as to add the embedding collector to the front-end page to be monitored;

[0032] A parameter configuration module is used to obtain customized tracking point configuration parameters through the tracking point collector, and use the tracking point configuration parameters to configure corresponding target tracking points for the nodes to be monitored on the DOM tree corresponding to the front-end page to be monitored, so as to monitor the nodes to be monitored through the target tracking points to obtain tracking point monitoring data.

[0033] In a third aspect, the present application discloses an electronic device, comprising a processor and a memory; wherein, when the processor executes a computer program stored in the memory, the aforementioned front-end tracking method is implemented.

[0034] In a fourth aspect, the present application discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, the aforementioned front-end tracking method is implemented.

[0035] It can be seen that the present application first determines the front-end page to be monitored, and then creates a target link for calling a tracking point collector that is pre-created based on a JavaScript script, and introduces the target link to the front-end page to be monitored, so as to add the tracking point collector to the front-end page to be monitored, obtain the custom tracking point configuration parameters through the tracking point collector, and use the tracking point configuration parameters to configure the corresponding target tracking point for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored, so as to monitor the node to be monitored through the target tracking point to obtain the tracking point monitoring data. It can be seen that the present application can obtain the custom tracking point configuration parameters through the target link of the tracking point collector created in advance, and use the tracking point configuration parameters to configure the corresponding target tracking point for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored, thereby realizing automated tracking point, with low intrusion to the business code and low access cost, which is convenient for developers to achieve rapid tracking point and improves development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0037] Figure 1 A flow chart of a front-end tracking method disclosed in this application;

[0038] Figure 2 A flow chart of a specific front-end tracking method disclosed in this application;

[0039] Figure 3 A flow chart of a method for processing buried point data disclosed in this application;

[0040] Figure 4 This is a schematic diagram of the structure of a front-end burying point device disclosed in this application;

[0041] Figure 5 This is a structural diagram of an electronic device disclosed in this application. DETAILED DESCRIPTION

[0042] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions 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 are within the scope of protection of this application.

[0043] The present application embodiment discloses a method for configuring a secure boot file. Figure 1 As shown, the method includes:

[0044] Step S11: Determine the front-end page to be monitored.

[0045] In this embodiment, it is first necessary to determine the front-end page of the client that needs to be monitored. The client includes but is not limited to clients developed based on platforms such as Android platform, IOS platform, H5 production platform, and small program development platform.

[0046] Step S12: Create a target link for calling a tracking point collector that is pre-created based on a JavaScript script.

[0047] In this embodiment, the corresponding code is written in advance based on the JavaScript script, and the above code is used to create the embedding point collector. After the above embedding point collector is created, it is necessary to create a link that calls the above embedding point collector, that is, the target link.

[0048] It should be pointed out that the above-mentioned creation of a target link for calling a tracking point collector pre-created based on a JavaScript script includes: determining the deployment location of the tracking point collector pre-created based on a JavaScript script; the deployment location includes an independent server or a content distribution network (CDN, i.e., Content Delivery Network); and then creating a target link for calling the tracking point collector located at the deployment location. It is understandable that after the above-mentioned tracking point collector is created, it is necessary to determine the deployment location of the above-mentioned tracking point collector. The deployment location can be located on an independent server or deployed on a CDN network, and a corresponding target link is created for the tracking point collector at the deployment location.

[0049] Step S13: Introduce the target link to the front-end page to be monitored, so as to add the embedding collector to the front-end page to be monitored.

[0050] In this embodiment, after creating a target link for calling the tracking point collector created in advance based on a JavaScript script, the above target link needs to be introduced into the above front-end page to be monitored, that is, the above tracking point collector needs to be added to the above front-end page to be monitored, so that the client can obtain the tracking point collector located at the above deployment location through the above target link.

[0051] Step S14: Obtain customized tracking point configuration parameters through the tracking point collector, and use the tracking point configuration parameters to configure corresponding target tracking points for the nodes to be monitored on the DOM tree corresponding to the front-end page to be monitored, so as to monitor the nodes to be monitored through the target tracking points to obtain tracking point monitoring data.

[0052] In this embodiment, after the target link is introduced into the front-end page to be monitored, the tracking point collector can be obtained through the target link. The tracking point collector can obtain the customized tracking point configuration parameters by using the customized configuration interface. Among them, the tracking point configuration parameters include tracking point event type and tracking point type. Specifically, the tracking point event type includes but is not limited to mouse clicks, mouse movement, keyboard events, route switching events, etc.; the tracking point types include but are not limited to applets, APPs (applications), WEB pages, etc.

[0053] Furthermore, after obtaining the above-mentioned customized embedding point configuration parameters, the above-mentioned embedding point configuration parameters can be injected into the attributes corresponding to the node to be monitored on the DOM tree (DOM, i.e., Document Object Model) corresponding to the front-end page to be monitored, thereby configuring the corresponding target embedding point for the node to be monitored, and the above-mentioned target embedding point can be used to monitor the node to be monitored. When the user end triggers the embedding point event corresponding to the node to be monitored, the corresponding embedding point data, i.e., the embedding point monitoring data, can be monitored.

[0054] It can be seen that the embodiment of the present application first determines the front-end page to be monitored, and then creates a target link for calling a tracking point collector created in advance based on a JavaScript script, and introduces the target link to the front-end page to be monitored, so as to add the tracking point collector to the front-end page to be monitored, obtain the custom tracking point configuration parameters through the tracking point collector, and use the tracking point configuration parameters to configure the corresponding target tracking point for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored, so as to monitor the node to be monitored through the target tracking point to obtain the tracking point monitoring data. It can be seen that the present application can obtain the custom tracking point configuration parameters through the target link of the tracking point collector created in advance, and use the tracking point configuration parameters to configure the corresponding target tracking point for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored, thereby realizing automated tracking, which is less invasive to the existing business code, convenient for developers to achieve rapid tracking, and improves the efficiency of development.

[0055] The present application embodiment discloses a specific front-end tracking method, see Figure 2 As shown, the method includes:

[0056] Step S21: Determine the front-end page to be monitored.

[0057] Step S22: Create a target link for calling a tracking point collector that contains a DOM parser and is created in advance based on a JavaScript script.

[0058] That is, in this embodiment, before creating a target link for calling a burying point collector pre-created based on a JavaScript script, it may further include: creating a burying point collector including a DOM parser based on the JavaScript script.

[0059] Step S23: Introduce the target link to the front-end page to be monitored, so as to add the embedding collector to the front-end page to be monitored.

[0060] Step S24: Utilize the DOM parser in the tracking point collector to parse the DOM tree corresponding to the front-end page to be monitored, and obtain customized tracking point configuration parameters through the tracking point collector, and then configure corresponding target tracking points for the nodes to be monitored on the DOM tree corresponding to the front-end page to be monitored by injecting the tracking point configuration parameters into DOM native events, so as to monitor the nodes to be monitored through the target tracking points to obtain tracking point monitoring data.

[0061] In this embodiment, after the target link is introduced into the front-end page to be monitored, the above-mentioned tracking point collector can be obtained. Furthermore, the DOM parser in the above-mentioned tracking point collector is used to parse the DOM tree corresponding to the front-end page to be monitored, and the custom tracking point configuration parameters can be obtained. Then, the above-mentioned tracking point configuration parameters can be injected into the native events corresponding to the DOM to configure the corresponding target tracking points for the nodes to be monitored on the DOM tree corresponding to the front-end page to be monitored, so that the monitoring of the nodes to be monitored can be realized through the configured target nodes, and then the tracking point monitoring data corresponding to the nodes to be monitored can be obtained. Among them, the tracking point monitoring data includes but is not limited to user-defined collection data, page life cycle data, route switching data, etc.

[0062] Furthermore, in addition to the DOM parser, the tracking point collector in this embodiment may also include a data storage device and a data uploader. That is, in this embodiment, the tracking point collector based on the JavaScript script that includes the DOM parser may specifically include: creating a tracking point collector based on the JavaScript script that includes the DOM parser, a data storage device and a data uploader. In this embodiment, the DOM parser, the data storage device and the data uploader are connected in sequence.

[0063] Accordingly, see Figure 3 As shown, this embodiment further discloses a method for processing buried point data, which specifically includes:

[0064] Step S31: monitoring the node to be monitored through the target buried point to obtain buried point monitoring data;

[0065] Step S32: compressing and packaging the buried point monitoring data through a data storage device, and saving the packaged data packets;

[0066] Step S33: uploading the data packets stored in the data storage device to the data analyzer connected to the buried point collector through the data uploader, so as to analyze the acquired data packets through the data analyzer.

[0067] In this embodiment, after the target buried point is used to monitor the node to be monitored to obtain the buried point monitoring data, the buried point monitoring data can also be compressed by the data storage device, and the compressed buried point monitoring data can be packaged, and the data packets obtained after packaging can be uniformly stored. Furthermore, the data packets stored in the above-mentioned data storage device can be uploaded to the data analyzer connected to the buried point collector by the data uploader, and the data analyzer will further analyze the above-mentioned data packets after obtaining the above-mentioned data packets. It should be pointed out that in order to avoid repeated uploading of data, in this embodiment, after the data uploader uploads the data packets stored in the data storage device to the data analyzer, the storage space can be released by clearing the data packets in the data storage device.

[0068] Specifically, in the first specific implementation, the data packet stored in the data storage device is uploaded to the data analyzer connected to the buried point collector by the data uploader, which may include: judging whether the size of the data packet currently stored in the data storage device is greater than a preset threshold value, and if it is greater than the preset threshold value, uploading the data packet currently stored in the data storage device to the data analyzer connected to the buried point collector by the data uploader. It can be understood that since the data packet uploaded in real time is usually small, in order to avoid frequent uploading and to avoid excessive occupation of the communication resources of the front-end page, this embodiment can judge whether the data packet currently stored in the data storage device needs to be uploaded by comparing the data packet size with the preset threshold value, and if the size of the data packet currently stored in the data storage device is greater than the preset threshold value, the data packet currently stored in the data storage device can be uploaded to the data analyzer connected to the buried point collector by the above-mentioned data uploader. For example, the threshold value of the preset threshold value is set to 100MB, and if the size of the data packet currently stored in the data storage device is greater than 100MB, the current data packet can be uploaded to the data analyzer by the data uploader.

[0069] In a second specific implementation, uploading the data packets stored in the data storage device to the data analyzer connected to the buried point collector by the data uploader may specifically include: according to a preset data packet upload cycle, regularly uploading the data packets stored in the data storage device to the data analyzer connected to the buried point collector by the data uploader. It is understandable that after the data storage device compresses and packages the buried point monitoring data, and saves the packaged data packets, the data packets may be uploaded to the data analyzer according to the preset data packet upload cycle. For example, the upload cycle may be daily, and the above-mentioned data packets may be uploaded to the data analyzer on a daily basis.

[0070] Further, in this embodiment, the analysis of the acquired data packet by the data analyzer may specifically include: decompressing the acquired data packet by the data analyzer, analyzing the decompressed data using big data technology, and then saving the analysis result data to a preset database, so that the visualization display device reads and displays the analysis result data stored in the preset database using web display technology. It is understandable that after the data analyzer acquires the data packet uploaded by the above-mentioned data uploader, it will decompress the acquired data packet to obtain the buried point monitoring data before compression, and analyze the buried point monitoring data obtained after decompression using big data technology to obtain the analysis result data that the developer is concerned about. Among them, the analysis result data includes but is not limited to PV (Page View, web page visits), UV (Unique Visitor, number of independent visitors), button clicks, function usage frequency, area stay time, page activity, user conversion rate, etc.

[0071] Furthermore, after obtaining the above analysis result data, the data analyzer will save the above analysis result data into a preset database as a data source for a visualization display device. The visualization display device includes a data reading module and a page display device. The data reading module is deployed at the back end, and is used to read the data in the database and provide the page display device with the data in the form of an interface; the page display device is deployed at the front end, and is used to clearly display the analysis result data stored in the preset database using web display technology when the data returned by the interface is obtained, and customized display can be realized according to the specific needs of the developer. The tools used in the web display technology include but are not limited to D3.js, Echarts, Chart.js, FusionCharts, etc.

[0072] It can be seen that the embodiment of the present application parses the DOM tree corresponding to the front-end page to be monitored through the DOM parser in the tracking point collector, and obtains the customized tracking point configuration parameters through the tracking point collector, and then configures the corresponding target tracking point for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored by injecting the tracking point configuration parameters into the DOM native event, and the monitoring of the node to be monitored can be realized through the target tracking point to obtain the tracking point monitoring data, and the tracking point monitoring data is processed through the data storage device linked to the DOM parser, and the processed data packet is uploaded to the connected data analyzer, and the analysis result data obtained after the analysis is visualized through the web page, which can facilitate developers to realize fast tracking, and has little impact on the performance and response efficiency of existing businesses. Through the intuitive visualization of the analysis result data, high-value information can be fed back to developers, providing higher reference information for the development and operation of websites and applications.

[0073] Correspondingly, the present application also discloses a front-end embedding device, see Figure 4 As shown, the device comprises:

[0074] The page determination module 11 is used to determine the front-end page to be monitored;

[0075] A link creation module 12, used to create a target link for calling a buried point collector created in advance based on a JavaScript script;

[0076] A link introduction module 13 is used to introduce the target link into the front-end page to be monitored, so as to add the embedding collector to the front-end page to be monitored;

[0077] The parameter configuration module 14 is used to obtain customized tracking point configuration parameters through the tracking point collector, and use the tracking point configuration parameters to configure corresponding target tracking points for the nodes to be monitored on the DOM tree corresponding to the front-end page to be monitored, so as to monitor the nodes to be monitored through the target tracking points to obtain tracking point monitoring data.

[0078] It can be seen that in the embodiment of the present application, the front-end page to be monitored is first determined, and then a target link is created for calling a tracking point collector that is pre-created based on a JavaScript script, and the target link is introduced into the front-end page to be monitored, so that the tracking point collector is added to the front-end page to be monitored, and the custom tracking point configuration parameters are obtained through the tracking point collector, and the tracking point configuration parameters are used to configure corresponding target tracking points for the nodes to be monitored on the DOM tree corresponding to the front-end page to be monitored, so that the nodes to be monitored are monitored through the target tracking points to obtain tracking point monitoring data. The embodiment of the present application can obtain custom tracking point configuration parameters through the target link of the tracking point collector created in advance, and use the tracking point configuration parameters to configure corresponding target tracking points for the nodes to be monitored on the DOM tree corresponding to the front-end page to be monitored, thereby realizing automated tracking points, reducing the workload of developers for manual tracking points, and improving development efficiency.

[0079] In some specific embodiments, the link creation module 12 may further include:

[0080] A first creation unit is used to create a tracking point collector including a DOM parser based on a JavaScript script;

[0081] Accordingly, the parameter configuration module 14 may specifically include:

[0082] The first parameter configuration unit is used to utilize the DOM parser in the tracking point collector to parse the DOM tree corresponding to the front-end page to be monitored, and obtain the customized tracking point configuration parameters through the tracking point collector, and then configure the corresponding target tracking point for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored by injecting the tracking point configuration parameters into the DOM native event.

[0083] In some specific embodiments, the first creating unit may specifically include:

[0084] The second creation unit is used to create a tracking point collector including a DOM parser, a data storage device and a data uploader based on a JavaScript script;

[0085] Furthermore, after the target buried point is used to monitor the node to be monitored to obtain buried point monitoring data, the following may also be included:

[0086] A data storage unit, used to compress and package the buried point monitoring data through the data storage device, and save the packaged data packets;

[0087] The first data uploading unit is used to upload the data packets stored in the data storage device to the data analyzer connected to the buried point collector through the data uploader, so as to analyze the acquired data packets through the data analyzer.

[0088] In some specific embodiments, the first data uploading unit may specifically include:

[0089] A first judging unit, used to judge whether the size of the data packet currently stored in the data storage device is greater than a preset threshold;

[0090] A second data uploading unit, used for uploading the data packet currently stored in the data storage device to a data analyzer connected to the burying point collector through the data uploader when the size of the data packet currently stored in the data storage device is greater than a preset threshold;

[0091] Or, a third data uploading unit is used to regularly upload the data packets stored in the data storage device to the data analyzer connected to the buried point collector through the data uploader according to a preset data packet uploading cycle.

[0092] In some specific embodiments, analyzing the acquired data packet by the data analyzer may specifically include:

[0093] The first analysis unit is used to decompress the acquired data packet through the data analyzer, analyze the decompressed data using big data technology, and then save the analysis result data to a preset database so that the visualization display device can read and display the analysis result data saved in the preset database through web display technology.

[0094] In some specific embodiments, the link creation module 12 may specifically include:

[0095] A first determining unit is used to determine a deployment location of a tracking point collector that is pre-created based on a JavaScript script; the deployment location includes an independent server or a content distribution network;

[0096] The second creation unit is used to create a target link for calling the tracking point collector located at the deployment location.

[0097] In some specific embodiments, the step of obtaining the customized tracking configuration parameters through the tracking collector may specifically include:

[0098] The first acquisition unit is used to acquire the customized burying point configuration parameters through the burying point collector and using the customized configuration interface; the burying point configuration parameters include the burying point event type and the burying point type.

[0099] Furthermore, the present application also discloses an electronic device. Figure 5 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content in the diagram cannot be regarded as any limitation on the scope of use of the present application.

[0100] Figure 5 A schematic diagram of the structure of an electronic device 20 provided in an embodiment of the present application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 is used to store a computer program, and the computer program is loaded and executed by the processor 21 to implement the relevant steps in the front-end tracking method disclosed in any of the aforementioned embodiments. In addition, the electronic device 20 in this embodiment may specifically be an electronic computer.

[0101] In this embodiment, the power supply 23 is used to provide working voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and the external device, and the communication protocol it follows is any communication protocol that can be applied to the technical solution of the present application, and is not specifically limited here; the input and output interface 25 is used to obtain external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs and is not specifically limited here.

[0102] In addition, the memory 22, as a carrier for storing resources, can be a read-only memory, a random access memory, a disk or an optical disk, etc. The resources stored thereon can include an operating system 221, a computer program 222, etc., and the storage method can be temporary storage or permanent storage.

[0103] Among them, the operating system 221 is used to manage and control the hardware devices on the electronic device 20 and the computer program 222, which can be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program that can be used to complete the front-end tracking method performed by the electronic device 20 disclosed in any of the aforementioned embodiments, the computer program 222 can further include a computer program that can be used to complete other specific tasks.

[0104] Furthermore, the present application also discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, the front-end tracking method disclosed above is implemented. For the specific steps of the method, reference can be made to the corresponding contents disclosed in the above embodiments, and no further description will be given here.

[0105] In this specification, each embodiment is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part.

[0106] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0107] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0108] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0109] The above is a detailed introduction to a front-end tracking method, device, equipment, and storage medium provided by the present application. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea; at the same time, for general technical personnel in this field, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A front-end embedding method, characterized in that: include: Determine the front-end page to be monitored; Create a target link for calling the tracking collector created in advance based on the JavaScript script; Introducing the target link to the front-end page to be monitored, so as to add the embedding collector to the front-end page to be monitored; Obtaining customized tracking configuration parameters through the tracking collector, and using the tracking configuration parameters to configure corresponding target tracking points for the nodes to be monitored on the DOM tree corresponding to the front-end page to be monitored, so as to monitor the nodes to be monitored through the target tracking points to obtain tracking monitoring data; the tracking monitoring data includes any one of user-defined collection data, page life cycle data and route switching data; The obtaining of the customized tracking configuration parameters through the tracking collector includes: Obtaining custom burying point configuration parameters through the burying point collector and using a custom configuration interface; the burying point configuration parameters include a burying point event type and a burying point type; Before creating a target link for calling a tracking collector pre-created based on a JavaScript script, the method further includes: Create a tracking collector including a DOM parser based on JavaScript scripts; Correspondingly, the step of obtaining the customized tracking point configuration parameters through the tracking point collector, and using the tracking point configuration parameters to configure the corresponding target tracking point for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored, includes: Utilize the DOM parser in the tracking point collector to parse the DOM tree corresponding to the front-end page to be monitored, and obtain the customized tracking point configuration parameters through the tracking point collector, and then configure the corresponding target tracking point for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored by injecting the tracking point configuration parameters into the DOM native event; The JavaScript-based creation of a tracking collector including a DOM parser includes: Create a tracking collector based on JavaScript scripts, including a DOM parser, data storage device, and data uploader; Furthermore, after the target buried point is used to monitor the node to be monitored to obtain buried point monitoring data, the method further includes: The data storage device is used to compress and package the buried point monitoring data, and the data packets obtained after packaging are saved. Then, the data packets saved in the data storage device are uploaded to the data analyzer connected to the buried point collector through the data uploader, so that the acquired data packets can be analyzed by the data analyzer.

2. The front-end embedding method according to claim 1, characterized in that: The step of uploading the data packet stored in the data storage device to a data analyzer connected to the embedding collector by means of the data uploader comprises: Determine whether the size of the data packet currently stored in the data storage device is greater than a preset threshold value, and if so, upload the data packet currently stored in the data storage device to a data analyzer connected to the burying point collector through the data uploader; Or, according to a preset data packet uploading cycle, the data packets stored in the data storage device are regularly uploaded to a data analyzer connected to the buried point collector through the data uploader.

3. The front-end embedding method according to claim 1, characterized in that: The analyzing the acquired data packet by the data analyzer includes: The acquired data packet is decompressed by the data analyzer, and the decompressed data is analyzed using big data technology, and then the analysis result data is saved in a preset database so that the visualization display device can read and display the analysis result data saved in the preset database through web display technology.

4. The front-end embedding method according to claim 1, characterized in that: The step of creating a target link for calling a tracking collector that is pre-created based on a JavaScript script includes: Determine the deployment location of the tracking collector created in advance based on the JavaScript script; the deployment location includes an independent server or a content distribution network; Create a target link for calling the tracking point collector located at the deployment location.

5. A front-end embedding device, characterized in that: include: A page determination module is used to determine the front-end page to be monitored; A link creation module is used to create a target link for calling a tracking collector that is pre-created based on a JavaScript script; A link introduction module, used to introduce the target link into the front-end page to be monitored, so as to add the embedding collector to the front-end page to be monitored; A parameter configuration module, used to obtain the customized tracking configuration parameters through the tracking collector, and use the tracking configuration parameters to configure the corresponding target tracking for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored, so as to monitor the node to be monitored through the target tracking to obtain tracking monitoring data; the tracking monitoring data includes any one of the user-defined collection data, page life cycle data and route switching data; The step of obtaining the customized tracking point configuration parameters through the tracking point collector specifically includes: A first acquisition unit is used to acquire custom burying point configuration parameters through the burying point collector and using a custom configuration interface; the burying point configuration parameters include a burying point event type and a burying point type; The link introduction module further includes: A first creation unit is used to create a tracking point collector including a DOM parser based on a JavaScript script; Correspondingly, the parameter configuration module specifically includes: A first parameter configuration unit is used to parse the DOM tree corresponding to the front-end page to be monitored by using the DOM parser in the tracking collector, and obtain the custom tracking configuration parameters through the tracking collector, and then configure the corresponding target tracking for the node to be monitored on the DOM tree corresponding to the front-end page to be monitored by injecting the tracking configuration parameters into the DOM native event; The first creation unit specifically includes: The second creation unit is used to create a tracking point collector including a DOM parser, a data storage device and a data uploader based on a JavaScript script; Furthermore, after the target buried point is used to monitor the node to be monitored to obtain buried point monitoring data, the method further includes: A data storage unit, used to compress and package the buried point monitoring data through the data storage device, and save the packaged data packets; The first data uploading unit is used to upload the data packets stored in the data storage device to the data analyzer connected to the buried point collector through the data uploader, so as to analyze the acquired data packets through the data analyzer.

6. An electronic device, characterized in that: It includes a processor and a memory; wherein, when the processor executes the computer program stored in the memory, it implements the front-end tracking method as described in any one of claims 1 to 4.

7. A computer-readable storage medium, characterized in that: Used to store computer programs; wherein, when the computer program is executed by a processor, it implements the front-end tracking method as described in any one of claims 1 to 4.

Images