Google Analytics Integration and Form tracking

cjroe · June 1, 2017, 6:56pm

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:

Only track analytics on the production site at my custom domain
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!

cjroe · June 6, 2017, 7:34pm

Anyone know how to do this? Thanks.

quarshcreative · July 6, 2017, 11:46pm

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!

cjroe · July 12, 2017, 8:32pm

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?

cjroe · November 8, 2017, 8:14pm

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

cjroe · November 9, 2017, 12:36am

Any ideas @PixelGeek, @Waldo

cjroe · November 11, 2017, 11:15pm

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)

PHRyan · April 23, 2018, 5:51pm

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

cjroe · May 10, 2018, 1:43pm

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

michael_lieu · May 7, 2019, 11:53pm

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!

webdev · May 8, 2019, 12:41pm

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.

AzaiStudios · August 22, 2019, 3:11am

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

meredith1 · March 12, 2021, 8:45pm

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!

Flanders1989 · August 31, 2022, 8:23am

Just jumping in here to give my method -

Give your success message a unique ID
Choose “Element Visibility” in GTM with the selection method of “ID”
Add your success message ID to the element ID field
Choose how much visibility you want to trigger the event - 1% will be fine as it will only appear fully after successful submission.
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

Roger_Salazar · February 19, 2024, 7:20pm

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

Roger_Salazar · February 19, 2024, 7:24pm

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