Convertflow Event Listener
How to track Convertflow Interactions & Conversions with google tag manager
Measuring user interactions and conversions with your Convertflow lead generation campaign gives you valuable insights into the impact these campaign conversions have on your marketing funnel, conversions, and other business KPIs.
To implement the Convertflow campaign interaction and conversion tracking, you’ll need Google Tag Manager and the Convertflow event listener javascript code.
To begin, create a custom HTML tag where you’ll paste the event listener code and fire it on pageview or DOM ready (always recommended).
💡PRO TIP: if you installed the Convertflow script through Google Tag Manager, please use the DOM ready trigger instead.
What the Convertflow event listener does, is fire an event on every user interaction and conversion of a Convertflow campaign.
The next step in this implementation is to create a custom event with the following event names for the specific events;
[ConvertFlow_Form_Submitted] –> Fires only when CTA form and survey elements have been submitted.
[ConvertFlow_Campaign_Impression] –> Fires when a CTA has been viewed and upon reaching each additional step.
[ConvertFlow_Campaign_Dismissed] –> Fires on dismissal of a Convertflow campaign
[ConvertFlow_Campaign_Completed] –> Fires when the CTA has been tracked as completed by the “Track completion of CTA” automation
You can enrich your event data, by creating dataLayer variables in Google Tag Manager, which captures useful information about the event, some of the dataLayer variables keys are;
[userID] –> Convertflow user ID
[userTrafficSource] –> Returns the user traffic source
[userLandingPage] –> Returns the user landing page
[userDemography] –> Object data of the user demography (City, country, state)
[formfield] –> The form fields data (user inputs)
[eventData] –> Object data of each event
After creating the dataLayer variables, create your marketing tag/pixels, add the appropriate trigger and the event parameters you need for analysis.
Once done, debug to ensure it’s working fine, and publish once everything is okay.
<script>
//Fires only when CTA form and survey elements have been submitted.
window.addEventListener("cfSubmit", function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'ConvertFlow_Form_Submitted',
'formfield': event.detail.fields,
'eventData': event.detail,
'userDemography': convertflow.person.data.properties,
'userID': convertflow.person.id,
'userTrafficSource': convertflow.person.referral_source,
'userLandingPage': convertflow.person.landing_page
});
});
//Fires when a CTA has been viewed and upon reaching each additional step.
window.addEventListener("cfView", function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'ConvertFlow_Campaign_Impression',
'eventData': event.detail,
'userDemography': convertflow.person.data.properties,
'userID': convertflow.person.id,
'userTrafficSource': convertflow.person.referral_source,
'userLandingPage': convertflow.person.landing_page
});
});
//
//Fires when a CTA has been viewed and upon reaching each additional step.
window.addEventListener("cfClose", function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'ConvertFlow_Campaign_Dismissed',
'formfield': event.detail.fields,
'eventData': event.detail,
'userDemography': convertflow.person.data.properties,
'userID': convertflow.person.id,
'userTrafficSource': convertflow.person.referral_source,
'userLandingPage': convertflow.person.landing_page
});
});
//Fires when the CTA has been tracked as completed by the "Track completion of CTA" automation
window.addEventListener("cfCompletion", function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'ConvertFlow_Campaign_Completed',
'formfield': event.detail.fields,
'eventData': event.detail,
'userDemography': convertflow.person.data.properties,
'userID': convertflow.person.id,
'userTrafficSource': convertflow.person.referral_source,
'userLandingPage': convertflow.person.landing_page
});
});
</script>
Video of how to use the listener
Related Event Listener
Ninja Form
Klaviyo
Calendly
download the google tag manager recipe for tracking Convertflow Interactions & Conversions
