Omnisend Form Event Listener
How to track Omnisend Form Interactions and Successful Form Submissions as Conversions with google tag manager
Using the Omnisend form event listener and tag management solutions like Google Tag Manager (GTM), you can track Omnisend form interactions as events and conversions in Google Analytics (GA4), Piwik Pro, Meta, Google Ads, and other platforms.
To track Omnisend form interactions, I’ll walk you through the steps using GTM as the preferred Tag Management System (TMS).
Step 1: Create a Custom HTML Tag & Trigger
First, create a custom HTML tag in GTM and paste the Omnisend form event listener script into it. Attach a trigger, which can be DOM Ready.
About The Omnisend Form Event Listener Script:
The Omnisend form event listener script emits dataLayer events for the following form interactions:
- view: Fires when a popup, flyout form, or embedded form first appears on the page.
- interaction: Fires when the user interacts with the form (e.g., selects an input field); it fires only once for each form.
- submit: Fires when a visitor completes the primary conversion action in a form (e.g., subscribing via email or SMS); it fires only once per Omnisend form.
- close: Fires when a visitor closes the form.
- stepView: Fires when each step of a multi-step form is displayed on the page; it can fire multiple times per Omnisend form.
- stepInteraction: Fires when the user interacts with each step of a multi-step form; it fires once per step.
- stepSubmit: Fires when each step of a multi-step form is submitted; it can fire multiple times per form.
Now you have an understanding of these Omnisend form interactions that trigger dataLayer events. The next step is to create a trigger in GTM that will be used to fire your analytics tags and marketing pixels.
Step 2: Create Omnisend Form Custom Event Trigger
Create a custom event trigger in GTM with “[omnisend_form_event]” as the event name. The event listener will register this for all Omnisend form interactions tracked by it.
Step 3: Add More Context By Defining DataLayer Variables
Next, create a set of dataLayer variables to capture additional details about the Omnisend events, form attributes, and form data (which can be used for enhanced conversion tracking):
- [event_type] -> Returns the Omnisend form event type (view, interaction, submit, close, stepView, stepInteraction, stepSubmit)
- [form_name] -> Returns the Omnisend form name
- [form_id] -> Returns the form ID
- [form_display_type] -> Returns how the form was displayed (e.g., popup)
- [form_version_id] -> Returns the Omnisend form version ID
- [form_version_name] -> Returns the Omnisend form version name
- [form_values] -> Object to narrow down specific form field selections for enhanced conversion tracking
- [brand_id] -> Returns the unique brand ID in Omnisend
- [step] -> Returns the step in which the event occurred (for multi-step forms)
- [timestamp] -> Returns the timestamp of the action
Step 4: Data Collecting In Analytics & Ads Platforms
The final step is to start capturing these Omnisend form events in platforms like GA4, Piwik Pro, Meta, Google Ads, etc. To do this, create the necessary tags, configure them with the variables, and attach the Omnisend trigger.
To expedite your implementation, scroll down this resource page to find a GTM recipe template that you can download. While what has been covered so far is tailored for GTM, the Omnisend form event listener can be used with other Tag Managers.
By following the principles outlined above, you’ll be able to effectively measure Omnisend form interactions and successful form submissions on platforms like Google Analytics, Google Ads, Meta, and Piwik Pro.
<script>
// Function to push event details to the dataLayer
function pushToDataLayer(eventType, eventData) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'omnisend_form_event',
event_type: eventType,
form_name: eventData.form.name,
form_id: eventData.form.id,
form_display_type: eventData.form.displayType,
form_version_id: eventData.form.versionID,
form_version_name: eventData.form.versionName,
form_values: eventData.formValues,
brand_id: eventData.brandID,
step: eventData.step || null,
timestamp: eventData.timeStamp
});
}
// Event listener for Omnisend form events
window.addEventListener("omnisendForms", function(e) {
var eventType = e.detail.type;
var eventData = e.detail;
// Push the event details to the dataLayer
pushToDataLayer(eventType, eventData);
});
</script>
Video of how to use the listener
Related Event Listener
Hubspot form
Typeform
Support Board
download the google tag manager recipe for tracking Omnisend Form Interactions and Successful Form Submissions as Conversions
