Google Analytics Integration and Form tracking

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!

1 Like

Anyone know how to do this? Thanks.

1 Like

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!

1 Like

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?

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'});

1 Like

Any ideas @PixelGeek, @Waldo

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)


7 Likes

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

@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.

Hi @quarshcreative, I’m using your method for a client of mine. I’ve managed to create the form redirect to a new page. Could you explain where I would put ? Sorry I am new to this - Thanks!

Hi @michael_lieu - Setting up a destination goal is something you do in GA.

Here is a link to information about configuring/setting up goals.

Hi all, I found this video that seams to be helpful

2 Likes

Came across this thread while looking for /success page templates.

I’m curious if anyone has tried setting up a redirect from /contact > /contact?success?

Then, you can create a goal in GA for the event, and skip setting up google tag manager. You can also save the extra step of creating a dedicated /thank-you or /success page.

This seems like it might be an easy lightweight solution but I’m not sure if I’m missing anything. Anyone have thoughts? Thanks!

Just jumping in here to give my method -

  1. Give your success message a unique ID
  2. Choose “Element Visibility” in GTM with the selection method of “ID”
  3. Add your success message ID to the element ID field
  4. Choose how much visibility you want to trigger the event - 1% will be fine as it will only appear fully after successful submission.
  5. set it to fire your lead generation or blog submission event in GA4

I have used this for a couple of months now and seems to work just fine. If anyone has thoughts or improvements/warnings then I am open to hearing about them :slight_smile:

1 Like

I just tried this on my contact form and all it did was reset the page. I didn’t get the success state message. I since removed the redirect. I attached screenshots to show the different states.


https://preview.webflow.com/preview/thor-helical-usa-2022-232792c606a64c15a?utm_medium=preview_link&utm_source=designer&utm_content=thor-helical-usa-2022-232792c606a64c15a&preview=e3e12d71003f063356117738c18a23ff&pageId=65a4635728d2b53b53027dce&locale=en-US&workflow=preview

I’m looking for a clean way to track submission forms without creating a new page. I don’t see the ability to apply an ID to the success state. Is there a step missing? Are you applying it to a div within the success message like the example below

https://preview.webflow.com/preview/thor-helical-usa-2022-232792c606a64c15a?utm_medium=preview_link&utm_source=designer&utm_content=thor-helical-usa-2022-232792c606a64c15a&preview=e3e12d71003f063356117738c18a23ff&pageId=65a4635728d2b53b53027dce&locale=en-US&workflow=preview