How to Set Up Conversion Tracking on Webflow
Webflow gives you less control than you think. Here is where tracking breaks and how to build it so it survives a redesign.
Webflow builds beautiful sites and gives you just enough tracking control to get yourself into trouble.
The custom code box makes everything feel easy. Paste a script, publish, done. Then six months later the site gets redesigned, somebody clones a page, and half your conversions disappear with no warning.
Here is how to set Webflow tracking up so it survives the next redesign.
Where Webflow tracking actually breaks
Four places, in order of how often I see them.
Form submissions. Webflow forms do not reload the page. They swap a success message in. If your conversion is tied to a thank you page URL that never loads, you are tracking nothing.
Page level custom code. Code added to one page does not follow when someone duplicates that page for a new campaign.
Ecommerce checkout. Webflow Ecommerce gives you limited access to the checkout flow, and the order confirmation page behaves differently to the rest of the site.
Publishing. Custom code only goes live when you publish. People forget, then wonder why the tag is missing.
Install GTM once, at the site level
Go to Site Settings, then Custom Code. Put the GTM head snippet in the Head Code box and the noscript snippet in the Footer Code box.
Site level, not page level. This is the single most important decision in this article. Site level code goes on every page automatically, including pages that do not exist yet.
Then publish. Webflow will remind you, but publish anyway.
Everything else goes through GTM from here. If you need a hand getting a GTM container structured properly, this one covers it: Google Ads conversion tracking with GTM.
Tracking Webflow forms properly
This is where most Webflow sites lose their leads.
Option one: the success message listener
When a Webflow form submits successfully, the form block gets swapped for an element with the class w-form-done. You can listen for that.
In GTM, create a Custom HTML tag that watches for the success state and pushes an event to the data layer. Something along the lines of listening for the Webflow form submit event and pushing a named event with the form name attached.
Then trigger your Google Ads conversion and GA4 event on that custom event, not on a page view.
Option two: a real thank you page
Set the form to redirect to a dedicated thank you page in the form settings. Then track a page view on that URL.
This is less elegant but far more reliable, and it gives you a page you can use for remarketing and for a follow up offer. On most lead generation sites I recommend this one.
Either way, include the form name in what you send. A site with six forms and one conversion called Form Submit tells you nothing useful.
Do not track every form as a conversion
Webflow makes it easy to add forms everywhere. Newsletter signup, contact, download, demo request, all in one site.
If all of them count as the same Google Ads conversion, Smart Bidding will happily buy you newsletter signups all day long, because they are cheap. Your demo requests will quietly dry up.
Separate them. One conversion action per form intent, and only the ones that represent real business go in as primary. More on that trap here: track qualified leads, not form fills.
Webflow Ecommerce specifics
If you are running Webflow Ecommerce, the order confirmation page is where your purchase event lives.
Webflow exposes order data on that page, so you can read the order total and order ID from the page and push them into the data layer with a small script in the page settings for the confirmation page only.
Two things to watch:
The confirmation page can be revisited. Guard against double firing by checking whether you have already recorded that order ID.
The value needs to be a plain number. If you read the price from visible text you will pick up the currency symbol and the tag will silently send a zero.
The redesign problem, and how to survive it
Webflow sites get redesigned more than most, because redesigning them is genuinely pleasant. Tracking does not survive that unless you plan for it.
Three habits help:
Keep everything in GTM, not in Webflow. GTM is not touched by a redesign.
Trigger on data layer events and form names rather than CSS classes and element positions. Class names change every redesign. Form names usually do not.
Write down your triggers somewhere outside Framer and Webflow. A short document listing every conversion, what fires it and why, is worth more than it sounds.
Testing before you announce it works
Use GTM Preview mode on the published site, not the Webflow designer preview. They behave differently.
Submit every form once. Confirm each one fires exactly one event with the right form name. Then check Google Ads the next day for the conversion to appear, because the interface lags.
There is a full pre launch checklist here: how to test conversion tracking before launch.
What Webflow cannot do
Being honest about the limits saves you time.
You cannot run a server side container from Webflow hosting. You cannot easily modify checkout in Webflow Ecommerce. You cannot set first party cookies from your server, which means Safari will cap your analytics cookies at seven days.
If you need those things, the site stays on Webflow and the tracking moves to a server side container on a subdomain. That works well and is a common setup: server side GTM on a custom subdomain.
Need this built properly?
Webflow tracking is simple once the events are real events and the code lives in one place. I set up and repair tracking for ecommerce stores and lead generation businesses, so the numbers in your ad accounts match the money in your bank account.
Have a look at what I do, or book a call and we can go through your setup together.
