Tracking Only When Consent is Given: Tag Blocking Strategy for OpenCart (GTM + Cookiebot)

Standard

Modern privacy regulations like GDPR, ePrivacy, and Google’s Consent Mode v2 require that analytics, marketing, and personalization tracking only occur after valid user consent. In an OpenCart setup, that means you must block GTM tags until the user opts in—and fire them conditionally based on category-level consent.

🧰 Prerequisites

Component Details
OpenCart v3.x/v4.x Installed & editable theme
GTM Web Container Installed via theme
Cookiebot Consent management tool (free or paid)
Google Consent Mode Required for GA4, Ads, etc.

⚙️ Step 1: Install Cookiebot in OpenCart

A. Insert Cookiebot Script in header.twig

<!-- Cookiebot -->
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js"
  data-cbid="YOUR-DOMAIN-GROUP-ID"
  data-blockingmode="auto"
  type="text/javascript"></script>
<!-- End Cookiebot -->

✅ Replace YOUR-DOMAIN-GROUP-ID with your actual Cookiebot group ID.

B. Load This Before GTM in the <head> to block default scripts.

🏷️ Step 2: Install GTM in OpenCart Theme

Place the GTM Web container just after Cookiebot, also in header.twig:

<!-- Google Tag Manager -->
<script>
window.dataLayer = window.dataLayer || [];
</script>
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
<!-- End GTM -->

Place the noscript iframe in footer.twig before </body>:

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

🧠 Step 3: Use Consent Mode (v2) Defaults

In GTM:

  1. Add a new Consent Initialization Tag
  2. Set all tracking types to denied:

ad_storage: denied
analytics_storage: denied
functionality_storage: granted
security_storage: granted
personalization_storage: denied

This prevents tags from firing before consent.

🧩 Step 4: Sync Cookiebot Consent with GTM Tags

Create a new Consent Update Tag in GTM (Custom HTML):

<script>
window.addEventListener('CookieConsentDeclaration', function () {
  const consents = Cookiebot.consents;

  gtag('consent', 'update', {
    ad_storage: consents.marketing ? 'granted' : 'denied',
    analytics_storage: consents.statistics ? 'granted' : 'denied',
    personalization_storage: consents.preferences ? 'granted' : 'denied',
    functionality_storage: 'granted',
    security_storage: 'granted'
  });
});
</script>

  • Trigger: Consent Initialization – All Pages
  • This updates Google’s consent mode dynamically when Cookiebot loads

🧱 Step 5: Set Consent Requirements for Tags

For each GTM Tag (GA4, Ads, Meta, TikTok, etc.):

  1. Open tag settings
  2. Expand Consent Settings
  3. Enable Built-In Consent Checks
  4. Choose the relevant categories:

Tag Required Consent
GA4 Tag analytics_storage
Google Ads Tag ad_storage
Meta/TikTok Pixel Triggered only if consent.marketing is true

🔁 Step 6: Create Consent-Based Custom Triggers (For non-Google Tags)

A. Variable: JS - marketing_consent

  • Type: JavaScript Variable
  • Value:

function() {
  return window.Cookiebot && Cookiebot.consents && Cookiebot.consents.marketing;
}

B. Trigger: Marketing Consent Trigger

  • Type: Custom Event
  • Event name: CookieConsentDeclaration
  • Condition: JS - marketing_consent equals true

Apply this trigger to Meta Pixel, TikTok, Hotjar, or any non-Google tag.

🚫 Step 7: Block Tags from Firing by Default

Every tag should be blocked unless consent is granted. This means:

Tag Blocked by default? Fires only on…
GA4 ✅ analytics_storage = granted
Meta Pixel ✅ Marketing consent trigger
TikTok ✅ Marketing consent trigger

✅ Ensure no fallback tags are firing due to pageview-based triggers.

🔎 Step 8: Debug & QA

Tools:

Tool What It Shows
GTM Preview Mode Trigger conditions + tag firing
Cookiebot Reports Consent category log
Chrome DevTools Cookies, dataLayer events, tag payloads
Google Tag Assistant Consent status and tag behavior
Google Consent Debug window.gtag.get() → view consent status

🔒 Optional: Store Consent in OpenCart DB

Track consent state with logged-in users by pushing customer_id into dataLayer, then linking to backend logs for compliance.

<script>
dataLayer.push({
  customer_id: '{{ customer_id }}',
  consent_marketing: Cookiebot.consents.marketing
});
</script>

🧠 Advanced Tips

  • Use dataLayer.push({event: 'consent_updated'}) for testing tag firing logic
  • Audit firing in server logs or tag-based monitoring
  • Add fallback HTML for users with JavaScript disabled
  • Set up country-level blocking if required (via Cookiebot geo-targeting)

Related posts:

Default ThumbnailGTM + Cookiebot + Consent Mode v2 in OpenCart: A Complete Setup Guide Default ThumbnailConsent Mode v2 Implementation in OpenCart Using GTM Default ThumbnailUsing Consent-Conditional Tags in GTM for OpenCart’s Multiple Ad Tools Default ThumbnailData Governance and Consent Management in Server-Side Tagging Default ThumbnailBuilding a GDPR-Compliant Server-Side Data Collection Stack Default ThumbnailOpencart GA4 Enhanced eCommerce Tracking using Google Tag Manager Default ThumbnailSetting Up Google Ads Enhanced Conversions in OpenCart (with Code & GTM) Default ThumbnailOpencart GA4 eCommerce Tracking using Google Tag Manager

Leave a Reply

Your email address will not be published. Required fields are marked *