bp_common_inner
v0.3.9
Published
> 埋点通用方法 [适用于cli创建的vue2、vue3,vite3创建的vue3] (不适用于vite2创建的vue3)
Downloads
7
Readme
适用说明
埋点通用方法 [适用于cli创建的vue2、vue3,vite3创建的vue3] (不适用于vite2创建的vue3)
bp_common_inner
私有库地址: npm私有库
插件使用方法
安装 bp_common_inner
npm install bp_common_inner
# NOTE: or
yarn add bp_common_inner
全局引入
- vue2
import buried from 'bp_common_inner'
Vue.use(buried)
- vue3
import buried from 'bp_common_inner'
app.use(buried)
埋点参数标准
参数统一建议
// FIXME: 建议
- 存储到vuex中的参数:
{
client_version,action_type,user_type
}
- 当前页面变动参数
{
user_id
}
- 需要单独设置的参数
{
action_id,
}
- 封装方法导出的参数
{
connection_id,current_view_id,event_id,arise_time
}
- 扩展参数
{
phone_num,product_name,product_id,source_platform,advertising
}
参数进行assign即可,目前的常量参数没有进行封装,后面可以进行代码级的优化
优化建议
- 常量参数封装
- 方法参数统一
- 指令和全局函数使用
- 埋点添加标识
页面使用
- vue2
// HACK: 埋点节点 根据实际业务进行更改
<input v-track="params"/>
<button @clicl="buried">click埋点节点</button>
export default {
data(){
return {
//HACK: 参数请根据埋点参数标准进行配置 此处请根据实际业务进行参数配置
action_id: 'params_action_id of yourself',
action_type: 'click',
extend:{
sourcePlatform : "",
advertising : ""
}
}
},
methods:{
methods: {
buried() {
this.$track(this.params);
},
}
}
- vue3
// HACK: 埋点节点 根据实际业务进行更改
<input v-track="params"/>
<button @clicl="buried">click埋点节点</button>
import { getCurrentInstance ,reactive} from "vue";
const { appContext } = getCurrentInstance();
const globalProxy = appContext.config.globalProperties;
// HACK: 参数请根据埋点参数标准进行配置
const params = reactive({
action_id: 'params_action_id of yourself',
action_type: 'click',
extend:{
sourcePlatform : "",
advertising : ""
}
})
let buried = () => {
globalProxy.$track(params);
};
环境变量
- vue2
# NOTE: vue2 执行配置
NODE_ENV = 'develpoment'
VUE_APP_RUN_MODE = dev
- vue3
# NOTE: vue3 执行配置
NODE_ENV = 'develpoment'
VITE_RUN_MODE = dev
暴露方法和指令
1、全局挂载指令 v-track="trackData" //主要用于曝光
2、暴露全局方法 $track(this.trackData); //主要用于点击
常见问题解决
问题一: vite3项目出现process is not defined
- 解决方式: 打开vite.config.js
define: {
'process.env': process.env
}
问题二: vue项目中出现VUE_APP_RUN_MODE is not define
- 解决方式:添加对应的env文件 并添加对应的VUE_APP_RUN_MODE配置参数
问题三:vite3创建的项目无法进行环境区分
- 解决方式: 配置package.json
"scripts": {
"dev": "vite serve --mode development",
"prod": "vite serve --mode production",
},
特殊字段:user_type: "user_id", //默认是user_id 如果存在别的officialUserId 的时候 需要将officialUserId 传到extend里面
特殊说明
埋点函数地址为公司内部使用,仅限公司内部项目使用