Google Tag Manager integration
Google Tag Manager is one container script that loads and fires your other tags: GA4, ad pixels, heatmaps. We install it once on Framer, Webflow, Astro or Next.js, connect it to your cookie banner through Consent Mode v2, and set up a clean data layer so marketing can add tags without touching the site. We run GTM on designme.agency too.
| Complexity | Medium |
|---|---|
| Method |
|
| Typical setup | Half a day to 1 day |
| What we do | We install the container, set consent defaults, define data layer events and audit the tags at launch. |
| Category | Analytics |
Setup by platform
How we set up Google Tag Manager
Framer
- Embed
- Native
The two GTM snippets go in Framer’s site custom code, at the start of the head and the start of the body. Framer’s native Cookie Banner takes the container ID and passes consent choices through Consent Mode.
Webflow
- Embed
- Native
We paste the container into Site settings, Custom code. Webflow’s Google site tools app can also add it, but its noscript tag can’t be blocked by script-based consent tools, so for strict EU sites we install by hand.
Astro
- Embed
The container goes in the shared layout below the consent defaults and any data layer setup. With @astrojs/partytown and forward: ['dataLayer.push'], it can run off the main thread.
Next.js
- Embed
<GoogleTagManager gtmId="GTM-…" /> from @next/third-parties in the root layout, and sendGTMEvent for custom events. It supports a custom script URL for server-side tagging.
Use cases
What teams use it for
One place for every tag
GA4, LinkedIn and Meta pixels and heatmaps live in GTM, so a new tag needs no site deploy.
Click and form tracking
Built-in click triggers and a few data layer events cover CTAs, outbound links and form submits.
One consent switch
The cookie banner sets Consent Mode once and every Google tag, plus tools like Clarity, follows it.
Before you add it
What to watch out for
Data layer
Declare the data layer first
window.dataLayer is set up above the container snippet, with one dataLayer per page. We document event names so analytics and ads read the same data.
Consent and GDPR
Set defaults before tags fire
Defaults (denied in the EEA) load before GTM and the banner updates them. Basic mode waits for a choice; advanced sends cookieless pings.
Performance
Containers grow
Every tag added in GTM is page weight nobody reviews. We audit the container at launch and keep tags behind triggers instead of All Pages.
FAQ
Questions about Google Tag Manager
Can we track button clicks on a Framer site without code?
Yes. Turn on GTM’s built-in click variables and use a click trigger matched on the link URL, text or CSS class. Framer documents this setup.
Should a Next.js site use both GoogleTagManager and GoogleAnalytics?
No. Next.js recommends setting up GA4 inside GTM when GTM is already on the page, so the tag loads once.
Does GTM itself store personal data?
GTM loads other tags; what is collected and where it is stored depends on those tags. That is why consent is set up in GTM rather than per tool.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call