Solved

Report for more events than 12


Userlevel 2

Hi all. I have an index page where I want to track the number of clicks for all the links, and there’s 20+ of them.

 

Currently, the Heap reporting feature enables me to add up to 12 events within one report, which means I can’t get one list with all links and I can’t easily understand which links are the most popular. The only workaround I see is to divide links into groups and have separate reports in one dashboard, but you can imagine it’s not perfect to compare data in this way.

 

Does anyone have a better solution?

icon

Best answer by jonathan 7 May 2022, 03:46

View original

7 replies

Userlevel 1
Badge

Hi @werku

A useful workaround here is to simply define a click on any of the links you’re referring to, then in reporting, group by the Target Text of that click event.  Heap auto-captures the Target Text of elements, which is super useful for questions like this. As long as you have solid Target Text in your site code, a report similar the below screenshot will give you a breakdown of your most popular links. 

Please let me know if you have any additional questions!

Sean

Userlevel 3
Badge +2

Just to add to Sean’s solution - I think this is basically the best way to do it, but we’ve had better consistency by grouping on the Href as opposed to the target text. Target text can change depending on the users’ local language settings so for example if your have both English and Spanish users on your website, some of your target text will appear in English and some in Spanish even though they’re the same link.

Userlevel 1
Badge

@adam, excellent solution for this considering the team is analyzing links.  Thanks for sharing!

Userlevel 2

Thanks, everyone. I’m a very new user to Heap and product analytics in general, so my next question might be very basic. I’ve been using the Event Visualizer to define individual events on links, so I have a list of “Click - [name of the link]” events defined. I don’t have quick access to the page’s code to make any changes.

 

What I am wondering is how you go about having “clicked any link” or “didn’t click any link” events. Do I need to use EV to tag all links at once and create a separate “any” event for all of them?

 

Also, did you have to manually define modifiers for the the target text and href? Not seeing them by default in my account.

Userlevel 3
Badge +2

Hi Werku. Don’t worry, it’s a very good question. I won’t be able to explain exactly how to do it because it depends on how your site is built, but you need to define an event that captures not just one link but all of them. This is possilbe by playing around in Event Visualiser but I prefer to use a Chrome plug-in called InspectorGadget. You can use this to generate a CSS selector that includes all of your links.

 

As for how to group by target text or href, as far as I know this should be available to you. The report set up would look something like this: 

 

 

 

For “did click on a link” or “didn’t click on a link”, you’d probably be better off either defining a segment or grouping by user actions. So for example, you can create a report that counts sessions, and group it by whether or not a user has clicked on any link. It would look similar to this:

 

 

Userlevel 5
Badge +3

Hey @werku — Understanding you are new to Heap, the Visualizer is a great tool to get started. I want to first show you how to broaden/narrow the event definition in the Visualizer, but I’ll also offer that there’s a lot of upside to taking a bit of time to learn some basics of CSS Selectors and how to define events manually. The more you know, the easier this gets, and the more confident you’ll be. 

First, let’s take a look at a similar example to yours using the footer on heap.io. I want to define an event on all these links, but when I click on the first link, the Visualizer, by default, picks the most specific selector, which is the href attribute of that link. That’s great, but there’s a lot of links! There must be a better way...

 

Happily, there is. The highlighted bit of that modal on the right is a representation of the underlying code. If you don’t know this, <a> tags are “anchor” tags, and are used in HTML to create links. Href is what the link points to.

You can modify this representation (which we call the Hierarchy because HTML elements are arranged in a hierarchical order, that will become relevant later) by clicking on different elements. Look what happens when I select the <a> and deselect the href.

Now, every single link on the page is selected. In my case, that’s way too much. I only want what is in the footer. In that Hierarchy section there is a Show More button, which I can click, until I find an attribute that says “footer”, click that, and now I have created an event that targets all links in the footer of our site. (This real-life example is a little more complex but it’s super common to have a class or tag called “footer”.)

With that element selected, I’ve achieved my goal. Lastly, if I wanted to limit this event to clicks on links in the footer but only on the home page, I can add an additional filter for the current URL.

Brilliant!

 

So how could this get any easier? Well, let’s say you want to create an event that matches any link click at all. You now know that <a> tags are links, so any click on any a tag is a link click. So you head to Definitions and click the New Definition button. You choose Click from the type dropdown and enter a in the input. (I like to also add [href] because sometimes anchor tags don’t have href attributes…) We put these together without a space, because they appear on the same element.

Congrats, you now have an event that returns every link click. You can go ahead and graph this event, adding a Group By for Href (it’s a property you’ll find in the dropdown when you click “Add Group By”), and you’ll have a report of the top links clicked anywhere on your site. Easy, right?

And what if you want to limit this to a particular page? Well, you grab the part of the URL that comes after the domain name and add that as a filter. Here I’ll use / for the home page, but in your case might be /index.

But remember I want this to be only clicks in the footer. For simplicity’s sake, let’s say our footer uses a <footer> tag, which is very common. I’ll add footer to my selector, followed by a space, then the original a[href]. We put a space between them because footer is a parent of the links and so is higher in the Hierarchy. That means “all links within the footer”.

 

Here’s some resources to get you more comfortable with HTML/CSS. First, I’d check out the Web section on Creating and Managing Events. Then, I’d check out the Intro to HTML/CSSUnderstanding CSS Selectors, and Manually Writing Selectors in Heap University.

This turned out to be a lot of text, but I hope it’s easy enough to follow, helps with your current use case, and inspires you to learn more about the wonderful world of CSS selectors :) 

I’m sure you’ll be a power user in no time. 

Userlevel 2

Hi everyone! Thank you for your continued help! 

Jonathan - your instructions with the screenshots were golden. I managed to set up a general event for a high amount of links on the website, and grouped it by Href. I followed the steps, and was able to set up reports and dashboards just in time for the page launch. 🎉

Reply