How to track Netlify Form submissions with GTM

Here’s how you set up Netlify form submission tracking with Google Tag Manager (GTM) and send events to Google Analytics (GA).

Step 1 – Add custom HTML tag – Netlify Form Submission

Open up Google Tag Manager and add custom HTML tag with the following code:

<script>
// modify this line to get your unique form element ID
var form = document.getElementById('netlify-form'); 
form.addEventListener('submit', function(event) {
  event.preventDefault();
  // Creates a timeout to call submitForm after one second.
  setTimeout(submitForm, 1000);
  var formSubmitted = false;
  function submitForm() {
    if (!formSubmitted) {
      formSubmitted = true;
      form.submit();
    }
  }
  window.dataLayer.push({
 	"event" : "netlifyFormSubmission"
 });
});
</script>

This is a useful JS snippet I found on Google Analytics developer resources.

It’s used for pausing form submissions to give some time to push the event into GTM data layer and it works great.

The first line after the opening script tag in the snippet needs to be modified to reflect your actual form element ID. If your form doesn’t have an ID, you could add it.

Either on your own if you know how to, or ask the web developer to do it for you. Third option would be to have the form element grabbed some other way, using CSS class for example.

If you’re struggling with this implementation, contact me or comment below.

Step 2 – Set up a trigger for the custom tag – Contact page view

After you’ve successfully implemented the custom Netlify Form Submission html tag in the first step, you should create a trigger for it.

This could be a simple and predefined All pages page view trigger, or you could narrow it down to just a page view where your Netlify form actually lives, in my case it was a contact page.

Finally, your custom html tag in GTM should look like this:

Step 3 – Add trigger: Custom Event netlifyFormSubmission

Now in step 3, you need to use the custom event we created on Netlify form submission and use it as a trigger that fires an event to Google Analytics. Simple, right?

Just keep in mind that the Event name must match the event we are pushing into the GTM data layer in the step one:

window.dataLayer.push({
 	"event" : "netlifyFormSubmission"
 });

If you change that event name in the JS script in step 1, make sure to change it here in the trigger as well.

Step 4 – Fire GA Event

Final step is to fire a Google Analytics event. It can look something like this:

The event is fired by the trigger Custom Event netlifyFormSubmission we created in the previous step.

Other than that, you could set up Category, Action, Label and Value parameters any way you like.

Once you’ve started getting these events into your GA Universal Analytics account, you could set up goal tracking on the view level.

This final step can be something else other than sending an event to GA Universal Analytics. You could send an event to a new GA property – GA4. Or you could use the event to fire some other tags, Google Ads Conversion pixel for example. But this is a topic for another article and if you need any help with this implementation, let me know in the comments below.