1. The first is the simplest way to report clicks through custom instructions

In the file of their own custom instructions, those who can’t customize instructions, can go to the official website of VUE to have a look. I also learned it before writing this, and I have never been able to do this before.

Create a new cache and put it in the UTlil folder, and write the following code in index.js

export default (Vue) => {
    Vue.directive('stat', {
        bind (el, binding) {
            el.addEventListener('click'.() = > {
                const data = binding.value;
                console.log("data", data)
                let Params = {
                    // Data buried point parameter
                    userName: data.desc
                }
                // This is the reporting interface
                setPoint(Params)
            }, false); }}); }Copy the code

And then in main.js,

import directives from 'utils/directives'
Vue.use(directives)
Copy the code

V – stat usage

 <div class="title" v-stat={" type: 'logo', desc: 'click on the logo'}"> </div>Copy the code

2. Route redirect Records the page duration

This is done using beforeEach

// Get the start time
let startTime = Date.now();
// Define a function to get the user
const get_userinfo = (to, from) = > {
  // Get the current time
  let currentTime = Date.now();
  let Brow_history = {
    preUrl: from.path,
    preTitle: from.meta.title,
    currentUrl: to.path,
    currentTitle: to.meta.title,
    prePage_browTime: parseInt((currentTime - startTime) / 1000) + "s"};console.log(Brow_history);
  console.log(
    "User by".from.path,
    "Page jump to",
    to.path,
    "Page, in".from.path,
    "The page stayed.",
    currentTime - startTime,
    "Ms. Converts to seconds about:".parseInt((currentTime - startTime) / 1000));// Initialize the start time
  startTime = Date.now();
  // Reporting interface
  setPoint(Brow_history)
  console.log("======== splitter ========");
};
router.beforeEach((to, from, next) = > {
  Routing table 404 could not be matched
  if (to.matched.length === 0) {
    next({
      path: '/ 404'})},else {
  // Statistical methods
    get_userinfo(to, from); next(); }})Copy the code

3. Listen on beforeUnload in app.vue for page refresh and page close cases

created() {
    window.addEventListener('beforeunload'.this.test)
  },
  mounted() {},
  methods: {
    test(e) {
      let Params = {
        // Data buried point parameter
        url: e.target.URL,
        remark: parseInt(e.timeStamp / 1000)}console.log(The 'refresh', Params.remark)
        // Reporting interface
      setPoint(Params)
    },
  },
  destroyed() {
    window.removeEventListener('beforeunload'.this.test)
  },
Copy the code

The first time to play front-end buried point, the follow-up in-depth research in the update, a chicken, write the wrong trouble we correct