使用 React 的 onClick 事件来集成分析

Question

我们想要跟踪 React 应用程序中的用户导航 - 单击按钮、表单填写、页面导航。

我们不想要的 - 使用自定义分析代码污染每个

onClick

等处理程序。

React 是否提供了用于观察 React 组件中的点击/文本输入和路线导航的 API？

PS 我们希望向组件添加自定义属性来跟踪分析数据，观察者 API 应该为我们提供指向组件的反向链接，以便我们能够提取元数据。

我们希望以声明式方式引入分析，而不是使用自定义 JS 逻辑污染代码。

Answer 1

这里的想法是在您的应用程序中设置一个全局事件监听器，监听您想要分析的每个元素的analyticsId。

import React, { useEffect } from 'react';

const App = () => {

  useEffect(() => {
    const clickHandler = (event) => {
      // Check if the clicked element or its parent has a data-analytics-id attribute
      const analyticsId = event.target.getAttribute('data-analytics-id') 
                         || event.target.parentElement?.getAttribute('data-analytics-id');

      if (analyticsId) {
        // Handle your analytics logic here
        console.log(`Analytics ID: ${analyticsId}`);
      }
    };

    // Add the event listener to the document
    document.addEventListener('click', clickHandler);

    // Clean up the event listener
    return () => {
      document.removeEventListener('click', clickHandler);
    };
  }, []);

  return (
    <div>
      <button data-analytics-id="btn1">Button 1</button>
      <button data-analytics-id="btn2">Button 2</button>
      <input data-analytics-id="input1" placeholder="Input field" />
      {/* More components */}
    </div>
  );
};

export default App;