Streaming live at 10am (PST)

Google Analytics Integration and Form tracking


#1

I'm trying to integrate Google Analytics into my webflow site and I have set up Google Tag Manager in the Custom Code tab. I'm trying to acomplish two things:

  1. Only track analytics on the production site at my custom domain
  2. Fire an event only when a user completes a successful form submission and disregard the interaction if it fails

Is there an integrated, or easy way to set this up?

Thanks!


How to track Google Adwords Conversion in Webflow (Integrated Forms)
Need Help with Google Analytics to track form submission in webflow
Threads closing too soon
#2

Anyone know how to do this? Thanks.


#3

I was literally just on the phone to our Google Adwords guy!

IMHO, the easiest way to implement what you're asking for is to set a Redirect URL as your success state for each form, rather than the standard Success or Error Message div element.

Why? Well, that way you can set page visits to said Success pages as goals in Google Analytics.
Embedding your GA Javascript in the Custom Code section site wide will then do all the work for you.

But make sure to add <meta name="robots" content="noindex"> to these pages, otherwise you'll get all sorts of non-form traffic and that'll mess up your data.

Below is an example of how to do this — /success.
(Ignore the URL in the Action field, and set Method to GET)

You CAN get super fancy and add Link Attributes to buttons and links, but that takes time and it's much more fiddly in both Webflow and GA and probably too out there for what you need at the moment, I assume.

Hopefully that helps!


#4

Thanks for the solution. So, I'm wondering what is the /success URL though? What if I'm using the AJAX submission with Webflow and don't want the page to redirect at all?

Also, how does this fire an event in GA for a form submission? For example, what does it look like from the GA side?


#6

#7

I’m still trying to figure this out. I just want to send a goal event to Google Analytics when someone signs up for a newsletter on the homepage without a redirect. Redirects are a terrible idea! It’s a bad user experience.

Has anyone using Webflow done this yet? Seems like something you do on Day 1 with an analytics set up.

How do I trigger this when the form is successfully submitted on production?

ga('send', 'event', { eventCategory: 'newsletter', eventAction: 'signup', eventLabel: 'hero opt in'});


#8

Any ideas @PixelGeek, @Waldo


#9

I figured this out. It turns out you can use Google Tag Manager with Google Analytics to fire events on specific form submissions through the tool. I will write up a post on it, but basically…

Go to GTM, update the variables to include all form elements

Create a Trigger where the Form ID equals the ID of the form on the page

Create a Tag that fires the event

  • Type: Event
  • Category: Forms
  • Label: Lead Gen - {{Form ID}}



Finally update the Goal in your Google Analytics “Default View” (Where external website visitors will be filter to)



#10

I followed these steps exactly 4 times and it doesn’t work for me for some reason. Any suggestions?


#11

@PHRyan Could you describe more details on what issues your facing?

I also just checked my analytics and it looks like this should be working fine.

It would be nice, however, to dynamically attach parameters to form redirect URLs in Webflow. Currently it’s fixed based on a single redirect. You would have to listen to the event in Javascript and redirect to a thank you page with a dynamic query param.