Track link clicks

There are two ways to fire off an event when a person clicks a link on your site. The first is to add an onclick to the ahref tag, like so:

<a href="/about" onclick="fathom.trackEvent('button click');">About Us</a>

The second way is used if you want to target any/all elements on a page with a specific ID or CLASS. In this method, ensure the javascript code for your events appears after any/all IDs or CLASSES.

Let’s say you want to fire off an event when a customer clicks a link that looks like this:

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

To do this, 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.trackEvent('about click');
  });
});
</script>

You’d change about-us-link to the ID you’ve used in your code and also change about click to an Event name of your choosing. That Event name will then show up on your dashboard when someone clicks the “About us” link.

If you instead want to fire off an event based on a CLASS (instead of an ID), you’d use the following code. CLASSES are useful as they can be used infinite times on a single page, whereas IDs should only be used once per page (per HTML spec). In this example, we have a series of files that a user can download and we want to see how often these are downloaded.

<a href="file1.pdf" class="download-link">File 1</a>
<a href="file2.pdf" class="download-link">File 2</a>
<a href="file3.pdf" class="download-link">File 3</a>

<script>
window.addEventListener('load', (event) => {
  document.querySelectorAll('.download-link').forEach(item => {
    item.addEventListener('click', event => {
      fathom.trackEvent('file download');
    });
  });
});
</script>

Where .download-link is the class used by your link(s) in your code, and file download is an Event name that’ll then show up on your dashboard when it’s fired off.

In addition to this, you can also get fancy and have dynamic names for your file downloads. Let's do another example:

<a href="file1.pdf" class="download-link">Download File 1</a>
<a href="file2.pdf" class="download-link">Download File 2</a>
<a href="file3.pdf" class="download-link">Download File 3</a>

<script>
window.addEventListener('load', (event) => {
  document.querySelectorAll('.download-link').forEach(item => {
    item.addEventListener('click', event => {
      let fileName = item.getAttribute('href');
      fathom.trackEvent(`file download: ${fileName}`);
    });
  });
});
</script>

If you didn't want to send over the full href value, you could easily add data-filename="File X", for example, to the links and then use getAttribute('data-filename') instead of grabbing the href.