So for several weeks I’ve been wracking my brain on how to track ConvertKit form submissions with Google Tag Manager so that I can create goals in Google Analytics for them.
I did not want to use “thank you” pages for my ConvertKit forms so that meant I needed to track ConvertKit form submissions using Google Tag Manager.
The Issue
ConvertKit does not use the “id” field in their forms like most other forms do.
Example:
<form id="123456"></form>
ConvertKit Uses:
<form data-sv-form="123456"></form>
This means that GTM’s built-in form listener does not work on ConvertKit forms. I’ve put in a request for ConvertKit to add this feature but I have no idea if or when that will happen.
My Journey
So my journey took me to an Ajax Form Listener from Bounteous (previously LunaMetrics).
I was able to get it working but then it stopped working for some reason. Also, it did not track ConvertKit forms separately. It only let me know that a ConvertKit form was submitted but I was unable to tell which one.
I reached out to a GTM freelancer and they were able to get me further than I had got on my own but I was still having trouble if there was more than one form on a page. The GTM set up was not able to differentiate the two forms.
Finally, I reached out to Simo Ahava for 911 GTM help!
The Solution
Simo shared the following explanation with me:
Your site uses a regular form, but instead of doing a regular “submit” event which GTM’s form trigger could pick up, it cancels the default action of the submit instead. This is because there is some ConvertKit JavaScript that’s used to dispatch the submission instead after validation. This is very normal. GTM’s form submit triggers have a hard time working in even the simplest of scenarios.
You could use the Ajax Listener from Bounteous but here it’s total overkill. It’s a pretty heavy piece of equipment. It attaches to processes that output way too much information, more than is necessary.
Instead, I introduced a Custom HTML tag. It has a vanilla (non-jQuery) JavaScript snippet that basically just listens for all form submissions with the “data-sv-form” attribute. Then it pushes a new custom event (“custom.submit”) with the details of the form that was submitted to the dataLayer.
This will work with whatever form you add to the site in the future, as long as it has the “data-sv-form” attribute.
This is what Simo ended up creating form me:
Two Tags
- Custom HTML
- Google Analytics
One Trigger
- Custom Event
One Custom Data Layer Variable
- ConvertKit Form ID
Checkout Simo’s GTM Custom Event listeners principles for more on this topic.
GTM Container Export
You can download the GTM container here and import it into your own GTM container.
When any form with data-sv-form is submitted, the event fires with the following data:
- Event Category: ConvertKit Form
- Action: <{{data-sv-form Value}}>
- Label: <{{Page URL}}>
The event populates the Action and Label dynamically depending on what form was submitted and on what page.
Don’t forget to replace the Google Analytics ID in the GTM Container with your Google Analytics ID. This tells GTM where to send the event data.
Google Analytics Goals
In Google Analytics you would just need to set up the goals like this. These are just examples:
Goal Name: Newsletter Signup
- Event Category: ConvertKit Form
- Action: (insert ConvertKit form id number from Newsletter Signup Form)
- Label: Leave Blank
Goal Name: Email Course Signup
- Event Category: ConvertKit Form
- Action: (insert ConvertKit form id number from Email Course Signup Form)
- Label: Leave Blank
If you need help finding your ConvertKit form id’s, simply log into ConvertKit and go edit a form. You can see the form id in the URL or in the embed tab.
Happy converting!
