Track Form Submissions with Demio & Google Tag Manager Using Demio’s Forms

Last Updated: September 8, 2023

Architect The Perfect Dashboard
Every Time!

Publish better dashboards in 2 minutes  by following these 8 criteria to WOW your boss, client, & self!

Table of Contents

Demio, a webinar platform, allows users to access crucial data during the registration process.

While Demio natively integrates with Google Analytics by adding your Google-ID within the platform, this integration doesn’t provide full insights into your lead generation journey & costs money. If you’re looking to utilize Demio to enhance your analytics, you’re in the right place!

This is a comprehensive guide on how to use Demio’s Form Listener with Google Tag Manager to build your lead generation journey and easily access reports that make a difference.

Why A Script Instead of Google Tag Manager

Demio does an excellent job providing insights within your dashboard. However, when you look at your entire marketing plan outside of the registration form, these insights only provide a part of the picture.

Demio’s Google Analytics integration tells you when a lead is generated, but with a great listener and Google Tag Manager, you can see:

  • The name of the registrant
  • The email of the registrant

This data can be used to create custom audiences for remarketing, understand your audience better, and tailor your marketing strategies.

How to Implement the Demio Listener for Datalayer Pushes

We will be utilizing datalayer pushes to provide all the information to Google Tag Manager. In short, the Data Layer is a place to store information temporarily which you can then send to other platforms.

Step 1: The Code to Implement

You will need to place the following code in the of your website or in GTM. This will not slow your site down as it is just listening for the Demio API Calls.

The Code to Copy

<script>
//create listener for form's submit event
document.querySelector(".demio-registration-form").addEventListener("submit", function(event){

  //prevent the form from actually submitting
  event.preventDefault();

  //grab the form field values
  var form = event.target;
  var name = form.querySelector('input[name="name"]').value;
  var email = form.querySelector('input[name="email"]').value;

  //push form values into dataLayer
  dataLayer.push({
    'event': 'generate_lead',
    'leadInfo': {
      'name': name,
      'email': email
    }
  });

  form.submit();
});
</script>

Set Up Your Variables in Google Tag Manager

Next, you need to set up your Datalayer variables within Google Tag Manager. If you want to know the name or email of the registrant, you could use a datalayer variable of leadInfo.name or leadInfo.email.

Example Use Cases

  1. Facebook Ads: Send Enhanced conversion to facebook along with the form submission.
  1. Google Analytics 4: By pushing the event submission to Google Analytics 4, you can track the journey of individual users across your site, helping you understand how they interact with your content and where they drop off.
  1. Google Ads: Use the collected data to create remarketing lists in Google Ads. This way, you can serve targeted ads to people who have shown interest in your webinars, thereby increasing your chances of conversions. Enhanced Conversions will work just fine

Final Thoughts

And there you have it! You now have access to all the Demio fields within your GTM account! Now you can begin to tell your story through data and visualizations!

If you have questions or want this to be implemented on your website, feel free to reach out to us. As Demio continues to build their product and dashboards, we will update this guide accordingly.

Build The Perfect Dashboard Every Time

Get your teams, designs & reports standardized across your organization & clients. 

Related Article

Keep the learning going with our recommended related articles on similar topics.