Cognito Form Event Listener
This functionality enables you to trace these completed form submissions within your business analytics tools, including Google Analytics (GA4), Mixpanel, Piwik Pro, etc., and advertising platforms such as Google Ads, Facebook Pixel, LinkedIn Insight Tags, and more. In the subsequent section, you will gain insights into the steps involved in utilising the Cognito Form event listener.
How to track Cognito Form Submission with google tag manager
In your analytics and advertising platform, you can measure successful Cognito Form submissions as conversions. Achieving this is possible by using Google Tag Manager in conjunction with the Cognito Form event listener. This allows you to specifically track successful form submissions as conversions within your analytics stack, including platforms like Google Analytics (GA4), Piwik Pro, and your chosen advertising platform.
Before delving into the instructions on utilising the Cognito Form event listener in Google Tag Manager, it’s crucial to note that the JavaScript code functions seamlessly for embedded Cognito forms. An alternative approach is necessary if you’re using the iframe embed.
The implementation process is straightforward and commences by creating a custom HTML tag in Google Tag Manager. Copy the Cognito Form event listener code, paste it into the tag, and attach a pageview or DOM-ready trigger.
Pro Tip: Opt for executing the code on a DOM-Ready trigger type.
The subsequent step involves creating a custom event trigger that exclusively occurs upon successful form submissions, bearing the event name [cognito_form_submit_successful].
The dataLayer event also emits an event with the name [cognito_form_submit_button], triggered after the user clicks the “Submit” button but before the form is submitted to the Cognito Forms servers. This provides an alternative means to track successful submissions and Cognito form submissions with errors.
The next step is to create a dataLayer variable for the following information available on each dataLayer push:
- [cogformID] –> Collects the Cognito form ID.
- [cogformName] –> Captures the Cognito form name
- [cogInternalFormName] –> Holds the value of the form name in Cognito (like a unique name, mostly without spaces).
- [cogformEmail] –> Stores the email supplied by the user when submitting the Cognito form.
- [cogFormNameObj] –> Facilitates access to the name, whether first, last, middle, etc., provided that the field exists and was supplied by the user at the time of submission.
- [cogformHasError] –> Used to identify if a form has errors.
Subsequently, you can seamlessly activate your marketing conversion tags/pixels through the custom event you’ve created for successful Cognito form submissions [cognito_form_submit_successful].
Additionally, implement your analytics event and conversion tags, such as Google Analytics (GA4) event tags, Piwik Pro, Mixpanel, Google Ads Pixels, LinkedIn Insight tags, Meta Pixel, etc.
Ensure thorough testing of your setup before finalising and publishing.
<script>
// Raised after the user clicks the “Submit” button, but before the form is submitted to the Cognito Forms servers.
Cognito.on('beforeSubmit', function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'cognito_form_submit_button',
'cogformID': event.data.entry.Form.Id,
'cogformName': event.data.entry.Form.Name,
'cogInternalFormName': event.data.entry.Form.InternalName,
'cogformEmail': event.data.entry.Email,
'cogFormNameObj': event.data.entry.Name,
'cogformHasError':event.data.hasErrors
});
console.log("DD - submitted cognito form");
});
// Raised after the form is submitted but before the confirmation page is displayed.
Cognito.on('beforeSubmit', function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'cognito_form_submit_successful',
'cogformID': event.data.entry.Form.Id,
'cogformName': event.data.entry.Form.Name,
'cogInternalFormName': event.data.entry.Form.InternalName,
'cogformEmail': event.data.entry.Email,
'cogFormNameObj': event.data.entry.Name,
'cogformHasError': event.data.hasErrors
});
console.log("DD - actually submitted cognito form");
});
</script>
Video of how to use the listener
Related Event Listener
PaperForm
Typeform
ConvertKit Form
