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;// IEif (agent.indexOf("msie") > 0) {return agent.match(regStrIe);}// firefoxif (agent.indexOf("firefox") > 0) {return agent.match(regStrFf);}// Chromeif (agent.indexOf("chrome") > 0) {return agent.match(regStrChrome);}// Safariif (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;// IEif (agent.indexOf("msie") > 0) {return agent.match(regStrIe);}// firefoxif (agent.indexOf("firefox") > 0) {return agent.match(regStrFf);}// Chromeif (agent.indexOf("chrome") > 0) {return agent.match(regStrChrome);}// Safariif (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.这样就可以根据某些特定条件写成动态的了