Triggering JavaScript event on element click (Plausible.io)

Design help Custom code
1

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

2

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.

1 Like
3

Hey @KaiLovel, thanks for sharing this. I’m trying to do the same thing - how did you embed the HTML element in the form?

4

Hey Steve,

The HTML Embed element can be found in the Elements panel. By putting the code above in an embed, and placing the embed within the Form element on your page, the rendered result is an additional element on the final form.

@scottmarkovits was trying to get this working too, but had issues. Unfortunately the software (on both ends) has changed since April 2020.

Kai

5

Hey @Steve-K ,

The Plausible folks were able to find a solution for the problem based on a GA tag workaround provided by the Webflow CEO (in an old post).

Here’s what Plausible shared to help solve the issue.

I see you already have an id attribute on that input element. That is:

(I’ve edited the Node here. You’d need to find the ID for your specific element) **w-node-f12345abc-a1b2-c1d1-ab12-3456789ab1a1-e1234566

Following the example you linked to, with Plausible it should look like this:

< script > $(document).ready(function() { $(‘w-node-f12345abc-a1b2-c1d1-ab12-3456789ab1a1-e1234566’).on(‘click’, function(e) { plausible(‘Signup’); }); }); < / script >

If that doesn’t help, Robert J from the Plausible team helped me.