前端埋点（tracking）实现多种方式
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.这样就可以根据某些特定条件写成动态的了