For more original articles, please follow us by scanning the qr code at 👆

background

With the continuous growth of the company’s business and platform business, the complexity of the scenario also increases. This has brought great impact and challenges to the user experience of platform products, the deepening operation of business scenes, and the convenience of using platform users in the process. In order to reach users’ pain points more accurately, locate and transform low points, and improve business empowerment, optimization strategies based on data analysis are imperative.

From the end of last year, ZooTeam took the initiative to promote the capacity building of Web data burial point and analysis quantification at the business level of the company (internal product named “Armillary Sphere System”). We hope that based on our past events and experience, we can provide some thoughts and help to our friends who are interested in practicing this direction from 0 to 1.

An overview of the system

What does the data burial point analysis system do? What data were collected? How will we use and analyze this data? How will it be presented?

First, let’s look at the system architecture. The whole system consists of the following four parts, and is expected to provide a complete set of user behavior analysis solutions:

1. Buried collection JSSDK: Collect user behavior data and report it;
2. Data processing service: receiving and storing reported data; Screening the required data, data processing and leakage;
3. Data visualization platform: summarize and display detailed data, support customization, get through business;
4. Chrome plug-in tool: Visually displays pit data on the page, providing scenario-friendly data visualization services.

The basic collaboration process is that when users enter any buried Web page of the platform and perform a series of operations (entering, clicking, scrolling, etc.), JSSDK will classify the data and report it to the server for storage. The site/plug-in will initiate query, and the server will return the processed data. Through the data visualization platform for transparent display.

The data collection

Data collection is generally divided into the following three types:

1. No buried point (full buried point) : zero buried point cost, capture the full data of user behavior, any operation behavior will be uploaded. Large amount of data, “noise”;
2. Visual burying point: operate in the page, select the burying point position/module, non-developers can also carry out burying point;
3. Intrusive burying point: data acquisition code needs to be written into the business code, burying point cost is higher, but the accuracy is also higher;

Due to high requirements on data accuracy, and the hope that only a small amount of development resources can be invested in the early stage of rapid trial and error, and in order to meet the acquisition needs of key user behavior data, we give priority to the code intrusive buried point scheme.

At the same time, in view of the disadvantage of high access cost, we will also adopt automatic implantation in the building system and components, which will not be detailed here. In order to reduce the access cost and capture data more flexibly, we adopt the combination of automatic sending after the DOM node mounts special attributes and manual custom sending to meet the needs of different scenarios.

// Automatic transmission of buried points, for example:<button data-utm-click="${did}" data-utm-data=${business data}>// Send buried points manually, for example: Const utmCnt = g_utm.batchsend (' trigger type (click/ Browse) etc. ',[{utmCD:[' block info ',' location info '], Bdata: {key: 'other business data'}}, {utmCD: [' 001 ', '008'], bdata: {key: 'value'}}]);Copy the code

Based on the big goal of User behavior analysis, we collected data around two themes: Event (Event/behavior) and User (User).

We collect the following information about events: Event type, occurrence time, and page location, which constitute the unique identifier of the event.

Around the “user”, we collected user IP, operating system, browser information, screen resolution, etc., and generated the unique identity of the user and implanted it in cookies.

