Tracking Form Submissions with GTM


In Google Tag Manager, our conversion tags are triggered by a visit to the form confirmation page.

Unfortunately, we are having a problem with display advertising fraud. I suspect bot networks are simply launching our thank-you page – without filling out the form – and triggering our conversion tags.

How can I create a trigger that only fires the form is successfully submitted using Google Tag Manager?

The native GTM integration appears to fire this kind of event:

The native integration via Script Manager will automatically place the GTM code on your pages. This will not automatically send the form submission event to GTM, but will allow you to set up a listener within GTM to capture the form submit data layer.


46 replies

Userlevel 7
Badge +1

Hey Egor,

I’m all for rants so please feel encouraged to share them here (as the admin I can still see it, and it’s valid!) but I love that you came back and shared your solution here. Perhaps this post needs an update. I’ll be putting it on our team’s radar to see if our documentation needs an update as well, thanks so much for bringing this to my attention and for sharing your insights.

-Jess

Nice, that’s definitely a good way to go about it. For us, our Unbounce pages run on a subdomain so I just use hostname + gtm.formSubmit to catch all UB pages only, while ignoring their website.r

After having a little rant here (which, I hope, you cannot see anymore) it occured to me — I could actually create a custom event myself, all I need is a reliable hook which is Unbounce forms unique. Turns out, there is such a hook (all the more of a question why in the world would UB keep recommending gtm.formsubmit), explained in this thread: [How to] Run Custom Code/Scripts on Form Submission

What we’re going to do here is use the functions from the post above to push an event which will then be used to trigger any necessary conversion tags.
Is it better than the official gtm.formsubmit recommendation? Yes.
Are there any cons? Not that I can think of.
What we’ll get:
a) All of the unbounce forms will be covered with just one trigger, on all the pages your GTM is set up.

b) Other forms that get triggered on gtm.formsubmit are out. No need to exclude WP forms (CF7, search), HubSpot forms (which do not validate on this) or Facebook pixel’s invisible tracking forms 🙂 You can set up a separate trigger for any other form which is the right way to go.

c) The form will be properly validated. No overcounting duplicate gtm.formsubmit events (or restr
icting event occurrence to ‘one per page’, although that’s still recommended), not silly onclick events, no problems with people refreshing the thank-you pages or bots visitings them without actually completing any forms.

d) This can be used without the Tag Manager. Just change the code to fire what you need, refer to the original article.

In the GTM, let’s create a Custom HTML tag, set it to fire on All Pages, and call it whatever you like. Populate it with this code:

Code
<script>
  window.ub.hooks.afterFormSubmit.push(function() {
         window.dataLayer.push({
        'event': 'ub-form-success'
      });
  });
</script>

