前言

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

埋点介绍

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

• 手动埋点：通过Vue自定义指令或者React HOC，自定义Hook实现，获取用户点击或者hover，目标区域的信息
• 可视化埋点：利用Intersection，在元素出现在页面时促发买点上报
• 无痕埋点：利用路由拦截，记录页面的停留时间

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

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 Me</div>
</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 Text</ReportedButton>
    </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 me</h1>
    </div>
  );
};

export default App;

END

• 附上CodePan的链接，有兴趣的同学可以在上面调试一下React实现埋点
• 希望这篇文章可以帮助到有需要的小伙伴们，有问题可以评论或私信我呀🤞🤞