{bdata: {}, // service data createTime: "1571038815128", // createTime evt: "browse", // event type ipAddr: 122.226.174.195, // IP address logType: 2, // trigger type lver: 1.1.0, // version mx: 0, // "Windows/7", // OS pre: "https://www.zcygov.cn/", // Source address SCR: "1920x1360", // Screen resolution URL: "https://www.zcygov.cn/", // page address userId: "001", // userId utmCnt: "A0004.2 ef5001f. 0001.0001 d814bf60ee5511e99397b37fe9083257", / / trigger position utmUrl: "a0004.2 ef5001f. 0001.0001", / / source location uuid: "D7fd8de0-ee55-11e9-9397-b37fe9083257 ", // browser unique identifier}Copy the code

Some of the collected fields above will be used in the following example.

The data show

At present, the foreground site has provided rich data display functions, such as: PV (number of views) /UV (number of views) sorting or trend, funnel analysis, path analysis, heat map analysis, user portrait, custom kanban, etc., as well as various business-related data statistics and report export functions. The general menu is as follows:

• PV/UV sort or trend (PV: PageView, page browsing times, users open a record once, open the same page for many times will accumulate many times; UV: UserView, number of page views; PV/UV will be used directly below.)
  • PV/UV single-day trend chart of the whole site: peak and trough of view volume at different times;
  • PV/UV sort: View PV/UV of Top page
  • Query PV/UV information by page and time range
• Funnel analysis: sort the number of people at each stage according to the process and calculate the conversion rate;
• Path analysis: query the source and direction of each page;
• Heat map analysis
  • Click heat map: button and link click heat map;
  • Scrolling heat map (coming online soon) : user page scrolling touch rate;
• User portrait (soon to be online) : query the detailed information of key users, such as the number of return visits, browsing path, user identity, location, operating system and browser;
• Custom kanban: display items of homepage kanban can be selected;

Assigned to the business

To collect and analyze what data is valuable to the business, we refer to a number of mature user behavior analysis solutions in the industry, including:

1. GrowingIO
2. God ce data
3. Number of geeks

The functions of these products in user behavior analysis can be said to be large and complete. According to our actual needs, the following key functional modules can be screened out:

Key function points	Number of geeks	God ce data	GrowingIO	Since the research system
Form analysis	support	support	support	Does not support
Page analysis	support	support	support	support
Path analysis	support	support	support	support
Funnel analysis	support	support	support	support
Event analysis	support	support	support	support
Event distribution analysis	support	support	support	support
The user group	support	support	support	support
Behavior prediction	Does not support	support	Does not support	Does not support
User behavior sequence	Does not support	support	Does not support	Does not support
Heat map	support	support	support	support
Video playback	support	Does not support	Does not support	Does not support

Most of the above supported functions can be viewed in the [Data Display] module, and form analysis and user behavior sequence have been planned in our version. Form analysis is to analyze the various behaviors of a user from entering a form filling page to submitting form. The filling rate, refilling rate, filling duration, and abandonment rate of each form item are all important analysis indicators, which directly affect the overall conversion rate. It can also help developers find and locate interaction issues in form pages in a timely manner, thus improving user experience and conversion rates in critical links.

For example: the conversion of the common registration form, that is, 10 users to the registration page but in the end only seven user successfully registered, this function can effectively discover the remaining three registered users lost failure points, find they are in which fill in the form before leaving the page or find the fill in the form item of the highest rate is optimized. User behavior sequence is to view the behavior track on our site from the perspective of a single user, so as to analyze the behavior preferences of key users.

Based on the current business development of the company, in addition to the above basic functional modules, the system will also consider some customized business capability modules. According to the capability type of the current system, it can be divided into user behavior analysis, link transformation analysis, user experience analysis, etc. :

Search for process buried cases

So what valuable data can we collect from a page or process? Let’s take a simple process as an example.

The process here can be divided into three steps: first, users enter the homepage of Zhengcai Cloud electronic store and enter the keyword they want to search in the search box; second, users click the search button to enter the search results page; finally, they find the target product in the results page and click into the product details page to check. This is a relatively common process and a key process in the user operation behavior of an e-commerce platform.

We will collect the following three kinds of data in the above three pages:

1. The page enters/leaves the automatic burying point
2. Button click on the buried point
3. Click on the buried link

As shown in the image above, the Chrome plugin tool visually displays the number of links and button clicks (desensitized) on the page.

Using the three buried points mentioned above, we can get four kinds of data related to user behavior in a single page.

1. PV: PV can be obtained by calculating the total number of logs that enter the page
2. UV: UV can be obtained by filtering PV with unique UUID;
3. Click number of buttons: The click number of buttons can be obtained by counting the number of logs reported by button click events.
4. Number of link hits: Click on the button and click on the button is different, is sent via a separate click events reported to the statistics, and links to click jump is often leads to a page, here is from the electronic stores left home page in the search results page, at this point we have statistics is the search results page page into the events of utmUrl value (that is, the only source button identification number), It can be judged that the entry of the search results page is from the click of common search keywords on the home page, so as to count the number of link clicks in this position.

After processing these data, we can further obtain: residence time, conversion rate, thermal map;

• Thermal map: used to reflect the density of points in the graph. Here, we combine the click coordinates (x and Y coordinates of the click, and then make consistent conversion according to the screen resolution) into the click heat map, as shown below (the data has been desensitized).

• Funnel analysis: it consists of a meta-event/virtual event plus one or more filtering conditions, indicating a key step in a transformation process; Creating a funnel on our platform consists of the following steps:

As shown in the figure below, three events are defined in this funnel.

Concatenation of these three events gives a complete funnel diagram (desensitization of the data).

conclusion

This paper is only a preliminary introduction to the general type of data burying point and analysis system. In the follow-up, we will produce a series of articles for each pit we have stepped on and the optimization we have done. We hope you can give us your opinions.

1. How to Collect Data efficiently and completely
2. Design of Buried Point Data Analysis Model
3. Data Visualization for Chrome

, recruiting

ZooTeam, a young passionate and creative front-end team, belongs to the PRODUCT R&D department of ZooTeam, based in picturesque Hangzhou. The team now has more than 50 front-end partners, with an average age of 27, and nearly 30% of them are full-stack engineers, no problem in the youth storm group. The members consist of “old” soldiers from Alibaba and netease, as well as fresh graduates from Zhejiang University, University of Science and Technology of China, Hangzhou Electric And other universities. In addition to daily business docking, the team also carried out technical exploration and practice in material system, engineering platform, building platform, performance experience, cloud application, data analysis and visualization, promoted and implemented a series of internal technical products, and continued to explore the new boundary of front-end technology system.

If you want to change what’s been bothering you, you want to start bothering you. If you want to change, you’ve been told you need more ideas, but you don’t have a solution. If you want change, you have the power to make it happen, but you don’t need it. If you want to change what you want to accomplish, you need a team to support you, but you don’t have the position to lead people. If you want to change the pace, it will be “5 years and 3 years of experience”; If you want to change the original savvy is good, but there is always a layer of fuzzy window… If you believe in the power of believing, believing that ordinary people can achieve extraordinary things, believing that you can meet a better version of yourself. If you want to be a part of the process of growing a front end team with deep business understanding, sound technology systems, technology value creation, and impact spillover as your business takes off, I think we should talk. Any time, waiting for you to write something and send it to [email protected]

Recommended reading

Visual Construction System for Front-end Engineering Practice (PART 1)

Probably the most complete collection of text overflow truncation ellipsis schemes

An illustrated guide to unlock the mysteries of single sign-on