Solved

Defining events in Heap from React front end

  • 23 August 2022
  • 3 replies
  • 83 views

Userlevel 1
Badge +1

Hi Heap team,

 

we are trying to setup events from React front end, but it seems we can't make them work. 

In our React front end, we have for example "<button type="button" id="dgl_heap_close_wizard" class="css-clvzh3 btn btn-link">Close</button>"

But when we define an event in Heap with Web->Click and enter in the CSS field dgl_heap_close_wizard, the event is not verified :( 

Any idea what we are doing wrong with defining our React event? 

Thank you in advance! 
Peter

icon

Best answer by dlad 26 August 2022, 23:31

View original

3 replies

Userlevel 4
Badge +2

Hi Peter,

Thanks for your detailed inquiry! Without knowing additional context, Heap should definitely autocapture that CSS! Have you tried writing the event as #dgl_heap_close_wizard

using the CSS “ID” notation? I assume that should do the trick. There’s a wealth of information in our Defining Events in the Events Tab documentation -- give it a look if you haven’t already!

Userlevel 1
Badge +1

Hi dlad,

 

thanks a lot! Yes, the “#” prefix did the magic and now the events are captured! 

Yes,I read the documentation thousands of times, but if you check the “React” section in it, it doesn’t state that events should be prefixed with “#”. And neither of the other integrations (iOS, react native, etc.) have also “#”- that would be so worth adding to the documentation :) 

 

Thanks a lot again, very much appreciated! 

Best

Peter

Userlevel 3
Badge +1

Hi Peter, I’m Heap’s head of documentation. I appreciate you sharing this feedback. I’ve filed a docs ticket on my end to have the team update our docs per this feedback.

If you ever have feedback on any of our other docs, feel free to use the thumbs up/thumbs down option available on all of our docs (except the API ones) to send a note directly to our docs team. Alternatively, you are also welcome to contact us at any time via docs@heap.io. Thanks again!

Reply