埋点的核心是将用户行为数据传递给后端进行统计和分析

埋点实现的核心要点

1. 数据收集：收集用户行为、设备信息、时间戳等数据
2. 数据传输：通过HTTP请求将数据发送到后端
3. 数据处理：后端接收、验证和存储数据
4. 数据分析：对收集的数据进行统计和分析

借鉴文档

https://juejin.cn/post/7274084216286183460

var formData = new FormData(event.target); //获取表单数据

前端实现埋点方法

vue2用法

1. 自定义指令

Vue中的directive是用来设计自定义指令的，允许直接在DOM元素上添加特殊行为。bind是自定义指令钩子函数之一，它在指令第一次绑定到元素时调用，通常用于初始化设置。
directive文档：https://cn.vuejs.org/guide/reusability/custom-directives
// 在 main.js 中注册全局自定义指令 track

import Vue from 'vue';

Vue.directive('track', {
  bind(el, binding, vnode) {
    const { event, data } = binding.value;
    
    el.addEventListener(event, () => {
      // 埋点逻辑，例如发送请求或记录日志
      console.log("埋点事件：" + event);
      console.log("埋点数据：" + JSON.stringify(data));
    });
  }
});

//在组件中使用
<template>
  <button v-track="{ event: 'click', data: { buttonName: '按钮A' } }">点击按钮A</button>
</template>

2. 使用混入mixin

// 创建一个名为 trackMixin 的混入对象，并定义需要进行埋点的方法

const trackMixin = {
  methods: {
    trackEvent(event, data) {
      // 埋点逻辑，例如发送请求或记录日志
      console.log("埋点事件：" + event);
      console.log("埋点数据：" + JSON.stringify(data));
    }
  }
};
// 在组件中使用混入
export default {
  mixins: [trackMixin],
  mounted() {
    // 在需要进行埋点的地方调用混入的方法
    this.trackEvent('click', { buttonName: '按钮A' });
  },
  // ...
};

vue3用法

3. 使用自定义指令

// analytics.js

export default {
  mounted(el, binding) {
    const { eventType, eventData } = binding.value;

    // 发送数据请求
    this.$http.post('/track', {
      eventType,
      eventData,
    })
    .then(() => {
      console.log('Data sent successfully.');
    })
    .catch((error) => {
      console.error('Error sending data:', error);
    });
  },
};

// 引入
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

// 设置HTTP库
app.config.globalProperties.$http = axios;

// 注册全局自定义指令
app.directive('analytics', analyticsDirective);

app.mount('#app');


// 在组件中使用
<template>
  <button v-analytics="{ eventType: 'buttonClick', eventData: { buttonId: 'myButton' } }">Click Me</button>
</template>

4. 使用组合式api

// analytics.js

import { ref, onMounted } from 'vue';

export function useAnalytics() {
  const trackEvent = (eventType, eventData) => {
    // 发送数据请求
    // 模拟请求示例，请根据实际情况修改具体逻辑
    console.log(`Sending ${eventType} event with data:`, eventData);
  };

  onMounted(() => {
    // 页面加载事件
    trackEvent('pageView', {
      pageUrl: window.location.href,
    });
  });

  return {
    trackEvent,
  };
}


//引入使用
import { useAnalytics } from './analytics.js';

export default {
  name: 'MyComponent',
  setup() {
    const { trackEvent } = useAnalytics();

    // 按钮点击事件
    const handleClick = () => {
      trackEvent('buttonClick', {
        buttonId: 'myButton',
      });
    };

    return {
      handleClick,
    };
  },
};

//在模板中使用按钮并绑定相应的点击事件
<template>
  <button id="myButton" @click="handleClick">Click Me</button>
</template>

react用法

1. 使用自定义hook

// useAnalytics.js

import { useEffect } from 'react';

export function useAnalytics() {
  const trackEvent = (eventType, eventData) => {
    // 发送数据请求
    // 模拟请求示例，请根据实际情况修改具体逻辑
    console.log(`Sending ${eventType} event with data:`, eventData);
  };

  useEffect(() => {
    // 页面加载事件
    trackEvent('pageView', {
      pageUrl: window.location.href,
    });
  }, []);

  return {
    trackEvent,
  };
}

// 在组件中使用
import { useAnalytics } from './useAnalytics';

