Sharing experience on data collection in the development process of Dianping ordering app

Abstract: The experience of mini program development and the "pits" encountered in the process have been almost introduced in our team's previous series of articles on mini program development experience. In the era of big data, a product Success or failure requires a large amount of data to be analyzed and verified. In this issue, let’s explore with you how WeChat Mini Programs...

About the experience and process of mini program development The "pits" encountered by our team have been introduced in the previous series of articles on small program development experience. In the era of big data, the success or failure of a product requires a large amount of data to be analyzed and verified. In this issue, we will explore with you how WeChat applet collects and analyzes data, and of course there are "pits" in the process.

# Some examples in this article come from the menu page of the "Dianping Ordering" applet.

Author introduction: Zou Gongyi, Meituan Dianping front-end engineer, 4 years of Web front-end development experience, now Meituan Dianping Be part of the dining team.

#All content based on March 2, 2017 The official api as of todayWeChat official collection platform introduction

WeChat mini program public platform is currently available An official data collection and analysis platform has been developed. Official api: https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=201726
The official public beta version of the mini program currently provides the following data analysis:

• Overview: Provide key indicator trends and top page access data of the mini program to quickly understand the development overview of the mini program;

  (No manual configuration required, official default collection )

• Access analysis: Provide data such as the source, scale, frequency, duration, depth, and page details of mini-program user visits, and conduct a detailed analysis of new user additions and activity;

  (No manual configuration required, official default collection)

##Real-time statistics: Provide real-time access to data by small programs to meet real-time monitoring needs;
• (No manual configuration required, Official default collection)

#Customized analysis: Configure custom reporting, fine-grained tracking of user behavior within the mini program, and flexible multi-dimensional analysis based on user attributes, system attributes, and event attributes. Event analysis and funnel analysis meet the personalized analysis needs of the mini program;
• (Inside, you need to apply for permission separately to use it)

  
  

##Specific data can be viewed through https://mp.weixin.qq.com after logging in with the mini program administrator account.

The first three methods are automatically collected by small programs and do not require any manual operation by the developer. They are explained in detail in WeChat official documents. I won’t elaborate further

This article mainly combines the "Dianping Ordering" applet to look at the fourth type - what custom analysis can do

Customized analysis

Customized analysis is a hidden point in the traditional sense. Users can set the data they want to report and use these data to analyze you. desired result.

WeChat’s official custom analysis uses the popular no-buried-point technology. The anchor point is configured through the WeChat background and delivered to the client in real time to take effect. There is no need to manually add burying code to the code, and since there is an audit mechanism for mini program releases, if you manually bury a point once, it will need to be reviewed again, which will be very costly. Therefore, the use of no burying technology is very suitable for small program scenarios. .

However, based on testing from the current "Dianping Ordering" applet, the current internal beta version's custom analysis (as of March 2, 2017) compares the requirements for the design and writing of the code itself. Harsh, data collection needs to be associated with the data of the page, which may be difficult to satisfy in some scenarios.

Next let’s look at the steps to implement a custom event:

1. First use the administrator Log in to the backend of the public platform with your account and find the custom analysis (mentioned earlier, you need to apply separately, otherwise you will not see the entrance)

2. If it is used for the first time, the event list is empty. Click Add Event and fill in the Chinese and English name of the event

3. Next is the most critical event configuration

The meanings of the actions are as follows: (reproduced from the official API of the WeChat applet)
trigger, trigger condition:

click triggers when clicked, page and element
enterPage must be specified to enter the page Triggered when, you must specify page
leavePage Triggered when leaving the page, you must specify page
pullDownRefresh Triggered when pull-down refresh, you must specify page
launch Triggered when loading the applet
background Triggered when switching to the background
foreground switches to the foreground to trigger
share triggers when sharing

action The action when the trigger occurs. Data will be collected by default, including system default data and user-defined data (data Defined in)

Empty only collects data;
start initializes and collects data;
report collects data and reports event data
start_and_report initializes and collects data Report later;

# Note: There must be a start operation before each report. It will not be reported without the start operation.
For an action, if start_and_report is set and click trigger condition is specified, the timing sequence is as follows:

##click event -> start -> Collect data- >report

page Triggered pages, such as pages/index/index, pages/list/list, this rule is consistent with the pages field of the mini program app.json, If any page needs to be triggered, fill in ANY_PAGE. element The triggered element supports one-level CSS id and class selectors, that is, it must start with '.' or '#'
data Custom data collected, ranging from 0 to multiple items, each item They are all in the form of "field name and field value"; if not filled in, only system data will be collected.

Field name: the field name in the event

Field value: the data value of this field in the event, fill in the variable name on the page (that is, the page instance data field), you can collect variables on the page; if data collects a certain item of data in the array (such as list[].id), the array is determined based on which NodeList the current trigger element is obtained by class. Subscript.

In addition, you can also fill in some provided system properties, starting with "$". Currently, the following properties are supported:

$PAGE_TIME The time from when the user enters this page to the current time (the time point when the action is triggered)

$APP_TIME The time when the user enters the mini program to the current time (the time point when the action is triggered)
$CURRENT_PAGE Current user The page you are on
$LAST_PAGE Previous page

Note: data can be empty. When it is empty, the event report only collects data from the system default fields

————————————————————————————————————

Pay attention to the explanation about the value of data that I marked in red. This value is the reason why it is difficult to meet the collection needs in certain scenarios in the "Dianping Ordering" applet mentioned earlier.

Let’s continue to complete this event first, and we will come back to talk about this data pit later.

4. After all configurations are completed, you can click Check Fields, then fill in some field descriptions, then click Save and Test, then select a developer and click Next. Now this Developers can use WeChat to enter the mini program, click the dom corresponding to the .add class we just configured in the mini program, and then return to the page where they just clicked Next to see the dotted data (kid and id in the picture below) It is the field configured previously).

##5. OK, here we go The creation of the event so far is complete. "Pit"

Next, go back to the value of the data just mentioned, read this line of text carefully and you will find that A few key points:

• value can only be the data field of the page instance, that is to say, values ​​that are not in page.data cannot be used

• If it is an array, the index index of the dom in the class selector must be equal to the index index corresponding to the array of page.data, otherwise the error will be obtained!
  

An example of the second point:

The add button in our menu page is the .add just configured. Assuming that the list array is in page.data.menuList, then the red box should be page.data.menuList[2 ], the index index is 2
The index obtained through the class selector of $('.add') is index=0 (the first two are sold out , no .add);
When using custom analysis at this time, click the plus sign, and the data reported is actually the data of page.data.menuList[0], not page.data.menuList[2], so the wrong data will be reported
Insufficient:

• Report content and page.data directly Hook, inflexible

• The index of dom must be aligned with the index of the array in the page's data. In some complex cases, it cannot meet the needs (often in actual business, it will be like our menu The same as the page, the condition for the plus sign to appear is that the index cannot be aligned when it is not sold out)

  
  So for the current custom analysis-internal testing stage, the data that can be collected is relatively limited, I hope to wait. After full opening, it will be more flexible for user configuration
  
  

Thoughts on the plan to realize the buried point requirements in the mini program:

Since the mini program does not support cookies, and the company’s statistical system has some data The sending is implemented through cookies. In the future, you can consider manually burying all the data in the code, and then sending it to the company's statistical datebase through ajax. The company's own statistical system will completely collect statistics on the mini program.

The above is the detailed content of Sharing experience on data collection in the development process of Dianping ordering app. For more information, please follow other related articles on the PHP Chinese website!