Solved

When there are multiple Target Texts


Badge +1

Hello! I’m fairly new to heap and having some issue extracting the information that I would like to from our existing application, I’m hoping someone has some suggestions.

 

Edit: It looks like this is not markdown so the code looks pretty bad, apologies for that

 

We have a series of clickable cards, like below:

The entire card is clickable, but some users click on the image (which has hover text) and others click on the name or elsewhere on the card. 

 

The HTML looks something like:

```html

<article class=”h2o-Card-root clickable css-226">

   <section class="h2o-Card-thumbnail css-228">

      <div class="h2o-Card-thumbnailImage css-234" data-src="/v1/asset/..." style="background-image: url("/v1/asset/ai.h2o…..0.2.0/icon.png&quot;);">

         <div class="h2o-Card-thumbnailImageDescriptionDetail css-236">Explore user activity on...</div>

      </div>

   </section>

   <header class="h2o-Card-header css-238">

      <h3 class="h2o-Card-headerTitle css-241" title="Free Trial Reporting">Free Trial Reporting</h3>

   </header>

</article>

```

 

I have the event defined as `Click on .h2o-Card-root` and I am trying to make reports looking at which of these cards has been clicked on. 

 

I tried using the `Target Text` property, but if the user clicks the image in our example the Target Text is `Explore user activity on...` and if they click the header then the Target Text is `Free Trial Reporting`. 

 

Any suggestions on how to make a specific property that is the `title` of the `css-241` class, or other wise how to know when a specific card is clicked? 

 

I have looked into snapshots but I would rather not lose several months of historic data. 

icon

Best answer by jonathan 26 May 2022, 21:32

View original

4 replies

Userlevel 3
Badge +2

Hi mtanco. Really good question! There’s two ways I can think of that you might want to tackle this.

 

1. Does each card go to a separate URL? If so, if you group by href instead of target text you’ll get all your clicks separated into three distinct groups. 

2. Create three separate events, one for each panel, that encapsulates both the text link and the image link. Then add all three events to one chart.

 

Do either of those solutions work for you?

Badge +1

Hi Adam, thanks for the ideas.

 

The href value is None and we have 100+ cards which can be different per customer environment so in this case I guess it’s back to engineering to change how we are tagging the main object. I was just hoping to not lose the historic data. 

 

Thanks!

Userlevel 5
Badge +3

It’s possibly possible to do this by creating a click event on the image, a click event on the title section, and combo them together. But you have 100 of them, which is untenable. But you could look at all image clicks and extract the img[src] from the Hierarchy, if that has useful info about the time. Same for the tile title clicks and group by Target Text...

The scalable way to do it would be with Snapshots but as you called out, it’s not retroactive. That said, it’s probably better than needing to deal with engineering, unless they can structure the css to be much more useful. (The css here is pretty unhelpful so if you are going back to them, it might be worth doing an audit of key gaps elsewhere. Data attributes are your friend if they are using a framework that obfuscates most useful information.)

Something like this probably would solve your problem as a text in element Snapshot:

h3[title]

And if not, then this should do what you want for any click in that article block:

event.target.closest('.h2o-Card-root').find('h3[title]').innerText

 

Userlevel 5
Badge +3

By the way the tool for adding and formatting code blocks can be found under the three-dot menu. 😀

 

Reply