Using GTM to track clicks on form button for mobile visitors

  • 7 January 2017
  • 5 replies
  • 16 views

Hey guys, our team use Google Tag Manager to track multiple events on our landing pages. We also added Mixpanel to our page via GTM and Mixpanel allows us to capture contact information for each conversion when a visitor clicks the form submit button. It works as intended for desktop, however GTM’s click lisenters do not track a click when submitting a form on a mobile device.

We’ve tested in preview and all clicks are registered on the page when viewing in mobile EXCEPT when you submit the form (the most important click). It’s important for us to get this tracking right as it is the only way we can capture that personal information, we can’t wait to track it on the thank you page because there is no information on that page to capture. Weirdly enough, the clicks track IF you click 1-3 pixels outside of the button, like a halo, you can get it to trigger, but not when you click directly on the button.

We’re trying to track when visitors on mobile devices submit forms. I’ve read that the typical formSubmit event listener does not work - however neither does the typical click listener work when viewing for mobile.

I believe it has something to do with the fact that it’s treated as a “touch” event OR that Unbounce uses some type of code that stops all JS from working as it normally does.

Any advice on how I track clicks on the form submit button when mobile users submit forms?


5 replies

Userlevel 7
Badge +3

Hi @gregg.guzman,

Have you tried pausing the form submit, firing off the Mixpanel submit event and then un-pausing the form submit?

Best,
Hristian

P.S. Events around forms on Unbounce are a bit funky and had a few similar issues with Hotjar picking up form submits as well as some Stripe integrations not working on mobile phones.

When you say pausing the “form submit” what are you referring to? Also - what do you mean when you say "firing off the Mixpanel event?

Userlevel 7
Badge +3

Hi Gregg,

By pausing the form submit, I’m referring to the actual event. If all fields are validate correctly, upon a click/touch of the form’s button the form is sent to the Unbounce backend to be recorded as a lead/conversion.

You can tap into this, pause it, fire any events AND/OR tracking you need and un-pause it to complete the submission. This all happens within a fraction of a second so the visitor won’t see any noticeable change.

Now the problem with most of these analytics helpers is that if you are tracking clicks rather than the actual events, you’ll end up over reporting the actual numbers.
Simply because tracking clicks assumes that all fields would be correctly validated on the first try which rarely happens in 100% of the cases.

Best,
Hristian

Userlevel 7
Badge +3

One more thing, I learned the hard way back in the day using Optimizely to track goals - Clicks and nowadays touch are not reliable metric.

When possible always use events to track any data you need to rely on.

When you say event - are you meaning Google Tag Manager trigger? Or where would I pause the “event”? Unbounce?

Also here is a GIF showing you the issue. If you watch it, know that I turned on my Google Analytics preview so I could debug. I also put my Chrome browser into mobile/responsive viewing mode which basically treats the page as if its on a mobile device – so all clicks are now “touches”. As you can see when I click on the page it registers GTM events called “gtm.click” – however when I click on the button it does not register any clicks. When I click on the edges of the button or the pixels right outside of the button it registers clicks and the button shows it’s “down-state” with a darker background color.

Reply