我们想要跟踪 React 应用程序中的用户导航 - 单击按钮、表单填写、页面导航。
我们不想要的 - 使用自定义分析代码污染每个
onClick
等处理程序。
React 是否提供了用于观察 React 组件中的点击/文本输入和路线导航的 API?
PS 我们希望向组件添加自定义属性来跟踪分析数据,观察者 API 应该为我们提供指向组件的反向链接,以便我们能够提取元数据。
我们希望以声明式方式引入分析,而不是使用自定义 JS 逻辑污染代码。
这里的想法是在您的应用程序中设置一个全局事件监听器,监听您想要分析的每个元素的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;