This is the 26th day of my participation in Gwen Challenge

Due to the recent business needs, ready to start to do front-end buried point ~

Buried point introduction

Burial site classification

Buried points are generally divided into the following three types according to the way of data acquisition:

  • Page buried point: statistics of various dimension information of users entering or leaving the page, such as page browsing times (PV), page browsing number (UV), page duration, browser information, etc.

  • Click buried point: counts every click event of users in the application, such as The Times of browsing news, The Times of downloading files, the hit times of recommending products, etc.

  • Exposure buried point: statistics whether specific areas are browsed by users, such as the display of activity drainage entrance, display of advertising, etc.

Because exposure points are not required in business, this article focuses on page points and click points.

Buried point solutions

At present, the existing burial point scheme includes imperative burial point, declarative burial point, visual burial point and traceless burial point

  • Imperative burying point is a relatively common way to use JS method to report data where user behavior occurs. The advantage of burying point is relatively simple, but the disadvantage is high degree of coupling with business

  • Declarative burying point is data binding on specific DOM elements. Component developers only need to formulate burying point scheme on SDK, and business developers only need to set data. The advantage is that burying point code is decoupled from specific interaction and business logic

  • The visualization burying point is to configure the burying point through the visualization tool, which requires another supporting platform to control the burying point. The advantage is that the burying point code is automatically generated and embedded in the page, reducing the burying point burden of business developers. At present, it is well done, such as Mixpanel

  • No buried point means that the front end automatically collects all events and reports buried point data, and the back end filters and calculates useful data. The advantage is that no business is involved at all and it is completely decoupled from business. Currently, GrowingIO is a popular one

Therefore, it is decided that the page interaction burying point is accomplished with Vue custom instruction (declarative burying point) and PV burying point is accomplished with route guard

For the Vue directive, check out my previous article:

Vue custom instruction base learning and simple use ~ instruction combat scroll bar adaptive instruction

Buried point of actual combat

Interactive buried point

utils/index.js

export class Click {
  add(entry) {
    const tp = entry.el.attributes['track-params'].value
    entry.el.addEventListener('click'.function() {
      console.log('Add once, TP:', tp);
      console.log('tpJSON: '.JSON.stringify(tp)); }}})Copy the code

directives/track.js

import { Click } from './utils/index'
const cli = new Click()
export default {
  bind(el, binding) {
    const { arg } = binding
    arg.split('|').forEach(item= > {
      if (item == 'click') {
        cli.add({ el })
      } else if (item == 'exposure') {
        // Expose the buried point}}}})Copy the code

Use:

<button V-track :click :track-params="12455"> </button>Copy the code
PV buried point

utils/track.js

export const trackPage = (id, data = {}, query = {}) = > {
  console.log('id: ',id);
  console.log('data: ',data);
  console.log('query: ',query);
}
Copy the code

config/track.js

export const PVInfoMap = {
  '/share-doc': {
    id: 'share_doc_page.pv'.query: {},
    data: {}}}Copy the code

permission.js

import router from '@/router'
import { trackPage } from '@/utils/track.js'
import { PVInfoMap } from '@/plugins/config/track.js'. router.beforeResolve((to, from, next) = > {
  const { id, query, data } = PVInfoMap[to.path] || {}
  if(id) {
    if(query && Object.keys(query).length) {
      const isMatch = (route) = > {
        if(! route)return false
        return Object.keys(query).every(key= > {
          return query[key] == route.query[key]
        })
      }
      if(isMatch(to) && ! isMatch(from)) {
        trackPage(id,data || {})
      }
    } else {
      if(from.path ! == to.path) { trackPage(id, data || {}) } } } next() })Copy the code

In this way, the route can be reported to the back end once it enters the /share-doc page, and can optionally be reported based on query changes

Buried point Demo completed, have time to write a more detailed buried point scheme ~

Refer to the article

  • Through the custom Vue instruction to achieve the front exposure buried point
  • Vue declarative buried point practice
  • Vue Web embedded point optimization