javascript - Adding GA Events to reusable React components -

build react web page reusable components. problem arrives in adding ga events because ga events page specific events , react components reusable. best way apply ga event on this?

eg: suppose card component quite reusable , have used in home page. ga event ('home page','card click','card no'). if reuse card component somewhere else lets user page, ga event of home page call instead wrong. instead user page event should called instead. how can solve this?

one way can think of add click event listeners separately in page specific js , call events. lead multiple click handlers (assuming card has click event). better suggestion on this?

why not pass context in via props , click handler this:

handleclick() {   ga('send', 'event', this.props.pagecontext, 'card click', 'card no'); } 

that's typically how context handled in react.