preface

The reading platform project of the company increased the requirement of statistical analysis of user behavior, so it began to design the scheme. At the first moment, it came to the idea of vuEX to record user behavior, so that the behavior can be quickly recorded globally, reported uniformly, and the code is convenient to maintain.

The body of the

Vuex is introduced into main.js. Store /index.js is as follows

// store/index.js
state: {
    actions: [] // { PageCode: '', ToPageCode: '', ActionType: 'CLICK', ActionValue: '', TimeStamp: parseInt(new Date().getTime() / 1000), param: {} }
},
mutations: {
    ADD_ACTIONS(state, action) {
      state.actions.push(action)
    },
    CLEAR_ACTIONS(state) {
      state.actions = []
    }
},
actions: {
    // Extensive behavior record
    RecordAction({ commit, state }, param) {
      const actionModule = {
        PageCode: ' '.ToPageCode: ' '.ActionType: 'CLICK'.ActionValue: ' '.TimeStamp: parseInt(new Date().getTime() / 1000),
        param: {}}constaction = { ... actionModule, ... param } commit('ADD_ACTIONS', action)
    },
    // Empty the behavior array
    ClearActions({ commit }) {
      commit('CLEAR_ACTIONS')}},Copy the code

Each page reports user behaviors through Dispatch

this.$store.dispatch('RecordAction', {PageCode: 'BOOK_STORE_PAGE'.ToPageCode: 'READ_PAGE'.ActionValue: 'CLICK_BOOK'.param: { bookId: '415648915' }})
Copy the code

After the user’s behavior has been recorded in the front end, what is the next solution? After each behavior record submitted to the back-end user is reported to the back end immediately, there are too many requests, especially frequent operations at some points, so when the behavior array accumulates to 5, the user behavior is automatically reported. However, some records may be lost because users suddenly close the page (the project is applied to wechat browser), so it is added and supplemented to check the behavior array every three seconds, report the user behavior and empty the behavior array, and do not process the behavior array, so as to greatly reduce the loss of user behavior. Change the actions in store/index.js as follows

// Extensive behavior record
    RecordAction({ commit, state }, param) {
      const actionModule = {
        PageCode: ' '.ToPageCode: ' '.ActionType: 'CLICK'.ActionValue: ' '.TimeStamp: parseInt(new Date().getTime() / 1000),
        param: {}}constaction = { ... actionModule, ... param } commit('ADD_ACTIONS', action)
      // Check the behavior array length. If the length is greater than or equal to 5, the behavior is reported
      if (state.actions.length >= 5) {
        const report = {
          publicId: state.userInfo.publicId,
          list: state.actions
        }
        // Commit the behavior array
        statistics(report)
        commit('CLEAR_ACTIONS')}},Copy the code

Add the following code to app.vue

import { mapActions } from 'vuex'
created() {
    setInterval(this.reportAction, 3000)},methods: {
    ...mapActions({
      reportAction: 'AutoReportActions'})}Copy the code

This is not a perfect solution, welcome to see a better solution to share.