Recently I've been on a mission to see if I can get all the analytics I need from my website without using Google or cookies in general. For this reason I already moved my website analytics to Plausible Analytics, but I did have a hard time figuring out event tracking. Especially since Google Tag Manager makes it so easy.
One of the things I really wanted to add was event tracking for ConvertKit Form submissions on my website. Apparently there was no article to be found on how to do this, so I started figuring this out on my own.
To save you some time, here are the necessary steps and code to make this work:
Step 1: Add a custom event in Plausible
First you want to create a custom event in your Plausible Analytics settings. You can do this by logging in to your Plausible account and navigating to My sites. Here you click the little settings icon for your website and go to 'Goals' in the menu on the left.
Here you want to click '+ Add goal' and add a custom goal named "ConvertKit Form: Submit". Click the "Add goal" button at the bottom of the screen to confirm.
Step 2: Add Plausible Analytics script to your website
Next we are going to add a JavaScript function that Plausible Analytics will use to pass custom events in JavaScript. Your Plausible Analytics tracking code should be in your website's header section just before the closing </head> tag.
You can copy this code:
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
The full Plausible tracking code on your website should now look like this: (With 'your-site.com' changed to your own website domain)
<script defer data-domain="your-site.com" src="https://plausible.io/js/script.tagged-events.outbound-links.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
Please note that this code also adds the possibility to track outbound link clicks in Plausible Analytics, which you can set up by following the steps in this article.
Step 3: Add ConvertKit event listener
Now for this last step we are going to add a JavaScript event listener that will be triggered when a ConvertKit form on your website gets submitted.
You can add this code just before the closing </body> tag:
<script>
(function() {
document.addEventListener('submit', function(event) {
if (event.target.dataset.svForm) {
plausible('ConvertKit Form: Submit')
}}, true);
})();
</script>
Once you have completed all these steps you can now submit a ConvertKit form on your website to test if everything is working. You should now be able to see the ConvertKit form submission as a custom event in Plausible Analytics.
