前端埋点的简单实现（Vue/React）

摘要： 前言目前正在开发公司的官网项目，需要统计用户对哪个模块比较感兴趣，所以就需要做前端埋点埋点介绍对于我来说埋点一点要注意的一点 埋点逻辑需要和业务逻辑分离...

前言

目前正在开发公司的官网项目，需要统计用户对哪个模块比较感兴趣，所以就需要做前端埋点

埋点介绍

对于我来说埋点一点要注意的一点 埋点逻辑需要和业务逻辑分离，通常埋点可以总结成下面三种：

我这里只要在用户点击导航栏时数据上报，所以的话采用上面的手动埋点的方式

Vue 自定义指令实现

// 定义自定义指令
Vue.directive("click-report", {
  bind(el, binding) {
    el.addEventListener("click", () => {
    
    // 上报数据。。。
    
      console.log(el.innerHTML, binding.value);
      // 打印出 Click Me,'Hello World'
    });
  }
});
// 使用自定义指令
<template>
  <div v-click-report="'Hello World'">Click Mediv>
template>

React HOC

React 高阶组件 (HOC) 可以扩展现有组件的功能。

import React, { useState } from 'react';
// 创建高阶组件
const withOutputOnClick = (message) => (Component) => {
  return (props) => {
    // 定义响应点击事件的方法
    const handleClick = () => {
    
    // 数据上报。。。
    
      console.log(`${props.children} ${message}`);
      // 打印出  'Button Text’，'was clicked'
    };
    return <Component {...props} onClick={handleClick} />;
  };
};
// 使用高阶组件
const EnhancedButton = withOutputOnClick('was clicked')('button');
function App() {
  return (
    <div>
      <ReportedButton>Button TextReportedButton>
    div>
  );
}
export default App;

React 自定义Hook

原理都一样，需要和业务逻辑分离

import React, { useState, useEffect } from 'react';
const useClickOutput = (param) => {
  const [innerHtml, setInnerHtml] = useState('');
  const handleClick = (event) => {
  
  // 数据上报。。。
  
    console.log(event.target.innerHTML , param)
    // 打印出  Click me ，- clicked
  };
  return [innerHtml, handleClick];
};
const App = () => {
  const [innerHtml, handleClick] = useClickOutput(' - clicked');
  return (
    <div>
      <h1 onClick={handleClick}>Click meh1>
    div>
  );
};
export default App;

END