This guide covers installing Google Tag Manager (GTM) on your Shopify store and connecting it to the Cookiebot CMP app so your tags respect visitor consent.
Part 1 — Install GTM on your Shopify store
- Create a Google Tag Manager account and web container at tagmanager.google.com. Copy your container ID (it looks like
GTM-XXXXXX). - In your Shopify admin, go to Online Store → Themes → Edit code and open
theme.liquid. Paste the GTM head snippet immediately after the opening<head>tag, and the noscript snippet immediately after the opening<body>tag. Click Save. - Note for Checkout:
theme.liquiddoes not run on checkout pages. For checkout tracking, use Shopify's Customer Events / Web Pixels instead: in Shopify admin go to Settings → Customer events → Add custom pixel and add your tracking code there. The Cookiebot CMP app signals consent to Shopify's Customer Privacy API, and Shopify only runs custom pixels according to the visitor's consent state.
Part 2 — Connect GTM to the Cookiebot CMP app
- Open the Cookiebot CMP app in your Shopify admin and go to Google Consent Mode.
- Enable Google Consent Mode and choose Basic or Advanced. Advanced is recommended by the app — it allows better ad performance through privacy-safe modeling.
- Under Connect IDs, enter your GTM container ID (
GTM-XXXXXX). Optionally, also enter your GA4 Measurement ID (G-XXXXXXXXXX) and your Google Ads Conversion ID (AW-XXXXXXXXX). - Click Save Changes. The yellow "enabled but has not been configured yet" banner disappears once your IDs are saved.
Part 3 — Configure your tags in GTM
How you configure consent checks on your tags depends on how your account was created:
Option A — Account created in the app (app-only account)
Follow the Usercentrics GTM tag process for each service you manage in GTM (example: Google Analytics 4):
- Create the tag: Tags → New → Google Tag, paste your Measurement ID, and under Advanced Settings → Tag firing options choose "Once per page" (recommended).
- Create a User-Defined Variable of type Data Layer Variable. Set the Data Layer Variable Name to the exact service name — e.g.
Google Analytics 4(spelling, capitalization and hyphenation must match). Check Set Default Value and set it tofalse. - Create a Custom Event trigger: check Use regex matching and enter
consent_status.*as the Event Name. Select Some Custom Events and add the condition: [your service variable] contains true. - Attach the trigger to the tag and save.
Repeat these four steps for every service you manage through GTM (Meta Pixel, TikTok, Hotjar, etc.). In each case the Data Layer Variable name must match the service name exactly as it appears in the app's Third-Party Services list, and the trigger condition uses that service's own variable.
Why this works: whenever the visitor makes a consent choice, the app pushes a consent_status event to the data layer together with one variable per service (true = opted in, false = opted out). The regex trigger consent_status.* catches that event, and the condition on the service variable ensures the tag only fires for visitors who consented to that specific service.
Option B — Linked existing Cookiebot account (connector)
The app already injects the banner, so skip step 1 of the Cookiebot GTM deployment guide and start from step 2 ("Controlling cookies"):
- Google tags with built-in consent checks (Google Ads, Analytics, Floodlight, Conversion Linker) adapt automatically — no extra configuration needed.
- For all other tags, set up Additional Consent Checks:
- Create a Custom Event trigger named
cookie_consent_update, firing on All Custom Events. - In each tag: Tag Editor → Advanced Settings → Consent Settings → add the storage categories the tag requires (check your Cookiebot scan report if in doubt).
- Replace the tag's All Pages trigger with the
cookie_consent_updatetrigger — otherwise the tag will not fire on the first page view after consent.
- Create a Custom Event trigger named
- Consent category mapping — GTM's 7 consent types map automatically to the 4 Cookiebot categories:
ad_storage→ marketing — browser storage related to advertising (e.g. cookies)ad_user_data→ marketing — collection of personal data for advertisingad_personalization→ marketing — personal data for remarketing / interest-based targetinganalytics_storage→ statistics — browser storage related to analytics (e.g. visit duration)functionality_storage→ preferences — storage supporting site functionality (e.g. language settings)personalization_storage→ preferences — storage related to personalization (e.g. video recommendations)security_storage→ necessary — authentication, fraud prevention, user protection (always granted)
- Tip — enable the Consent Overview to see the consent configuration of every tag in one place: in GTM go to Admin → Container Settings, check Enable consent overview under Additional Settings and save. A shield icon then appears at the top of the Tags section listing each tag's consent status.
Important: tags with built-in consent checks still load before consent (they only adapt their behaviour). If you do not want any data transmitted to Google before consent, configure those tags with Additional Consent Checks as well — that way they will not load at all until the visitor opts in.
Part 4 — How it works together
The app sets the default consent state (denied) before GTM loads, and updates the consent state the moment the visitor interacts with the banner. Tags in GTM configured per Part 3 then fire only according to the visitor's choice.
Part 5 — Verify your setup
- Open GTM Preview mode and load your storefront.
- In the browser console, check the consent defaults: all consent types should be denied before any banner interaction.
- Accept the banner and confirm the consent update: the relevant consent types should switch to granted.
- Use Google Tag Assistant to confirm your tags fire only after consent is granted.
If tags fire before consent, double-check that each tag in GTM has consent settings configured, and that the app's Google Consent Mode toggle is enabled and saved.
Comments
0 comments
Please sign in to leave a comment.