Sign inFree trial
Support home / Features

Creating and using events

Note: in late 2021, our events code changed, so ensure you are using our latest script or latest custom domains script.

Events (or goals) in Fathom are things you want to collect data about, which aren’t just page views. Things like button clicks, form submissions, and even e-commerce can be set up as events in Fathom.

Events include three pieces of data:

  1. Event name: is the name you give an event when you add one on your Fathom dashboard.
  2. Event ID: is assigned to the event name when creating an event.
  3. Value: is the value (in cents) and is optional. If your event doesn’t have a monetary value, just use “0”.

We also do not track events that fire locally, as they require an https:// (or http://) to function.

Always ensure your event script loads after the ID or class, as this is how javascript works (and will avoid errors).

If you want to see a real-world example of using and adding events, here’s a video of us adding an event in Webflow (the same principles apply to any code or CMS).

Be aware that any slow/broken external assets on the page (javascript, CSS files, etc.) can affect your events. A single javascript error can make all javascript malfunction on a page. Always check your console to see if there are javascript errors.

Event currency

You can change the currency of your event by going clicking Manage events on your dashboard, and then clicking on the name of the event. You can then select from several currency symbols, or "Integer" (just a plain number), or "None" (shows no value).

There are two ways to fire off an event when a link is clicked.

The first is to add an onclick event to an ahref tag, like so:

<a href="/about" onclick="fathom.trackGoal('YOUR-EVENT-ID', 0);">About Us</a>

The second is to target any/all elements on a page with a specific ID or CLASS. In this method, ensure the javascript appears after any/all IDs and CLASSes, or it won’t work.

Let’s say you want to fire an event each time a visitor clicks a link that looks like this:

<a href="/about" id="about-us-link">About Us</a>

You’d add the following script somewhere below the link above (typically just above the </body> element).

<script>
window.addEventListener('load', (event) => {
document.getElementById('about-us-link').addEventListener('click', () => {
fathom.trackGoal('YOUR-EVENT-ID', 0);
});
});
</script>

And you’d change about-us-link to the ID you’ve used in your code, and also change YOUR-EVENT-ID to the Event ID you created when you added an event on your Fathom dashboard.

To find an event any time a link uses a CLASS instead of ID (for example, if you have multiple links which fire off the same event), you’d use the following code:

<script>
document.querySelectorAll('.CLASSNAME').forEach(item => {
item.addEventListener('click', event => {
fathom.trackGoal('YOUR-EVENT-ID', 0);
});
});
</script>

Where .CLASSNAME (including the dot) is the class used by your link(s), and YOUR-EVENT-ID is your Event ID from your Fathom dashboard.

Events as a page load

For important pages, if you want to separate them out from the content section of your dashboard, you can fire an event when a page loads:

<script>
window.addEventListener('load', (event) => {
fathom.trackGoal('YOUR-EVENT-ID', 0);
});
</script>

And you’d replace YOUR-EVENT-ID with the Event ID from the event you created on your Fathom dashboard.

Events as a e-commerce

The 0 in all the examples relates to the value of the event, in cents. So if you want to associate a price with an event, add the value in cents to it:

<script>
window.addEventListener('load', (event) => {
fathom.trackGoal('YOUR-EVENT-ID', 1800);
});
</script>

And you’d replace YOUR-EVENT-ID with the Event ID from the event you created on your Fathom dashboard. And you'd replace 1800 (which is $18.00) with the value of the event completion.

Events as form submissions

If you can edit the HTML of your form, you can fire off an event when a form submits:

<form method="post" onsubmit="fathom.trackGoal('YOUR-EVENT-ID', 0);">

And you’d replace YOUR-EVENT-ID with your actual Event ID.

If you can’t edit the HTML of your form, but know the ID of the form (or can add an ID), you can add the following javascript below the form:

window.addEventListener('load', (event) => {
document.getElementById('id-of-your-form').addEventListener('submit', () => {
fathom.trackGoal('YOUR-EVENT-ID', 0);
});
});

Where id-of-your-form is the actual ID of your form, and YOUR-EVENT-ID is the Event ID from your Fathom dashboard.

If you still have questions or require help with anything, please reach out to us and we'll happily get things sorted out for you.