前端埋点（tracking）实现多种方式

qq_42753983

已于 2024-10-21 11:52:20 修改

阅读量516

点赞数 3

文章标签：前端 javascript vue.js elementui

于 2024-10-21 11:35:04 首次发布

本文链接：https://blog.csdn.net/qq_42753983/article/details/143107678

版权

1.前端埋点是用来跟踪用户行为、事件或页面加载情况的一种技术。

2.第一种方式静态的tracking.js

2-1 src=》directives=》tracking.js

// 这个是埋点接口 引入对应的路径即可
import { tracking as trackingApi } from "@/api/tracking";  
import { version } from "../../../package.json";
import store from "@/store";

function tracking(el, bind, vnode) {
  const { value } = bind;
  const { matched, fullPath, meta, params } = vnode.context.$route;
  const names = {
    sysName: "",
    sysTitle: "",
    modName: "",
    modTitle: "",
    pageName: "",
    pageTitle: "",
    actionTitle: "",
  };

  el.addEventListener("click", async () => {
    // const attrName = 'data-title';
    // console.log(el.innerText, el.getAttribute(attrName), el, 333333333)
    let permissionRoutes = store.state.globalState.globalState.permissionRoutes;
    let permissionOperations = store.state.globalState.globalState.permissionOperations;
    let sysGather = [];
    let menuGather = [];
    let authorityGather = [];
    let pageTime = sessionStorage.getItem("pageTime");
    permissionRoutes.forEach((sys) => {
      sysGather.push(sys);
      if (sys.children.length && sys.children.length > 0) {
        sys.children.forEach((menu) => {
          menuGather.push(menu);
          if (menu.children && menu.children.length > 0) {
            menu.children.forEach((auth) => {
              authorityGather.push(auth);
            });
          }
        });
      }
    });
    console.log(sysGather, menuGather, authorityGather, permissionOperations);
    console.log(meta);
    let modTitle = menuGather.find((e) => {
      return e.authorityExplain === meta.modName;
    });
    let actionTitle = permissionOperations.find((e) => {
      return e.authorityExplain === value;
    });
    let pageRef = sessionStorage.getItem("pageRef");
    names.modTitle = modTitle ? modTitle.menuName : "";
    names.actionTitle = actionTitle ? actionTitle.authorityName : "";
    pageTime = Number(new Date().getTime()) - pageTime;

    console.log("---------------");
    console.log(modTitle);
    console.log(menuGather);
    console.log(meta);
    console.log("---------------");

    // const initTime = date()
    // const nameKeys = Object.keys(names);
    // matched.forEach((route, index) => {
    //   const name = nameKeys[index];
    //   names[name] = route.name || '';
    // });
    names.modName = meta.modName || "";
    const clientWidth = document.body.clientWidth;
    const clientHeight = document.body.clientHeight;
    const browser = getBrowserInfo().toString().split("/")[0];
    const browserVersion = getBrowserInfo().toString().split("/")[1];
    try {
      const data = {
        appVersion: version,
        platform: "website",
        appOs: "js",
        resolution: `${clientWidth} * ${clientHeight}`,
        browVersion: `${browser} ${browserVersion}`,
        pageUrl: fullPath,
        pageRef: pageRef || "",
        sysName: "DiscernmentSystem",
        sysTitle: "业务洞察",
        modName: names.modName || "",
        modTitle: names.modTitle,
        pageName: meta.pageName || "",
        pageTitle: meta.title || "",
        actionName: value || "",
        actionTitle: value.actionTitle,
        pageTime: pageTime || "",
        actionType: "button",
        source: process.env.VUE_APP_ENV,
        accountId: params.caseId ? params.caseId : "",
      };
      // const result = await trackingApi(data);
      console.log("dsdsdsdd");
      // if (!result.success) {
      // }
    } catch (error) {
      console.log(error);
    }
  });
}

// 获取浏览器信息
function getBrowserInfo() {
  const agent = navigator.userAgent.toLowerCase();
  const regStrIe = /msie [\d.]+;/gi;
  const regStrFf = /firefox\/[\d.]+/gi;
  const regStrChrome = /chrome\/[\d.]+/gi;
  const regStrSaf = /safari\/[\d.]+/gi;
  // IE
  if (agent.indexOf("msie") > 0) {
    return agent.match(regStrIe);
  }
  // firefox
  if (agent.indexOf("firefox") > 0) {
    return agent.match(regStrFf);
  }
  // Chrome
  if (agent.indexOf("chrome") > 0) {
    return agent.match(regStrChrome);
  }
  // Safari
  if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
    return agent.match(regStrSaf);
  }
}

export default {
  inserted(el, bind, vnode) {
    tracking(el, bind, vnode);
  },
};

2-2 src==>main.js

import tracking from "@/directives/tracking";
Vue.use(tracking);

