Vue-trackjs is a declarative automatic burying scheme developed based on VUE custom instructions, only 2.5K after compression, no intrusion on business code. LocalStorage is used to cache statistics. By default, statistics are reported every 60 seconds in polling. It’s easy to get started, and the plugin has a custom extension API that gives you plenty of scope.

preface

Buried point technology is to add statistical logic to normal functional logic for data collection, and then organize various customized data to provide data analysis for corresponding products and realize data visualization.

Common front-end burying technologies include code burying, visual burying and no burying.

Code burying: Manually call the interface to send data on nodes that need burying. Advantages: Controllable sending time, custom attributes, custom events. Disadvantages: time, labor cost.

Visualization buried point: the use of visual interaction means, through the visual interface to configure the control operation and event operation relationship. Advantages: Low cost and fast speed Disadvantages: Less behavior record information and less supported analysis methods

No buried point: The front-end automatically collects all events and reports buried point data. Advantages: No burying point, convenient and quick disadvantages: less behavior record information, large transmission pressure

Vue-trackjs recommended usage

Plug-in installation

// npm
npm i --save vue-trackjs
// yarn
yarn add vue-trackjs
Copy the code

Plug-in to introduce

import TrackDirective from 'vue-trackjs'
import { options } from './track.config.js'

// vue 3
createApp(App).use(TrackDirective, options)
// vue 2
Vue.use(TrackDirective, options)
Copy the code

A new track. Config. Js

import { setTrackBaseInfo, throttle } from 'vue-trackjs'

// Your custom generic buried point information. The generic information for vuE-TrackJS integration is described below
const trackBaseInfo = {
  ip: '127.23.112.3'.version: '1.0.0'.deviceId: 'vue-track'.language: 'us'.network: '3G',}// Store to localStorage
setTrackBaseInfo(trackBaseInfo)

// The following three function suggestions all return Promise
// Get the configuration information for each of your buried points. The standard buried point statistics are supported by the system configuration, fetching the buried point configuration from the interface, for example:
function getTrackConfig() {
  // This function must return the following structure, the eventId and action fields are fixed, other optional
  return {
    // This key corresponds to the ID in the subsequent custom command
    "moduleName_xxx_show": {
      "eventId": "moduleName_xxx_show"."resourceModule": ""."action": "show"
    },
    "moduleName_xxx_click": {
      "eventId": "moduleName_xxx_click"."resourceModule": "12323"."action": "click"}}}// Obtain the id function for uploading buried site information. Obtain the upload permission before uploading a batch of buried site information
export function getUploadId() {
  Vue-trackjs accepts only the following two fields
  return { liftTime, uploadKey }
}

GetUploadId uploadKey(optional)
export function uploadTracks(trackList, baseInfo, uploadKey) {
  return Promise<any>
}

export const options = {
  appId: 'projectName',
  getTrackConfig,
  getUploadId,
  uploadTracks
}
Copy the code

Instruction usage, built-in buried point types have 4 kinds:

// click on the event
<div v-track="{ id: 'moduleName_xxx_click', eventResource: '{xxid: 12}' }">... </div>// scoll_up The scrolling depth of user browsing
<div v-track="{ id: 'moduleName_xxx_scoll_up' }">.</div>

// For the sake of data accuracy, the following two notes cannot be bound to the elements of v-if
// stay Indicates the user stay duration
<div v-track="{ id: 'moduleName_xxx_stay' }">.</div>

// show page load time
<div v-track="{ id: 'moduleName_xxx_show' }" :data-track="getLoadingTime">.</div>

computed: {
    getLoadingTime() {
        // Note that the custom data attribute only accepts strings, so it is recommended that eventResource be a string as well
        return JSON.stringify({ loadingTimeNote: Since vue custom bind.value is not reactive, if your eventResource is reactive, you need to add a data-track as shown above to replace eventResourceCopy the code

Custom buried event

If the integrated burying point type is not enough for you, add customActionFn in Options.

function getTrackConfig() {
  return {
    "moduleName_xxx_mouseenter": {
      "eventId": "moduleName_xxx_mouseenter"."action": "mouseenter"}}},const options = {
  // ...
  getTrackConfig,
  customActionFn: {
    // Key corresponds to the action in the custom event
    // The callback function must be called to trackInfo to succeed
    mouseenter: (trackInfo, callback, el) = > {
      const fn = () = > {
        trackInfo.haha = "guapi"
        callback(trackInfo)
      }
      el.addEventListener('mouseenter', throttle(fn, 300))}}}Copy the code

Manual buried point

When you’re lazy enough not to do too much configuration or the above is not enough for your needs, try manual burying

import { manualBurying } from 'vue-trackjs'

function clickHandler() {
  // manualBurying receives two input burying points and another key of localstorage (optional, default appId)
  const trackInfo = { / /... }
  manualBurying(trackInfo)
}
Copy the code

Finally said the shortcomings of the project, the first is the need to manually statement and configuration, the second is based on the localStorage, is easy to be removed, the final report is due to the 60 s polling problems, the user before the next reporting period close TAB or browser, in the period of buried point cannot be reported, can only wait for open the application again, Options. immediate configuration item is added for this purpose. If the configuration item is set to true, the data of the previous period will be directly uploaded when the user opens the application again.

Attached is the source code address of the project: github.com/hansonGong/…