Install on Webflow

Webflow has a built-in Custom Code panel for site-wide head + footer injection. No plugin needed — paste the snippets and publish.

Plan requirement

Site-wide custom code requires a paid Webflow plan (Basic or above). Page-level custom code works on the Starter plan but you'd have to paste GTM into every page individually — not recommended.

Step 1 — Open Custom Code

1. In your Webflow Designer, click your site name top-left → Project Settings
2. Top nav → Custom Code

Step 2 — Paste GTM into Head Code

Find the Head Code textarea. Paste the GTM head snippet from the wizard's Webflow Install tab. Click Save Changes.

Step 3 — Paste noscript into Footer Code

Find the Footer Code textarea. Paste the GTM noscript snippet. Click Save Changes.

Step 4 — Publish

Custom Code only takes effect on the published site, not in the Designer preview. Hit Publish (top-right) and select your publishing domains.

Pre-built event templates for Webflow

• webflow:ga4:form_submit — Webflow forms (.w-form form)
• webflow:ga4:cta_click — Webflow button clicks (.w-button)
• webflow:ga4:video_play — embedded videos (.w-video)

Verify in GTM Preview

1. GTM → click Preview
2. Enter your .webflow.io URL (or your custom domain if attached)
3. Interact with a form / button / video
4. Each should fire the corresponding tag in GTM's debug panel

Webflow forms — important note

Webflow forms post to a Webflow-hosted endpoint by default. The form_submit event fires on the form's native submit handler, so it triggers before Webflow's success/error feedback. If your form redirects after submit (you set a custom action URL), the event fires before the redirect happens. Both behaviors are correct.

E-commerce on Webflow

If you use Webflow Ecommerce, the platform doesn't expose a standard dataLayer like Shopify does. You can still track:

• Product views — by setting view_item as a custom event on the product page template via GTM Custom HTML tag
• Add to cart — by listening for the cmtotal change event Webflow fires on cart updates
• Purchase — Webflow Ecommerce's order confirmation page; fire a Custom HTML tag with the order data Webflow exposes in the URL params

For higher-volume e-commerce, Shopify or WooCommerce have a better ecosystem.

Common gotchas

• Custom Code only fires on published sites — the Designer preview doesn't load Head/Footer Code. Always test on the published .webflow.io URL.
• Custom domain — once you attach a custom domain, update NEXTAUTH_URL and the Google OAuth redirect URI to match if you want sign-in to work on the live domain.
• SEO meta tags — pasted Head Code appears AFTER Webflow's built-in meta tags. Don't accidentally override SEO defaults.