Solved

Distinguishing events when target text is not avaliable

C
Badge +1

Hi all,

 

I tried having a look through the community feed, but didn’t see exactly this issue. I tried things that looked close and it didn’t solve my problem.

First thing is to say that I am not that technical, so please explain anything to me like you would a child.

There are times where I’m tagging something and it picks up the target text and labels the event properly like the below, no issues:

 

However, I have two situations that I need to find a solution for. Ideally this would be me solving it within Heap without involving the devs, but if that’s what needs to be done, it would be useful to know that too…

  1. If I try to create a target text where it can’t find one, it doesn’t work and each time there’s a click on that link, it will act like it’s something I have not labeled before. For example this, where I’d then go on to add in a target text:
    • To solve this, I tried using F12 and having a look at the HTML and there doesn’t look like there are any differences between the two, which may be the problem. I’m just wondering if there’s a way around this.
       
  2. Similarly, Heap is picking up unique clicks as the same event, so I end-up tagging something two or more times as it doesn’t distinguish between actions. To give you an example, it thinks clicking on any of these icons is the same action/event and won’t make the distiniction. 

     

icon

Best answer by Jonas-Heap 6 June 2023, 22:54

View original

10 replies

Christy H
Rank
Userlevel 4
Badge +3

Hi @Courtney_2811. Would you mind sharing a screenshot of the code itself after you inspect the elements that you show in the last screenshot? This will help us to understand if there is an alternative selector that you can use OR if you may need to ask your developers to alter the code slightly so that Heap will work. 

Alternatively, if those nav clicks are taking users to different pages in your site, you may be able to group by HREF (which is the link that a click is taking a user to) in order to distinguish the clicks.

C
Badge +1

Sure thank you, these two look the same to me…I was trying to find something in here to use with HREF, but couldn’t see anything that distinguished them...

 

 

C
Badge +1

Hi @Christy H did this help clarify anything at all on this? I suspect I’ll have to ask our Devs, but wanted to try myself first. Cheers, Courtney

Jonas-Heap
Rank
Userlevel 3
Badge +2

Hi Courtney, thanks for providing those screenshots! Unfortunately, it doesn’t look like the specific element is selected in each screenshot. If you right-click the element you’re interested in and click “Inspect” in the menu that pops up, your browser should highlight that specific element in the HTML view, which will give us more to go on. 🙂

Regarding your other question, in general adding target text won’t work if Heap isn’t able to detect any target text. However, if you can right-click and then click “Inspect” on that element and provide a screenshot of that HTML as well, we may be able to provide more information on why Heap isn’t detecting that text!

C
Badge +1

Cheers @Jonas-Heap is this what you need?:

 

 

C
Badge +1

@Jonas-Heap ...if so, here is the other one:

 

 

Jonas-Heap
Rank
Userlevel 3
Badge +2

This is definitely a step in the right direction! Though it looks like this is showing the same element in its selected state, and then again in an unselected state. While you have the third navigation item at the top-left selected, like in this screenshot, can you unfurl the highlighted <li> element and the <span> element below that should be revealed? That should let me see the HTML for the selected navigation item and compare it to the HTML for the first navigation item. Thanks!

 

 

C
Badge +1

Thanks @Jonas-Heap I’ve noticed things like this, where the words “Cross Table,” “Chart,” “Dig” are in the below...are these things I can use with HREF? If so, please could you give me an example of what I should enter?

 

 

Jonas-Heap
Rank
Userlevel 3
Badge +2

Thanks for the screenshot—and that’s a great question! Unfortunately, in this case, it looks like using “Cross Table”, “Chart”, “Dig”, etc as target text won’t work. Here’s why:

Whenever an event occurs, Heap captures the hierarchy of the targeted element (e.g., the HTML elements directly above it) up to about 1000 characters. However, Heap doesn’t also capture the siblings of the target element, or the siblings of the elements above it in the hierarchy.

In this case, it looks like the <path> element is what’s actually receiving the click here—i.e., the <path> element is the target element. And the <span> element with the “Cross Table” or “Dig” text isn’t directly above it in the hierarchy; instead, we have to climb the hierarchy from the <path> element to the <svg> element and then to the <span class="analysis-nav-link"> element, and there we find that the <span class="analysis-nav-tooltip"> element that contains “Cross Table” is the sibling of that other <span> element. As a result, Heap won’t be able to capture that target text or use it for event definition.

In this case, my best recommendation would be to work with your organization’s dev team to add unique ids or class combinations to these navigation elements; that will enable Heap to target them more precisely so you can define events for each nav element individually.

C
Badge +1

@Jonas-Heap thank you so much, very helpful.

Reply


Terms & ConditionsCookie settings