Webflow is the favourite CMS of designers and front-end developers. It gives you visual control over every pixel and clean code under the hood, which makes it one of the easier platforms to track - once you know where to put your scripts. This guide walks through installing Google Tag Manager, GA4, and conversion pixels on a Webflow site, including what to do if you're stuck on the Starter plan where custom code is disabled.
Webflow Plans and Custom Code
Custom code on Webflow is gated by your site plan (not your workspace plan). The Starter site plan does not allow custom code. You need at least the Basic plan to add tracking scripts.
| Site Plan | Custom Code Allowed? |
|---|---|
| Starter (free) | No |
| Basic | Yes |
| CMS | Yes |
| Business | Yes |
| Ecommerce (any tier) | Yes |
If you're on Starter, you have no way to install GTM or any tracking script. Upgrading to Basic ($14/month at the time of writing) is the cheapest path. There's no workaround that doesn't violate Webflow's terms of service.
Step 1: Install Google Tag Manager
Get your two GTM snippets from tagmanager.google.com. Then in Webflow:
- Open your project in the Webflow Designer
- Click the Settings (gear) icon in the left sidebar - or go to your project dashboard and click Settings from there
- Click the Custom Code tab
- Paste the first GTM snippet (the head one) into the Head Code field
- Paste the second snippet (the body one) into the Footer Code field
- Click Save Changes
- Click Publish in the top right and confirm
Important: Webflow's "Footer Code" field is technically before the closing </body> tag, not right after the opening <body> like GTM's official instructions specify. This is fine for the noscript fallback - it still works, just a few hundred lines later in the DOM.
Step 2: Verify GTM is Installed
Visit your live site and open Chrome DevTools (F12 or Right-click → Inspect). In the Console tab, type dataLayer and press Enter. You should see an array, not an "undefined" error. That confirms GTM loaded successfully.
You can also use the Tag Assistant Chrome extension. Install it, enable it on your site, and reload - the extension's icon will turn blue if GTM is detected.
Step 3: Add GA4 Inside Your GTM Container
Now that GTM is loaded on your Webflow site, you can manage all your tracking from inside GTM rather than going back to Webflow each time. To add GA4:
- Open your GTM workspace at tagmanager.google.com
- Click Tags → New
- Click Tag Configuration → Google Tag
- Enter your GA4 Measurement ID (starts with
G-) - Click Triggering → All Pages
- Save the tag and click Submit in the top right
- Add a version name and click Publish
GA4 will start receiving data within minutes. To verify, open GA4 Reports → Realtime in one tab and your Webflow site in another - you should see your visit appear.
Tracking Webflow Forms
Webflow forms are HTML forms that submit to Webflow's backend (or to a custom endpoint if you've configured one). On a successful submit, Webflow shows a success div that you defined in the Designer. This makes form tracking quite reliable: you can listen for either the form submit event itself, or watch for the success div to appear.
The simplest method is to use Webflow's built-in form submit event tracking via GTM. You add a GA4 Event tag, set the trigger to "Form Submission" (a built-in GTM trigger), and configure the trigger to fire only on forms whose action contains your Webflow domain. TrackingCoder handles all of this automatically when you scan a Webflow site.
Tracking Webflow Ecommerce
Webflow Ecommerce uses its own checkout flow. The add-to-cart action triggers a JavaScript event that updates a cart drawer. The checkout happens on a separate URL pattern that Webflow handles with their own checkout pages. Purchases land on a thank-you page that you can customise.
For ecommerce tracking on Webflow, you have two paths:
- Custom JavaScript that hooks into Webflow's data attributes. Webflow Ecommerce uses
w-commerceclasses anddata-commerceattributes that you can listen to. This is the most flexible approach. - Webflow's official ecommerce integrations. Webflow has direct GA4 and Meta Pixel integrations in the project settings. These are easier to enable but offer no customisation.
TrackingCoder uses approach 1, generating the JavaScript and packaging it as a GTM container you import in one click.
Page-Specific Tracking (Per-Page Custom Code)
Webflow has a useful feature that Wix and Squarespace lack: per-page custom code. You can add a tracking script to a specific page only, not the entire site, by going to Page Settings → Custom Code for that page. This is useful for tracking conversions that should only fire on a specific landing page or thank-you page.
However, with GTM installed site-wide, you usually don't need this - you can use GTM triggers to fire tags only on specific URLs. The per-page custom code is only needed for very specific edge cases.
Common Webflow Tracking Mistakes
- Forgetting to publish after editing custom code. Webflow doesn't auto-publish your custom code changes. You have to click Publish in the top right of the Designer or your changes won't go live.
- Adding tracking to the staging URL only. Your
.webflow.iostaging URL is not your live site. Make sure custom code is added to the project (not the staging) and that you've connected your custom domain. - Tracking form submissions before validation. If you fire a tag on a generic submit click without checking
checkValidity(), you'll count failed submissions as conversions.