Using GA4 to Track Multiple Form Submissions in Ghost
How to track form submissions using GA4 events properly, not just reading page views on a success page. If you don't use forms in an iframe then it's very easy!
I really like the Ghost platform for its ease of use, extendability and awesome editor. This blog is built using Ghost, and has a number of contact forms on a few key landing pages as well as the normal contact page.
The official Ghost docs have a guide on inserting a Formspree form as a custom html block. I save my block as a snippet for reuse.
I've tried loads of other form builders and prefer Formspree. Typeform is my favourite because it looks great, but the paid version is £80 a month if you want Google Analytics tracking. The many clones out there may be cheaper but are still paid and they all use iframes.
Why iframes suck for tracking
Once you start loading things in iframes your Google Analytics tracking tag stops working - it can't see inside the iframe.
Simple forms make tracking easy
I like Formspree because it is just a simple form with the post pointing to their url
<form action="https://formspree.io/f/kgifngyr" method="POST">No iframes involved.
How to track form submissions in GA4
Google provides a Form Submission trigger that does all the hard work. It only works if the form is not in an iframe.
Create a new trigger
Choose Check Validation and filter by Page URL. I use a simple RegEx to only trigger on the pages that have a form.
contact|page-2|another-page
Save the trigger.
Enable the form variables
Go to variables and click configure in the top right. Select all the form variables.
Create the event tag
Go to tags and click New and choose a GA4 event tag.
Setup the tag with the event name generate_lead and add an event parameter called lead_type and for the value select the pre-built variable Form ID
This means that when a form is submitted the form submission trigger is fired, which creates some variables (and adds to the datalayer) automatically, then fires the GA4 event using the form's ID as a lead type.
This final step with the Form ID allows segmenting the "generate_lead" event.
Create a form in Ghost
Create your formspree account and paste a form in a custom html block.
<form id="change_this_to_segment" action="https://formspree.io/yourform" method="post">
<label for="full-name">What's your name please?</label>
<input type="text" name="name" id="full-name" required>
<label for="email-address">Your email address</label>
<input type="email" name="_replyto" id="email-address" required>
<input type="submit" value="Submit">
</form>Test that everything works
Preview your container in tag manager and go and fill in and submit your form.
In Tag Assistant you should see a form submit as the last event before the new page is loaded
Click the event and you should see the tag has fired
Click the tag to see its details. You might need to click "Display Variables as values" in the top right corner. The value of lead_type is the form id.
Capturing the email address from the form
I want to capture the email from the form submit and store is as a variable in GTM so it can be passed to Woopra as a tracking ID.
Javascript Variable to extract the email
I created a new customer javascript variable with a function that loops through the {{Form Element}} variable generated by the Form Submission trigger and looks for an email address.
function() {
try {
var searchEmail = function(input){
for(i=0; i<input.length; i++){
email = input[i].value;
if(email.match(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i)){
return email;
}
}
}
return searchEmail({{Form Element}});
}catch(e) {
return "";
}
}Custom HTML tag to fire woopra event
