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

Webflow Ecommerce doesn't expose a standard dataLayer like Shopify does. TagEasy fills that gap with a self-contained data layer bridge — one script that auto-fires page_view, view_item, add_to_cart, and purchase to the dataLayer. Find it on your website's Developer tab in TagEasy and paste it into Project Settings → Custom Code → Head Code.

It reads your product pages' structured data and Webflow's standard commerce selectors, so there's no per-event GTM setup. It is best-effort, though: Webflow exposes no event API, so the purchase event fires without order value. 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 — if you change your Webflow domain, update the GTM container settings and re-publish so the container fires correctly on the new domain.
  • SEO meta tags — pasted Head Code appears AFTER Webflow's built-in meta tags. Don't accidentally override SEO defaults.