How to capture the click of all elements in a dropdown button

Hey there! 

From what you’ve described it seems like the “<span>” tag is not the parent element of the other elements described:

However, within the dropdown button itself there are more elements like icon and text, when the user clicks on those elements it doesn’t trigger the event I defined but a separate event. 

How can I change it such that the clicking of anywhere in the dropdown will record the event I defined?

If you want to define an event for a click anywhere in the dropdown then the best selector will be found by “moving up the DOM,” which just means finding the element on the page that contains the entire dropdown and all of its elements (the span, icon, and text). 

There’s a few ways to find the right selector!

1. If you use the visual labeling tool in Heap to create events, you can click on the elements under the “Edit Definition” section to modify the selector and move up the DOM to find the right element that contains everything you want to define an interaction for. Here’s a basic example of that section:

   1.  

      

       

2. If you know your way around browser DevTools and know how to navigate around the HTML/CSS, you can right-click on the dropdown element and look for the right element associated with the dropdown. Here’s an example screenshot of me doing this with a dropdown on Heap’s site

   • 

      

For that snapshot, that javascript alone won’t return anything because it’s just a query selector, which means it is only finding the header element on the page but not returning the text within the header.

The best snapshot option here is to select the Text in Element snapshot because all you need to provide is the selector and Heap will do the rest to select the text within the associated element. Also, Heap always grabs the text in element that is nearest to what was clicked. So if there are multiple headers Heap ensures the right header text gets selected given which header the user was clicking near. 

Note: you will need to modify your selector’s notation. Instead of “>” to indicate a move down the DOM, just use a single space like this: 

#main-content main div.main-content__inner header section h1