preface

It is difficult for small programs to achieve flexible data collection like Web applications because of their strong closure. At present, open source embedded point SDK generally adopts manual embedded point method, which has strong invasion type and high development cost. In order to solve this problem, this article is created.

Manual buried point

Take Tencent Mobile analysis SDK as an example, if you want to record buried point information, as long as you insert a code

// For example, record the search behavior search(keyword) {if(keyword) { ... } // Mta.event.stat ("ico_search", {"query":keyword});
}
Copy the code

The sample code looks concise, but the data collected by the buried point is often not single. The complex buried point code is inserted into the business code, which will affect the reading experience of the code. Moreover, the buried point code is scattered in various places, which is not convenient to manage.

Because manual burying points have to be inserted into a function, sometimes we click to get information about an element on the page, creating what is called a non-business relevant burying point. Simply put, your function definition has only burying point code. When this burying point occurs frequently, the code will become heavily polluted.

// wxml
<view bindtap="track"> This is just a display of view</view> //jstrack() {
  mta.Event.stat("eleClick", {"name":xxxxx});
}
Copy the code

In addition, because PM will frequently adjust the information of buried point, and burying point is a tedious and boring work, based on the principle of Don’t Repeat Yourself, manual burying tape should not be.

To sum up the above, manual burying point has the following problems

  1. Affect the code reading experience
  2. Buried codes are scattered all over the place and are not easy to manage
  3. The code gets contaminated
  4. Burying point is a tedious and boring work

Automatic submerged point

1. Use event bubbles to listen for elements to be clicked

The widget does not provide a Dom event listening method, but we can use the event bubbling mode to listen, bind the catchtap event in the outermost layer of WXML to get the click element’s coordinates, and determine whether the click element intersects the listening target’s coordinates to trigger the record.

Method to determine whether the click position intersects with the element:

The following is the implementation code

<view catchtap= elementTracker <view catchtap='elementTracker'>
  <view class='buy-now'>
     <button bindtap='buy'</button> </view> </view> // js elementTracker(clickInfo) {// Need to record element className const trackElementName ='.more'; // With the element coordinate information and the click coordinate information, Determine whether the clicked this. GetBoundingClientRect (trackElementName). Then ((res) = > {res. BoundingClientRect. ForEach ((item) = > {const isHit = this.isClickTrackArea(clickInfo, item, res.scrollOffset); console.log(isHit,'isHit')}); }); }, @param {Object} boundingClientRect specifies the target element information * @param {Object}. */ isClickTrackArea(clickInfo, boundingClientRect, scrollOffset) {if(! boundingClientRect)return false; const { x, y } = clickInfo.detail; Const {left, right, top, height} = boundingClientRect; const { scrollTop } = scrollOffset;if (left < x && x < right && scrollTop + top < y && y < scrollTop + top + height) {
    return true;
  }
  return false; @param {String} element class or id * @returns {Promise} */ getBoundingClientRect (element) {return new Promise((reslove) => {
    const query = wx.createSelectorQuery();
    query.selectAll(element).boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec(res => reslove({ boundingClientRect: res[0], scrollOffset: res[1] }));
  });
}
Copy the code

2. Extend the Page method

Since the elementTracker method needs to be defined in the Page for WXML invocation, it would be too tedious to write each Page manually. You can do this automatically by rewriting the Page, as shown below

// originPage method const originPage = Page; // Override the Page method Page = (Page) => {// inject three methods into the Page object page.elementTracker =function() {}
  page.methodTracker = function() {}
  page.isClickTrackArea = function() {}
  return originPage(page);
};
Copy the code

3. Bury the page function

In some scenarios, we not only click the burying point on the page elements, but also buried the page function. For example, when the user pulls down the refresh, we can wrap the original method and insert the burying code. The scheme is similar to the third point.

const originPage = Page; // Page = (Page) => {const originMethod = Page ['onShow'];
  page['onShow'] = function() {report() // Record burying pointreturn originMethod();
  }
  return originPage(page);
};
Copy the code

4. Set the burying point using the configuration table

The above introduced the page elements and functions of the buried way, the following talk about how to manage the buried information to solve the problem of code intrusion, you can put the buried information in the configuration table declaration, but also can do dynamic configuration, after the server configuration is completed to the client.

const tracks = {
  path: 'pages/film/detail',
  elementTracks: [
    {
      element: '.buy-now'DataKeys: ['film.filmId'}, methodTracks: [{method:'toBannerDetail'DataKeys: ['imgUrls'},],]};Copy the code

The last

The complete code has been packaged into an SDK that can be quickly integrated into the project’s Github address