Counting Clicks: A Use Case for Grouping Fathom Events

If you’re using Fathom Analytics to monitor website traffic you may already be using the Events feature for analysing user interactions, but have you tried grouping events for an even better understanding of your users’ behaviour?

While using events can generate data for individual resources – internal and external link clicks, file downloads, form submissions, etc. – grouping these gives you a broader view of which parts of your site get the highest (and lowest) engagement. For example you could group clicks by type, e.g. PDFs and zip files, by region, e.g. breadcrumbs and sidebar, or by format, e.g. text links and buttons. These insights can then be used for strategic decision-making, such as whether to shift focus or to double down, depending on your priorities.

A Concrete Example

On my site I have many data-heavy pages which contain links to external technical PDFs, to external consumer-focused PDFs, and to other internal data pages. I added event monitoring to measure link clicks as groups, which gave me a CTR (click-through rate) for each type so I can easily compare their engagement in the Fathom dashboard.

My audience is mostly technical so I was surprised to see the CTR for the internal data pages at less than 1% whereas external consumer-focused PDFs had a healthy CTR of 5%, with the technical PDFs jumping to 7%! This is a clear indication of what my users really want rather than what I think they want. Consequently I’ve focused on adding more of these PDF links to my pages, the CTR has remained high, and traffic is going up.

Another example is a filtered list of items that my users can search through. I provide a search box as well as several “quick filter” buttons for ease of use, but I was wondering whether both were really necessary. Could I simplify the page by removing the box or buttons? It turns out the engagement rate is pretty much the same for both so in this case I’m leaving it as is. The point is I now have the data to make an informed decision, and to monitor the effect of any action I choose to take.

Putting It Into Practice

The Fathom docs already give you code snippets for monitoring events, but here’s how to take it a step further by using data attributes to handle multiple events with just a few lines of code.

1. Fathom Dashboard

Firstly we’ll need to prepare event IDs. Do this by clicking Manage Events in the Fathom dashboard and then adding new events. To avoid confusion, give your event names a consistent and understandable naming format such as Click: Data pages > Technical PDFs, Click: Data Pages > Consumer PDFs, etc. It’s OK to use symbols in event names so make the most of them!

2. HTML

Next we’ll edit our page markup by adding data attributes to all the clickable elements we want to monitor. The advantage of using data attributes rather than class names is that elements can only have one of each data attribute, whereas they can have multiple class names which would make things harder for this purpose. Let’s use data-fathom as the attribute name with the event IDs from step 1 as the values, for example:

<a href="technical.pdf" data-fathom="ABC123">
<a href="technical2.pdf" data-fathom="ABC123">
<a href="consumer.pdf" data-fathom="DEF456">

3. JavaScript

Now it’s coding time. Use the [data-fathom] query selector to loop through all the links you want to monitor. With each iteration attach an event listener to each element and pass its data attribute’s value (which is the event ID) to Fathom’s trackGoal() function. When fired, it will (anonymously) record the click. Here’s the code in full, compatible with Internet Explorer 9 and newer:

// Get all elements with a "data-fathom" attribute.
var link_elements = document.querySelectorAll('[data-fathom]');
// Loop through the elements and listen for clicks.
for (var i = 0, len = link_elements.length; i < len; i++) {
    link_elements[i].addEventListener('click', function(event) {
        // When clicked, record it using the data attribute’s value (event ID).
        fathom.trackGoal(event.currentTarget.getAttribute('data-fathom'), 0);
}, false); }

And that’s it, you’re ready to start gathering event info. An added bonus is that any new event IDs you create only need to be added as data attributes in the markup – you don’t need to touch the JavaScript! Now sit back and watch the data come in to learn more about your users, privately of course.