Tracking Form Submissions with GTM

Phillip

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

ParaCoreMarc

Okay, taking a look now. A couple questions for you:

  1. Are you testing a successful form submission?
  2. Are you checking the debug window before the redirect to the thank-you page happens? It will only show on the landing page, but will go away when it redirects you to the thank-you page.
  3. I may have not been clear! Do not use the built in “Form Submission” trigger in GTM. This is a general form listener. You will want to create a trigger using “Custom Event”.
    39%20PM
  4. Are you using the native form functionality of unbounce? (Or is it a hubspot form, marketo, or some other service?)

I did a test with our unbounce account to make sure the gtm.formSubmit still fires when using a redirect and it shows up for me! The screenshot below is a dummy page I made to test:

44%20PM

Edit: Maybe looking at our example might help you. Here’s the landing page link, alongside the GTM preview link. I recommend using incognito to prevent cookies from conflicting from your current testing.
https://temporary.paracore.com/support/

https://www.googletagmanager.com/start_preview/gtm?uiv2&id=GTM-M8JPL94&gtm_auth=GeTlBZnFz2EQgbF9HJvrhg&gtm_preview=env-19&gtm_debug=x

You should be able to see after the form submission that the gtm.formSubmit event fires, and that the “Unbounce Form Submission” trigger is fired.

Phillip

Awesome! Thanks so much Marc. I think I got it!

Sam_McEwin

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.

Web_Master1

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>

image
image1134×774 19.7 KB

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 🙂

image
image924×381 12.4 KB

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

ParaCoreMarc

Hi Phillip,
If you added GTM though the domain scripts in Unbounce there should be an event that’s fired upon a successful form submission labeled as “gtm.formSubmit”. With this event you can trigger any conversions (instead of using a url based conversion).

In GTM you’ll want to:

  1. Create a new trigger
  2. Set this trigger as a custom event
  3. Event name is “gtm.formSubmit”
  4. You can leave “This trigger fires on… All Custom Events” (unless you want to add conditions)
  5. For your conversion tags in GTM, set the trigger you just made

And remember, you can use the GTM Preview button to have a debug window to test and see what tags and triggers are firing. Any changes you make in GTM while in preview mode need to be saved to update. Just click the “Refresh” button in GTM when preview mode is enabled.

If you have any questions, let me know!
Marc at ParaCore

Phillip

Thanks Marc!

I do have GTM added through Unbounce’s domain scripts integration.

gtm.formSubmit does not fire when I submit the form.
image

When I add the “Form Submission” trigger, gtm.formSubmit fires on page load, NOT when the form is submitted.
image

image

NoahManion

just double checked the GTM script on my pages. both are identical and match the new script you posted.
One page fires the formSubmit event:

29%20AM

One page does not:

50%20AM

NoahManion

The only thing I can think of is that the error is somehow related to page age along with the removal of the jQuery dependency. My testing page (where the formSubmit event fires) is older than the other page (where the formSubmit event doesn’t fire and was created after the jQuery dependency was removed).
As a post script: both pages have the checkbox for jQuery checked on the script manager.

NoahManion

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. ¯_(ツ)_/¯

mike22rtn

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.

Shawn_Ragell

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.

ParaCoreMarc

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

Great Phillip! Glad to hear 😀

K

I just found out my problem as to why this solution wasn’t working for me, the problem: I had manually installed GTM, not used the integration from Unbounce. Once I did that, voila!

D

Hi Marc,

I did everything the way you described it but for some reasons, the gtm.formSubmit event is triggered directly after the page load. I did not use the builtin “Form Submission” trigger but created a custom event with event name “gtm.formSubmit” instead. Do you have any idea how to fire the event only on a (successful) form submission?

Thanks,
Dom

ParaCoreMarc

Hi Dombur,
That’s odd because the gtm.formSubmit event fires on a successful submission only. We still use this implementation and nothing has changed for us.

If you are using a preview container (not published) and testing with the GTM Debugger make sure you are hitting the “refresh” button in GTM otherwise the preview container will not have the latest updates.

As kevinhayes mentioned above, did you use the built-in GTM integration by just adding your container ID?

creativetown

Does this work even if you do not redirect to another page? We just have the pop up ‘Thank You’ message on submission.

Actually, let me add a little more detail. We want to track Unbounce form submissions that do not redirect to a thank you page on submission but use this pop up ‘Thank You’ message. I set up the trigger per the directions here but I am not really sure what tag to apply that to or how to configure a new tag. I could use some help setting up the tag if this solution works with this type of form submission(no redirect)

Andre_Agassi

Hi,

Have you managed your form submission tracking (with popup instead of thank-you page) via GTM?
I faced same issue as you

creativetown

That’s part of what I am trying to figure out. Unfortunately, Unbounce doesn’t provide support for GTM.

ParaCoreMarc

Unbounce does provide support for GTM and you can track it with a popup instead of a thank you page. The comments above outline how to do so. However, there is a bug right now with unbounce where they changed their native integration for GTM which does not fire the gtm.formSubmit issue anymore. I’ve submitted this to the technical to be fixed. I haven’t received word of it being fixed yet.

creativetown

I was actually saying their tech support doesn’t support getting GTM set up properly. I’ve asked and they say they can’t help. Maybe it is just me or I am asking the wrong questions.

ParaCoreMarc

Ah, I see. I misunderstood. Yea I don’t think they will walk you through necessarily. They do have an article about GTM though https://documentation.unbounce.com/hc/en-us/articles/203814014-How-Do-I-Integrate-Google-Tag-Manager-With-Unbounce-

The article though doesn’t say the event and how to implement it, but that’s what I covered in this post (#2) Tracking Form Submissions with GTM

NoahManion

Oh good, I’m glad I’m not crazy. I have a page that I use for testing and noticed that the gtm.formSubmit event fires on that page, but not the one I use for actual lead gen 🙃. As far as I can tell, the two pages are identical and use identical scripts, so I’m not sure what the issue is. I submitted a support request but haven’t heard anything yet.

ParaCoreMarc

Yea if you actually compare their old script to the new one you can actually see that an entire block was removed where the “gtm.formSubmit” used to be. I still haven’t received any response on this being fixed.

New Script

10%20AM

Old Script

27%20AM

ParaCoreMarc

Odd, I wonder why that is then if it’s the exact same script on both pages.

Reply


Terms & ConditionsCookie settings