PaperForm Event Listener
How to track PaperForm Form Submissions with google tag manager
Once you’ve followed the provided instructions on implementing and utilising the Paperform event listener, you’ll enhance your marketing and analytics efforts by accurately tracking step completion and successful conversion actions in forms created with PaperForm.
The implementation process commences with the creation of a custom HTML tag type in Google Tag Manager. Subsequently, you should copy the PaperForm event listener JavaScript code into this newly created tag.
The next step in the setup involves adding a page view or DOM-Ready trigger to the tag.
Upon successful implementation, the code emits two dataLayer events when a user successfully submits a PaperForm form with the event name [paperformSubmissionEvent].
Additionally, a second dataLayer event is triggered when a user advances or returns to a different step in a form built on PaperForm. This event is named [paperformStepChange].
To activate your marketing tags or pixels, create two custom event triggers for conversion and step change events.
- [paperformSubmissionEvent] -> For successful form submissions
- [paperformStepChange] -> For form step changes
For a more precise configuration of your trigger conditions or capturing form details, such as form ID and form step reference ID, consider utilising the following dataLayer variables as event parameters:
- [form_ID] -> Returns the PaperForm form ID
- [paperForm_Step] -> Provides the step reference in the form
- [submission_ID] -> Available on the successful PaperForm form submission event, representing the ID of the form submission
- [formData] -> Contains the form data (check compliance)
- [event_timestamp] -> Reflects the timestamp of the event
- [paperForm_Total_Step] -> Represents the total steps available in a multi-step PaperForm form
Include these triggers and parameters in your event tags for Google Analytics (GA4), Piwik Pro, Mixpanel, and other platforms.
For successful PaperForm form submissions, consider tracking them as conversions in Google Ads, Meta Ads, LinkedIn Ads, etc.
It is crucial to thoroughly test your implementations before publishing them in Google Tag Manager.
<script> //fires on actual successful PaperForm submission window.addEventListener('PaperformSubmission', function(e) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'paperformSubmissionEvent', 'eventType': e.type, 'form_ID': e.detail.form_id, 'submission_ID': e.detail.submission_id, 'event_timestamp': e.timeStamp, 'formData': e.detail.data }); console.log("DD - paperform submitted") }) //Fires on paperForm form step change window.addEventListener('PaperformPageChange', function(e) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'paperformStepChange', 'eventType': e.type, 'form_ID': e.detail.form_id, 'paperForm_Step': e.detail.currentPage, 'paperForm_Total_Step': e.detail.totalPages, 'event_timestamp': e.timeStamp }); console.log("DD - paperform step change") }) </script>