E-commerce Storefront — GDPR Banner + GTM
A single-page storefront selling into the EU. No backend — consent lives entirely in a signed browser cookie. The banner blocks Google Ads and Analytics tags until the shopper opts in, using GTM's own Consent Mode v2 rather than hand-rolled script gating.
What this demonstrates
- Zero-backend, opt-in (GDPR-model) setup
- Google Tag Manager + Consent Mode v2, so GTM triggers stay in charge of tag firing
urlPassthrough+adsDataRedactionfor cookieless ad modelling when a shopper declines- Branded banner copy and buttons via
profileOverride
Setup
components/ConsentSetup.tsx
tsx
'use client' // remove this line outside Next.js
import { useEffect } from 'react'
import { ConsentiSetup } from '@consenti/ui'
export function ConsentSetup() {
useEffect(() => {
const widget = new ConsentiSetup({
compliance: { type: 'opt-in' },
profileOverride: {
mainBanner: {
heading: 'Your privacy, your choice',
htmlText:
'We use cookies to run this store and, with your permission, to measure and personalise ads.',
buttons: {
'accept-all': { text: 'Accept All', style: 'primary', action: 'custom', cookies: '*' },
'reject-optional': { text: 'Reject Optional', style: 'secondary', action: 'custom', cookies: '!' },
'customize': { text: 'Manage Cookies', style: 'text', action: 'manage' },
},
},
},
utils: {
gtm: {
containerId: 'GTM-XXXXXX',
urlPassthrough: true, // preserve click IDs (gclid/fbclid) for cookieless modelling
adsDataRedaction: true, // redact ad click IDs when ad_storage is denied
},
},
})
return () => widget.destroy()
}, [])
return null
}No manual gtag('consent', ...) calls needed — Consenti calls the real Consent Mode v2 API for you on init (default denied) and again on every submission, via the standard stub-queue pattern so it works whether your GTM snippet loads first or last.
💡Add a Manage Cookies link in your footer that calls
widget.showModal() so returning shoppers can change their mind without clearing cookies. See BannerTrigger in the Events reference for a ready-made footer trigger.Gate the product-recommendation pixel
Anything beyond GTM itself — a marketplace pixel, a chat widget — gate the same way, keyed to the category it belongs to:
ts
import { CategoryScript } from '@consenti/ui'
new CategoryScript({
categoryId: 'marketing',
widget,
src: 'https://cdn.marketplace.example.com/pixel.js',
})Related documentation