Guide: Track clicks on list filters using Fathom

Custom Coding
1

I’ve built an event catalogue on Softr using list and list-details blocks, where you can filter the events by 3 criteria (area, amount of participants, theme). I wanted to understand which criteria get used the most so I’d know what kind of events to add.

Took a bit of work to figure this out, but here’s a solution.

I’m using Fathom Analytics as my analytics tool, but it should be similar with Google Analytics and others.

(Promotion - Fathom has a monthly subscription, but it’s easy to work with and very privacy oriented so you don’t have to show cookie consent notices and still stay GDPR compliant. I honestly like them. Referral code to get started - Get a $10 credit for Fathom, a privacy-focused website analytics company - Fathom Analytics)

1. Fathom setup
After signup, get your site ID (Add the embed script - Fathom Analytics) and paste it here
image

2. Set up event trackers
Where [SiteID] is the ID you got in the previous step, go to
https://app.usefathom.com/sites/[SiteID]/events

Scroll down to “Add an event” and create events for each of your filter options. If you have a city filter that has London and Paris, then name the events something like filter.city.london and filter.city.paris. You can change the names later and the “currency” doesn’t matter. This will create Event IDs that you’ll need later.

3. Integrate with Softr
In what follows, we’ll be pasting a piece of code to the custom code section of the page where your list with filters is. I’ll add the code first and then context to understand what’s going on. When pasting the code, delete all comments (lines starting with //) or copy from the end of this post.

Note: I have minimal experience with software development so while this should work, I’m sure it could be more concise - feel free to reply with improvements!

<script>
window.addEventListener('block-loaded-list2', (event) => {
// Code runs when the block with div ID "list2" is loaded.

const filterTrackers = [
	["PAVRDX8Z","LIV8F5OF","T8XIFRUR","BHDLL38R"], //Areas
	["VPB5VPXX","1BDHXSLG"], //Number of participants
	["W5ZZA4TX","FRHJNQOB","Q8EMXYA2","EX93DBGX","4BQAASDZ","OBYSUBWD","YZPX3RDZ"] //Themes
	];
// Input Event IDs from step 2 above. Make sure order of the groups (Areas-Participants-Themes) is the same as in Softr Editor.

const filterAreas = document.getElementsByClassName('tag-list-container');
// Find all the filters on the page.

for (let i = 0 ; i < filterTrackers.length; i++) {
	for (let j = 0 ; j < filterTrackers[i].length; j++) {
	let filterCode = filterTrackers[i][j];
	filterAreas[i].childNodes[j].addEventListener('click', function() {fathom.trackGoal(filterCode, 0);});
	filterAreas[i+filterTrackers.length].childNodes[j].addEventListener('click', function() {fathom.trackGoal(filterCode, 0);});
	};
	};
// Loop through all the filter options on the page and make them send the relevant event ID to Fathom when you click on them.
});
</script>

There’s 4 sections in the code:

  1. Start the code when the block with the filters is loaded.
  2. Input the Event IDs from step 2, grouping them by filters, i.e. all the city ones are together.
  3. Find out where the filters are on the page.
  4. Attach a function to each of the filter buttons that tells Fathom that an event with that ID has happened.

For the first part, you’ll need the div ID, which you can find by right clicking on the block, selecting inspect and finding the div id. Normally it’ll be “list1”, but can be some other number if you’ve messed around with the view.

image
image922×557 32.3 KB

In the code above, I have a list that has 3 filter groups with a total of 13 options.

Something to note is that in the page code, each filter group comes up twice - once for desktop and one for mobile. Depending on which one you’re using to view the site, the other is just hidden, but you’ll want tracking to both. For the code to work as intended, make sure that when configuring your filters on the Softr editor, they have the same order as your Event IDs in the code.
image

I also turned off “sync options with data source” for the filters as I don’t trust myself. Otherwise, if I add a new filter option to Airtable and don’t come back to edit the code above, then it’ll mess up the tracking because the order of the options changes. I’d recommend doing the same.
image

Attach the code to the page’s custom code section (not to the site or as a block):
image

Code again, but without the comments for a clean copy.

<script>
window.addEventListener('block-loaded-list2', (event) => {

const filterTrackers = [
	["PAVRDX8Z","LIV8F5OF","T8XIFRUR","BHDLL38R"],
	["VPB5VPXX","1BDHXSLG"],
	["W5ZZA4TX","FRHJNQOB","Q8EMXYA2","EX93DBGX","4BQAASDZ","OBYSUBWD","YZPX3RDZ"] 
	];

const filterAreas = document.getElementsByClassName('tag-list-container');

for (let i = 0 ; i < filterTrackers.length; i++) {
	for (let j = 0 ; j < filterTrackers[i].length; j++) {
	let filterCode = filterTrackers[i][j];
	filterAreas[i].childNodes[j].addEventListener('click', function() {fathom.trackGoal(filterCode, 0);});
	filterAreas[i+filterTrackers.length].childNodes[j].addEventListener('click', function() {fathom.trackGoal(filterCode, 0);});
	};
	};
});
</script>

Hope this helps! Let me know if you have suggestions to improve the code or if you get stuck :slight_smile:

1 Like
2

This is an amazing work @Fizzle, thank you so much for sharing.

1 Like