Do you want to know how users make use of your site? Which links they click most and what converts most?

From the official documentation you can trigger custom events via JS, by including a small utility function plausible:

<script>
window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
</script>

Whenever you call plausible('...event...') you put a tracking event in a queue (window.plausible.q) and will be tracked.

Track all the things

Some ideas of what you could track:

• is the CTA effective?
• do people use the navigation links in the header?
• do users click on the featured posts after reading the article?
• do people subscribe to the mailinglist after reaching the /subscribe/ page?

it all depends on the elements on your site and what matters most to you.

Dynamic tracking via data attributes

Data attributes can be used to “mark” elements in your HTML with events you want to track.

E.g. data-track could be the name we choose to mark elements (specifically a elements):

<a href="..." data-track="Clicked some-link">some link</a>

You simply specify the event name you want to track (“Clicked some-link”) and add to the <a> event tracking functionality.

Then, in the JavaScript counterpart, you query for all elements having a data-track attribute:

;[...document.querySelectorAll('[data-track]')].forEach(trackAction)

trackAction does the following, given a DOM element:

• it registers an event listener for the “click” event
• when that happens, the value of the data-track attribute is taken
• put the value of data-track in the localStorage

LocalStorage is needed because the event would be tracked, because the request would be aborted due to the click on a link.

Thus we swiftly put it in the localStorage, so that on the next page load (after the navigation finishes), the event can be tracked

function trackAction ($el) {
  if ($el.nodeName === 'A') {
    $el.addEventListener('click', function (e) {
      window.localStorage.setItem(e.getAttribute('data-track'), 1)
    })
  }
}

This is where the localStorage is read and every entry in localStorage is tracked as an event.

Then the entry is removed from localStorage.

Object.keys(window.localStorage).forEach(key => {
  if (/^Clicked/gi.test(key)) {
    window.plausible && window.plausible(key)
    window.localStorage.removeItem(key)
  }
})

Set up “Goal conversions” on Plausible analytics

Go to your property settings, under “Goal conversions” click “Add goal” and set it up in the form Clicked {name}:

Here some examples of tracked goals.