Webflow tracking

Webflow Conversion Tracking: GA4, Google Ads & Meta CAPI Setup

This is for teams who build on Webflow and run Google or Meta ads to it, whether the goal is demo requests or ecommerce orders. Webflow makes design easy, but its forms and checkout don't hand ad platforms clean conversion data out of the box. I install GTM properly, track forms and orders reliably, and add server-side events where they help.

Webflow · Ecommerce & lead gen

Native Webflow form submissions tracked without a redirect
Webflow Ecommerce purchases sent with order value
Consent banner wired into Consent Mode v2
Staging and webflow.io traffic kept out of your reports

Book a free Webflow audit call Chat on WhatsApp

Quick answer

Proper Webflow tracking means installing GTM in the site-wide custom code, tracking native forms by their success state rather than a thank-you page, and capturing Webflow Ecommerce orders with value on the order confirmation page. Adding server-side events from Webflow's form and order webhooks makes Google Ads and Meta CAPI data more complete.

Tracking flow

How tracking works on Webflow

The events I set up on Webflow, and where each one is sent.

01Webflow siteVisitors browse, sign up and buy

02Tracked eventsgenerate_lead, contact_click, book_call_click

03Google Tag ManagerOne web container for all tags

04Server-side GTMOn your own subdomain

Sent to

GA4Ecommerce and lead events
Google AdsConversions
MetaPixel + Conversions API

Why it breaks

Why Webflow tracking goes wrong

Forms don't redirect by default

A native Webflow form submits in the background and swaps in a success message on the same page. A page-view trigger never fires, and a plain click trigger counts failed and spam attempts as leads.

Code scattered across settings and embeds

Scripts can go in site-wide custom code, page settings or Embed elements, and old pixels added by previous designers tend to linger in all three. Custom code also only runs on the published site, so the Designer preview tells you nothing.

No ecommerce dataLayer

Webflow Ecommerce doesn't push GA4-style ecommerce events to a dataLayer. Without custom work, purchases arrive without value, items or a transaction ID, so you can't deduplicate or report revenue properly.

Staging domain pollutes the data

Every Webflow project has a webflow.io staging domain. If the tags fire there too, test submissions from your team end up as conversions in Google Ads and Meta.

Consent added as an afterthought

Cookie banners are often dropped in as a separate script that has no connection to the tags. Tags either fire before consent or never fire at all, and Consent Mode v2 signals are missing.

What I set up

My Webflow tracking setup

GTM & GA4 foundation

GTM in the site-wide head and body custom code, with duplicate pixels removed
GA4 configuration with key events that match your goals
Rules that block tags on the webflow.io staging domain
Cross-domain setup if booking or checkout runs on another domain
Tidy container naming so your team can maintain it

Form & lead tracking

Success-state listener for native Webflow forms
Form name and page captured with each lead
Click tracking for email, phone and booking links
Hidden fields that store gclid and UTMs with the submission
Enhanced conversions for leads in Google Ads

Ecommerce tracking

view_item, add_to_cart and begin_checkout events
purchase with order ID, value, currency and items on the confirmation page
Google Ads purchase conversion with value
Meta Pixel and Conversions API purchase with deduplication

Server-side & consent

Server-side GTM on Stape or Google Cloud
Webflow form and order webhooks routed to Meta CAPI
Consent banner connected to Consent Mode v2
Testing in Tag Assistant, GA4 DebugView and Meta Events Manager

Event map

Events I track on Webflow

Event	When it fires	Sent to
`generate_lead`	Native form shows its success message	GA4, Google Ads, Meta Pixel + CAPI
`contact_click`	Click on a mailto: or tel: link	GA4, Google Ads
`book_call_click`	Click on a booking button or scheduler link	GA4, Meta Pixel
`view_item`	Product page viewed	GA4, Meta Pixel (ViewContent)
`add_to_cart`	Add to cart button clicked	GA4, Meta Pixel + CAPI
`begin_checkout`	Checkout page loaded	GA4, Meta (InitiateCheckout)
`purchase`	Order confirmation page loaded	GA4, Google Ads, Meta Pixel + CAPI

Process

How the setup works

01
Audit
I check what's installed in site settings, page settings and embeds, and test what your forms and checkout currently report.
02
Plan
We agree on the conversions that matter, such as a demo request, a quote form or a purchase, and how each one should be valued.
03
Build
I set up GTM, the form and ecommerce events, consent and, where it helps, server-side GTM fed by Webflow webhooks.
04
Publish and test
Because custom code only runs on the published site, I publish and test real submissions and test orders on your live domain.
05
Hand over
You get a short document listing every tag and event, and what to watch when you redesign pages.

How I track native Webflow forms

A Webflow form doesn't load a new page when it's submitted; it hides the form and shows the success block. I use a small listener that watches for that success state, then pushes a generate_lead event with the form name to the dataLayer. Failed submissions show the error block instead, so they're not counted.

If you'd rather have a thank-you page, Webflow's form settings let you set a redirect URL. That works too, but people who refresh or bookmark that page can inflate your numbers, so I usually prefer the success-state method.

Webflow Ecommerce and server-side events

For stores, I build the ecommerce events myself, reading product and order details from the page, so GA4, Google Ads and Meta all receive the same order ID and value.

Webflow can also send webhooks when a form is submitted or an order is placed. Routing those to server-side GTM gives Meta CAPI a server copy of each lead or purchase. A shared event ID lets Meta deduplicate it against the browser pixel.

FAQ

Webflow tracking FAQ

How do I add Google Tag Manager to Webflow?

Paste the GTM head snippet into the head code and the noscript snippet into the body code in your site-wide custom code settings, then publish. Custom code needs a paid site plan and only runs on the published site, not in the Designer.

Why isn't my Webflow form showing as a conversion in Google Ads?

Usually because the conversion is set to fire on a thank-you page that never loads; native Webflow forms show a success message instead. Track the success state or set a redirect URL in the form settings, then point the Google Ads conversion at that event.

Does Webflow support Meta Conversions API?

Not with a built-in toggle for full CAPI events. I send server events through server-side GTM, using the browser dataLayer and, where useful, Webflow's form and order webhooks, with deduplication against the Pixel.

Can you track Webflow Ecommerce purchases with revenue?

Yes. I fire the purchase event on the order confirmation page with the order ID, total and items, and send it to GA4, Google Ads and Meta. The order ID stops the same order being counted twice.

How do I stop staging traffic counting as conversions?

I add a hostname condition so tags only fire on your live domain, not the webflow.io staging address. It's a small change that keeps test submissions out of your ad data.

How do I handle cookie consent on Webflow?

Use a consent platform that supports Google Consent Mode v2 and load it before your tags, either through GTM or site-wide custom code. I then check that tags respect each consent state before going live.

Guides

Want your Webflow tracking fixed?

Get a free audit of your tracking and ad account. Usually replies within 1–2 hours.

Book a free audit call Chat on WhatsApp