Support home / Features /

Setting events and events tracking

Note, please ensure you are using our latest tracking code to track events using the methods listed here.

An events is anything you want to track that isn’t just a normal page view, like a button click on a form. You can also use events to track very important pages, like the success page after a purchase. Events are a great way to pull specific actions out of the Top Content area, so you can easily see performance.

Event values are tracked in cents (so no decimal) and that we do not track events from local filesystems, they require an http:// or https:// to function.

Our events look like this: fathom.trackGoal('B5PGZD9N', 0);

This is a javascript function call that sends a request to Fathom. At present, certain ad blockers will block event completions (such as Brave) but it still works in other areas. The function call has three parameters:

  • The first parameter is the unique event ID that is generated when you create a new event from the dashboard. Do not use B5PGZD9N as it's an example
  • The second parameter is the value of the event (in cents). If your event has no value, set this parameter as 0.

Events as links

There are two ways to add an event to something on your website.

The first is adding it to an onclick event:

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

This will fire off a event any and every time that link is clicked.

The second is to add javascript which targets an element on a page. You could add this code BELOW the Fathom tracking code. So for example, if you had <a href="/about" id="about-us-link">About Us</a> and wanted to target it, you'd add the CSS ID to your javascript, like so (using your own unique event ID, not B5PGZD9N):

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

Event as page loads

You can also make an event a specific page load, like the success page after a digital product sale. Note that if there are any slow/broken external assets on the page (javascript, CSS files, etc.) then it can affect this function being called.

If you wanted to track a page as an event, you'd add the following code with your own unique event ID (not B5PGZD9N) after your Fathom code:

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

Events as form submissions

With forms, you can follow the same approach as the inline onclick for the <a> tag, but you'd use onsubmit instead on the <form> tag. This only works if you have access to edit your <form> HTML.

<form method="post" onsubmit="fathom.trackGoal('B5PGZD9N', 0);">

For StaticKit forms, they have a great guide for handling submission success. You can hook into their onSuccess method, like so:

<script>
sk('form', 'init', {
  onSuccess: function(config) {
    fathom.trackGoal('B5PGZD9N', 0);
  },
  // ...
});
</script>

If you use something else, or perhaps your form is just standard HTML, you should get an ID onto the form and then you can add some code to the footer of the page (after the Fathom code) that looks something like this:


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

Are you using events in a different way? Let us know and we can document it here.

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.