javascript - 将 GA 事件添加到可重用的 React 组件中

标签 javascript google-analytics reactjs

使用可重用组件构建 React 网页。现在问题出现在添加 GA 事件上,因为 GA 事件主要是页面特定事件,而 React 组件是可重用的。对此应用 GA 事件的最佳方式是什么?

例如:假设 Card 组件非常可重用,并且我已在我的主页中使用了它。 GA 事件将类似于 ('Home Page','Card Click','Card No')。但是,如果我在其他地方重用 Card 组件(例如 User Page),则会调用主页的 GA 事件,这是错误的。相反,应该调用用户页面事件。我该如何解决这个问题?

我能想到的一种方法是在页面特定的JS中单独添加点击事件监听器并调用事件。但这会导致多个点击处理程序(假设卡也有点击事件)。对此有更好的建议吗?

最佳答案

为什么不通过 props 传递上下文,然后您的点击处理程序可能如下所示:

handleClick() {
  ga('send', 'event', this.props.pageContext, 'Card Click', 'Card No');
}

这通常是 React 中处理上下文的方式。

关于javascript - 将 GA 事件添加到可重用的 React 组件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34978820/

相关文章:

javascript - 单击按钮后停止动画

javascript - Vue,如何在 JSX 渲染的 Prop 中传递函数?

c# - 桌面应用程序的谷歌分析

reactjs - <Provider/> 外部还是 <Router/> 外部>?

reactjs - 即使我们只需要渲染一个组件,所有组件都会被渲染,在react-redux中

javascript - 如何使用jQuery选择叶节点 :contains selector?

javascript - 如何在客户端实时验证带有选择、单选、复选框、文本、文件输入的表单,只需使用 javascript?

javascript - Highcharts:使用 Google Analytics 捕获事件操作以导出图表

ruby - 使用 watir 将来自 google Analytics 的测试请求列入黑名单

javascript - require(imagePath) 上的 webpack 编译错误