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

Question

Build a react web page with reusable components. Now the problem arrives in adding GA events because GA events are mostly page specific events and react components are reusable. What will be the best way to apply GA event on this?

Eg: Suppose Card component is quite reusable and I have used it in my Home Page . GA event will be like ('Home Page','Card Click','Card No') . But if I reuse Card component somewhere else lets say User Page , GA event of Home Page will be call instead which is wrong. Instead User Page event should be called instead. How can I solve this?

One way I can think of is to add click event listeners separately in page specific JS and call the events. But that would lead to multiple click handlers (Assuming card also has click event). Any better suggestion on this?

Answer 1

Why not pass the context in via props and then your click handler could look something like this:

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

That's typically how context is handled in React.