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

Question

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

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

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

Answer 1

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

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

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