Streaming live at 10am (PST)

Triggering JavaScript event on element click (Plausible.io)

Hey all,

I’m a Plausible.io user and have been for some time. It’s a great third-party tool for analytics and a simpler Google Analytics alternative. I’ve had it working with my Webflow site for a while now

They’ve recently rolled out a feature where you can add certain goals or conversions to your analytics. It requires two things:

  1. The Plausible script added to the header of all pages.
    (This isn’t an issue, I know how to do this via the “Custom Code” section of project settings)

  2. A JS event trigger when a button is clicked or similar.
    (This is what I’m struggling with)

Their documentation on this feature has the specific info. Would love to have this connected to a button or similar.

Thanks! :webflow_heart:

Kai

Edit: I worked out one way to do it.


If you want to track pressing regular buttons, replace it with an HTML Embed element. Use the following code:

<button onclick="window.location.href = 'website.com'; plausible('Goal Name')" class="button dark">Click me</button>

Notice you can have both a link that the button sends you to (window.location.href = 'website.com') and a Plausible JS event-triggered (plausible('Goal Name')) note, it is separated by a semicolon ( ; )


But what about if you want to track form submissions. I added the following code to an HTML embed element within the form element to replace the existing submit button and it worked a treat.

<input type="submit" value="Submit" data-wait="Please wait..." class="button light w-button" onclick="plausible('Submit General Inquiry')">

In testing, the onclick attribute seems to work for both triggering the Plausible JS event AND submitting the form. Awesome!


Maybe soon, Plausible will introduce a better version of this process, similar to the Facebook Pixel Event Helper. For now, this will have to work.

Kai.