function MyComponent() {
  const { trackEvent } = useAnalytics();

  // 按钮点击事件
  const handleClick = () => {
    trackEvent('buttonClick', {
      buttonId: 'myButton',
    });
  };

  return (
    <button id="myButton" onClick={handleClick}>Click Me</button>
  );
}

export default MyComponent;

2. 使用高阶组件

// withAnalytics.js

import React, { useEffect } from 'react';

export function withAnalytics(WrappedComponent) {
  return function WithAnalytics(props) {
    const trackEvent = (eventType, eventData) => {
      // 发送数据请求
      // 模拟请求示例，请根据实际情况修改具体逻辑
      console.log(`Sending ${eventType} event with data:`, eventData);
    };

    useEffect(() => {
      // 页面加载事件
      trackEvent('pageView', {
        pageUrl: window.location.href,
      });
    }, []);

    return <WrappedComponent trackEvent={trackEvent} {...props} />;
  };
}

//引入使用
import React from 'react';
import { withAnalytics } from './withAnalytics';

function MyComponent({ trackEvent }) {
  // 按钮点击事件
  const handleClick = () => {
    trackEvent('buttonClick', {
      buttonId: 'myButton',
    });
  };
// 返回被包装的组件，并传递两个东西：
//  - 刚才定义的 trackEvent 函数（让子组件能主动调用）
//  - 所有传入的 props（避免覆盖原组件的属性）
  return (
    <button id="myButton" onClick={handleClick}>Click Me</button>
  );
}

export default withAnalytics(MyComponent);

在 MyComponent 中使用 { trackEvent } 看似 “未定义”，但实际上：MyComponent 最终会被 withAnalytics 包装后导出，被渲染的是 “包装后的组件”，而不是原始的 MyComponent

自定义组件和高阶组件的区别

1. 本质与形式不同

高阶组件（Higher-Order Component, HOC）和自定义 Hook 都是用于复用组件逻辑的方案，但它们的实现方式、使用场景和特性有显著区别

• 高阶组件（HOC）本质是一个函数，它接收一个组件作为参数，并返回一个新的组件。
• 形式上是 “组件 -> 新组件” 的转换，是基于组件包装的逻辑复用方式。
• 高阶组件：为组件添加"用户信息"属性

function withUser(Component) {
  return function (props) {
    const user = { name: "张三", age: 20 }; // 共享逻辑
    return <Component {...props} user={user} />;
  };
}

• 使用：包装目标组件

const UserProfile = withUser(({ user }) => (
  <div>{user.name}</div>
));

自定义hook本质是一个函数（命名必须以use开头），它可以调用其他 Hook（如useState、useEffect），并返回状态和操作函数（而非组件）。

• 形式上是 “逻辑 -> 状态 / 方法” 的提取，是基于 Hook 的逻辑复用方式。
• 自定义Hook：封装"用户信息"逻辑

function useUser() {
  const [user, setUser] = useState({ name: "张三", age: 20 }); // 共享逻辑
  const updateAge = () => setUser(prev => ({ ...prev, age: prev.age + 1 }));
  return { user, updateAge }; // 返回状态和方法
}

// 使用：在组件中直接调用
function UserProfile() {
  const { user, updateAge } = useUser(); // 复用逻辑
  return <div onClick={updateAge}>{user.name}，{user.age}岁</div>;
}

2. 复用的维度不同

• HOC：复用的是组件级别的逻辑，通常用于增强组件的 props、包装组件（如添加加载状态、权限控制）等。
  它更关注 “组件的包装和扩展”，逻辑复用通过 “组件嵌套” 实现。
• 自定义 Hook：复用的是状态逻辑（如数据获取、表单处理、事件监听等），不涉及组件结构的包装。
  它更关注 “逻辑本身的提取”，逻辑复用通过 “函数调用” 实现，不产生新的组件层级。

3. 使用方式与灵活性不同

• HOC：
  • 需要通过 “包装组件” 的方式使用，可能导致组件层级嵌套过深（“嵌套地狱”），增加调试复杂度。
  • 可能出现 props 命名冲突（如果多个 HOC 传递同名 props）。
  • 无法直接访问组件内部的 Hook（因为 HOC 是外部包装，与组件内部逻辑隔离）。
• 自定义 Hook：
  • 在组件内部直接调用，不产生新的组件层级，避免嵌套问题。
  • 通过返回值显式暴露状态和方法，开发者可自主命名，减少命名冲突。
  • 可以直接访问组件内部的其他 Hook（如在自定义 Hook 中调用useEffect，与组件的生命周期逻辑联动）。