Fathom Analytics Fathom Analytics

Setting goals

A goal 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 goals to track very important pages, like the success page after a purchase. Goals are a great way to pull specific actions out of the Top Content area, so you can easily see performance.

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

Our goals 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 goal completions (such as Brave) but it still works in other areas. The function call has three parameters:

Goals as links

There are two ways to add a goal 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 goal 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 goal ID, not B5PGZD9N):

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

Goals as page loads

You can also make a goal 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 a goal, you'd add the following code with your own unique goal ID (not B5PGZD9N) after your Fathom code:

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

Goals 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);">

If you use MC4WP (a popular WordPress plugin for Mailchimp), you'd follow this guide to hook into the form events. So if you had a form with the ID of 24, you would use the following code (changing B5PGZD9N to your own goal ID):

<script>
mc4wp.forms.on('24.success', function(form, data) {
   fathom('trackGoal', 'B5PGZD9N', 0);
});
</script>

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:

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

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

← Return to support