vue3 集成 mixpanel 打点

1.为什么选择mixpanel?

个人邮箱注册有100w的免费打点事件量，企业邮箱有更多的事件量,因此不想花钱买第三方打点的可以使用.

2.安装依赖

npm i mixpanel-browser @fingerprintjs/fingerprintjs -S

3.mixpanel初始化代码

import mixpanel from 'mixpanel-browser';
import FingerprintJS from '@fingerprintjs/fingerprintjs'

// 判断是否为生产环境
const isProd = import.meta.env.VITE_ENV === 'production';

export const eventQueue = {
  mixpanel: []
}

export const pixelStatus = {
  mixpanel: false,
};

export const initMixpanel = async () => {
  if (!isProd) return false;

  try {
    mixpanel.init('xxxxxxxx', {
      debug: false,
      persistence: 'localStorage',
      track_pageview: true,
    });
    const fpPromise = FingerprintJS.load()
    const fp = await fpPromise
    const result = await fp.get()
    mixpanel.identify(result.visitorId);
    pixelStatus.mixpanel = true;
    if (eventQueue.mixpanel.length > 0) {
      eventQueue.mixpanel.forEach(item => {
        trackEvent(item.eventName, item.eventProps)
      })
      eventQueue.mixpanel = []
    }
    console.log('Mixpanel initialized successfully');
    return true;
  } catch (error) {
    console.error('Mixpanel initialization failed:', error);
    return false;
  }
};

4.触发函数

export const trackEvent = (eventName, eventProps = {}) => {
  if (!isProd) {
    console.log(`[DEV] Event tracked: ${eventName}`, eventProps);
    return;
  }
  // Mixpanel事件追踪
  if (pixelStatus.mixpanel) {
    mixpanel.track(eventName, {
      ...eventProps,
    });
  } else {
    eventQueue.mixpanel.push({
      eventName,
      eventProps
    })
  }
};

要注意一种情况，mixpanel代码还没完全加载，打点事件已经触发，会造成打点丢失，我这里使用了一个数组来存储，mixpanel还没有初始化完成，已经打过来的点，等初始化完成，再一起发出去，避免打点丢失

5.在入口文件引入

import { initMixpanel } from '@/utils/mixpanel.js'
initMixpanel()

6.测试打点 App.vue

<script setup>
import { onMounted } from 'vue'
import { trackEvent } from '@/utils/mixpanel.js'
  
  onMounted(() => {
    const obj = {
      x: 1,
      y:2
    }
    trackEvent('app_init', {
      ...obj
    })
  })
</script>

如果打点成功，在mixpanel后台就可以看到对应的打点信息，注意观察部分网络会无法上报成功。