2-3 具体使用

 <el-button v-tracking="'insight-manageBoard'">管控板</el-button>
 注意事项：
 1.v-tracking格式：双引号里面是单引号 "''"
 2.actionName为v-tracking的值 这个可以根据实际去命名
   actionTitle为当前元素的el 比如这个就是管控版
 3.如果actionTitle不是写死的 是根据某些条件去更改的 那么就需要为动态 
   这就是接下来说的动态的tracking.js

3.第二种方式动态的tracking.js

3-1 src=》directives=》tracking.js

import { tracking as trackingApi } from "@/api/tracking";
import { version } from "../../../package.json";
import store from "@/store";
function tracking(el, bind, vnode) {
  const { value } = bind;
  const { matched, fullPath, meta, params } = vnode.context.$route;
  const names = {
    sysName: "",
    sysTitle: "",
    modName: "",
    modTitle: "",
    pageName: "",
    pageTitle: "",
    actionTitle: "",
  };

  el.addEventListener("click", async () => {
    // const attrName = 'data-title';
    // console.log(el.innerText, el.getAttribute(attrName), el, 333333333)
    let permissionRoutes = store.state.globalState.globalState.permissionRoutes;
    let permissionOperations = store.state.globalState.globalState.permissionOperations;
    let sysGather = [];
    let menuGather = [];
    let authorityGather = [];
    let pageTime = sessionStorage.getItem("pageTime");
    permissionRoutes.forEach((sys) => {
      sysGather.push(sys);
      if (sys.children.length && sys.children.length > 0) {
        sys.children.forEach((menu) => {
          menuGather.push(menu);
          if (menu.children && menu.children.length > 0) {
            menu.children.forEach((auth) => {
              authorityGather.push(auth);
            });
          }
        });
      }
    });
    console.log(sysGather, menuGather, authorityGather, permissionOperations);
    console.log(meta);
    let modTitle = menuGather.find((e) => {
      return e.authorityExplain === meta.modName;
    });
    let actionTitle = permissionOperations.find((e) => {
      return e.authorityExplain === value;
    });
    let pageRef = sessionStorage.getItem("pageRef");
    names.modTitle = modTitle ? modTitle.menuName : "";
    names.actionTitle = actionTitle ? actionTitle.authorityName : "";
    pageTime = Number(new Date().getTime()) - pageTime;

    console.log("---------------");
    console.log(modTitle);
    console.log(menuGather);
    console.log(meta);
    console.log("---------------");

    // const initTime = date()
    // const nameKeys = Object.keys(names);
    // matched.forEach((route, index) => {
    //   const name = nameKeys[index];
    //   names[name] = route.name || '';
    // });
    names.modName = meta.modName || "";
    const clientWidth = document.body.clientWidth;
    const clientHeight = document.body.clientHeight;
    const browser = getBrowserInfo().toString().split("/")[0];
    const browserVersion = getBrowserInfo().toString().split("/")[1];
    try {
      const data = {
        appVersion: version,
        platform: "website",
        appOs: "js",
        resolution: `${clientWidth} * ${clientHeight}`,
        browVersion: `${browser} ${browserVersion}`,
        pageUrl: fullPath,
        pageRef: pageRef || "",
        sysName: "DiscernmentSystem",
        sysTitle: "业务洞察",
        modName: names.modName || "",
        modTitle: names.modTitle,
        pageName: meta.pageName || "",
        pageTitle: meta.title || "",
        actionName: value.actionName,
        actionTitle: value.actionTitle,
        pageTime: pageTime || "",
        actionType: "button",
        source: process.env.VUE_APP_ENV,
        accountId: params.caseId ? params.caseId : "",
      };
      // const result = await trackingApi(data);
      console.log("dsdsdsdd");
      // if (!result.success) {
      // }
    } catch (error) {
      console.log(error);
    }
  });
}

// 获取浏览器信息
function getBrowserInfo() {
  const agent = navigator.userAgent.toLowerCase();
  const regStrIe = /msie [\d.]+;/gi;
  const regStrFf = /firefox\/[\d.]+/gi;
  const regStrChrome = /chrome\/[\d.]+/gi;
  const regStrSaf = /safari\/[\d.]+/gi;
  // IE
  if (agent.indexOf("msie") > 0) {
    return agent.match(regStrIe);
  }
  // firefox
  if (agent.indexOf("firefox") > 0) {
    return agent.match(regStrFf);
  }
  // Chrome
  if (agent.indexOf("chrome") > 0) {
    return agent.match(regStrChrome);
  }
  // Safari
  if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
    return agent.match(regStrSaf);
  }
}

export default {
  inserted(el, bind, vnode) {
    tracking(el, bind, vnode);
  },
};

3-2 src=>main.js

import tracking from "@/directives/tracking";
Vue.use(tracking);

3-3 具体使用

 <el-button label="teamCompetitiveness" v-tracking="teamTrackingData">团队竞争力</el-button>
 1.data中定义
   teamTrackingData:{
     actionName: "teamCompetitiveness",
     actionTitle: "团队竞争力",
   }   
 2.这样就可以根据某些特定条件写成动态的了