Next, let’s add a Custom Event trigger and set its Event name to ub-form-success (you can rename the event in the code above to your liking, just make sure it’s very unique 🙂

There, you’re set. Use the trigger created to fire off any conversion events. Reliable, especially compared to the original suggestion of gtm.formsubmit.

Hi Marc,

Thanks for your confirmation!

Best,
Nito

Hey Nito!
Totally normal that GTM loads in the popup. Unbounce iframes the popup, so it’s pretty much a website loading in a website. The popup won’t trigger any additional events since the form submit event doesn’t happen in that iframe.

I took a brief look at your video and it all looks to be working correctly!

@ParaCoreMarc Hi Marc, hope you are doing well. I tried to implement your solution there and have tested it here https://www.loom.com/share/afd3e561da554dcf910254c903ac4097

I used the Unbounce native form for my landing page. One question though: Is it normal to have the GTM preview container showing up on the success popup? This popup view shouldn’t trigger any additional event, right? Hence, the form submit event only triggers on the landing page GTM overall preview once I successfully submitted the form, but not on the success popup itself

Looking forward for your insight. Thanks! 🙂

That does, thanks!

Late reply here but…

Since we manage many clients, I actually have a single unbounce conversion for each client, in each platform, because each client gets their own GTM container. If a client has multiple pages, they all share the same unbounce conversion for that client.

You can differentiate it because the leads are captured in unbounce and I add hidden utm fields to see which source and campaign they came from. If you set it up as a conversion in google ads, you can also navigate into the conversion and see which “webpages” triggered the conversion. In addition, because ad platforms drop a cookie when an ad it clicked, it will only capture the conversion IF that user clicked an ad, so you won’t be getting false conversion data.

Basically our setup goes like this:

  1. Unbounce form submits, sends a GTM event
  2. With that GTM event you can trigger multiple conversions, so it’s 1 GTM event that will trigger our ad platform conversions.

Hope this makes sense!

This was happening to me as well. If you have gtm.formSubmit firing on page load (before the form is submitted), then it is likely because it is being fired by the Facebook pixel. This article has a good explanation of why that happens and how to stop it from firing the tags you want. https://www.analyticsmania.com/post/why-is-there-a-gtm-formsubmit-event-on-every-page-view/#gref

I’ve got this working on one of my landing pages, but I’m wondering how personally go about setting this up across multiple Unbounce pages.

For Facebook and Google Ads conversion tracking, do you create a new GTM Tag and Trigger for each different Unbounce form/page that your company uses, or do you just make one generic conversion tag for each (FB & Google) and fire that tag whenever any of your Unbounce forms is submitted?

If you’re doing the latter, how do you distinguish between what form someone converted on in each ad platform?

I just wanted to pop into this thread to say thanks to everyone, especially @ParaCoreMarc for all of the info. After a decent amount of troubleshooting, I finally got this live.

Someone else mentioned the Chrome extension Dataslayer, which was really useful for checking that the gtm.formsubmit tag fired before my page redirected to my final destination.

I had quoted the thread in my post above, click on the title “GTM Form Submission Trigger Update”

Where can we find it?

Unbounce now has an official post regarding this.

Note to anyone new to this thread. These instructions are a little out of date.

Make sure you use the pre-built “Form Submission” action rather than the “Custom Event” outlined above. Unbounce will only fire a Form Submit event if you use the Form Submission trigger.

If you’re getting rogue or duplicate form submissions, you could be firing a form submit trigger from Facebook’s tracking pixel (if you have it installed). I use the Google Chrome extension, dataslayer, to look at what’s been fired after the page is refreshed. It lets you look back in time. Check your gtm.formSubmit events and see if they are actually from gtm.elementUrl=https://www.facebook.com/tr/ instead of your form button.

I just read this thread and I’m trying to understand how to track my form submissions with GTM as well. I have the container manually installed (not thru unbounce integration) and seeing if there’s a way to get it to work that way.

Jannette

I’m following this also. I have project that’s about to go live and ideally I could do with this being resolved if it’s not. Thanks!

Hey Guys, Love this thread I am having a similar issue and a little stuck.
I have the same tag set up as you mentioned ParaCoreMarc in the original set up:
Tag: Google Ad conversion Tracking
Trigger: Custom event with gtm.formsubmit

My tag is firing before the form is being submitted. Is this due to the issue you are talking about above. I noticed you guys fixed it but I couldn’t follow what fix you used.

Help is greatly appreciated! Thanks!

Have you noticed that the form submission event fires even on form submission attempts (i.e. - user clicking the submit button)? I even have my form submission trigger setup in GTM to “Check Validation”, however, it still seems to fire even when the use does not actually successfully submit the form.

Curious if you do hear back from Unbounce!

I have a form I am trying to arrange a tag for, but I’m also no GTM professional. Got regular buttons to track, but my form submission is firing 3 tags for each submit. Hmm…

Oh, I forgot to update. GTM works fine if you load it yourself and not via Unbounce’s integration. I loaded it via segment.io (the whole reason I was using GTM was because the GoogleAds conversion script wasn’t working with segment, but did work with GTM). I also realized it was dumb to use two tag managers, so I just included the Google Ads conversion script on all of my pages individaually. ¯_(ツ)_/¯

After testing, this works for me as well. It is the “gtm.formSubmit” event that unbounce used to manually submit. This seems like the correct answer, perhaps Unbounce docs need some updates for this? I never received an update either after my support request 😦

Interesting, if that’s the case then it’s a little different now. The built-in variable picks up on any form submissions whereas the other event was specifically sent from Unbounce. That’s good it works though and maybe that’s what Unbounce is hoping we use now instead?

it works but if only built-in GTM variable “form submission” is active.

I managed this setup. Custom gm.gform.submit tag works properly with the popup but only after I have activated built-in form submission variable.

Reply