Vue3 前端埋点自定义指令封装

在我们日常开发过程中经常会有前端埋点接入的需求，在使用 Vue 开发时，我们通常会通过自定义指令的方式进行埋点日志上报，下面是我做的一个简单的自定义指令，希望能给大家提供一个参考。

埋点SDK安装

我使用的是神策埋点平台提供的JS SDK，首先在项目中安装 sdk 依赖：

node 复制代码

pnpm add sa-sdk-javascript

埋点接入参数配置

在项目 utils 或其他目录新建 sensor.ts 文件，创建一个埋点实例：

ts 复制代码

import sensors from 'sa-sdk-javascript';

const isProd = import.meta.env.VITE_USER_NODE_ENV === 'production';
//初始化埋点配置
sensors.init({
    server_url: `${import.meta.env.VITE_APP_SENSORS_URL}/sa.gif?token=${import.meta.env.VITE_APP_SENSORS_TOKEN}&project=${
        import.meta.env.VITE_APP_SENSORS_PROJECT
    }`,
    show_log: !isProd,
    is_track_single_page: false, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配 置删除，否则触发锚点会多触发 $pageview 事件
    use_client_time: true,
    send_type: 'beacon',
    heatmap: {
        clickmap: 'not_collect', //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭
        scroll_notice_map: 'default' //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启
    }
});
//设置公共属性
sensors.registerPage({
    platform_type: 'H5',
    current_url: location.href,
    referrer: document.referrer,
    source: 1,
    brand: 1,
    channel: import.meta.env.VITE_APP_SENSORS_CHANNEL
});

//全埋点
sensors.quick('autoTrack');

export default sensors;

需要注意的是，配置中包含几项动态参数（埋点上报域名地址、token、埋点工程名称、埋点通道），用于区分不同环境，通常我们是配置在环境变量当中，公共属性配置需要根据服务端要求填写。

自定义埋点指令

在项目根目录新建 directive 目录，添加 index.ts 注册自定义指令：

ts 复制代码

//directive/index.ts
import { App } from 'vue';
import track from './track';

export default {
  install(Vue: App) {
    Vue.directive('track', track);
  }
};

添加 track.ts 文件定义埋点指令：

ts 复制代码

//directive/track.ts
import { useGlobalStore } from '@pinia';
import sensors from '@utils/sensors';

export default {
    mounted(el, binding) {
        const store = useGlobalStore();
        const { userInfo }: any = storeToRefs(store);
        // 埋点
        el.addEventListener('click', () => {
            //获取登录用户信息
            const { userid, userName } = userInfo.value;
            const bindData = binding.value;
            //上报数据需根据实践业务需求填写
            const track_data = {
                onClick: `event_click_${bindData.module}_${bindData.event}`,
                data: { userid, userName, ...bindData }
            };
            sensors.track('event_click', track_data);
        });
    }
};

全局挂载埋点指令

在项目入口 main.ts 挂载自定义指令：

ts 复制代码

//main.ts
import { createApp } from 'vue';
import App from './App.vue';
import pinia from './pinia';
import router from '@/router';
import directive from './directive';

// 创建vue实例
const app = createApp(App);
//挂载埋点指令
app.use(directive);
// 挂载pinia
app.use(pinia);
// 挂载路由
app.use(router);
// 挂载实例
app.mount('#app');

在组件内使用v-track埋点指令:

vue 复制代码

<template>
    <div class="tabs">
        <div
            v-for="(item, index) in tabs"
            :key="item.label"
            :class="['tab', item.name === active.name && 'active']"
            v-track="{ module: 'shiftTarget', event: `tab-click-${item.name}` }"
            @click="handleDutyChange(item, index)"
        >
            {{ item.label }}
        </div>
    </div>
</template>

<script setup lang="ts">
    import { Tab } from './config';

    const props = defineProps({
        tabs: {
            type: Array<Tab>,
            default: []
        }
    });

    const emits = defineEmits(['change']);

    const active = ref<Tab>(props.tabs[0]);

    const handleDutyChange = (tab: Tab, index: number) => {
        active.value = tab;
        emits('change', tab);
    };
</script>