With the increasing enforcement of GDPR, ePrivacy, and Consent Mode v2 (required by Google), every eCommerce site must implement a consent-compliant tracking setup. For OpenCart, combining Google Tag Manager, Cookiebot, and Google Consent Mode v2 provides a robust framework.

---

🧰 Prerequisites

Component	Version/Details
OpenCart	v3.x or v4.x
GTM (Web)	Installed properly
Cookiebot	Free or premium plan
Consent Mode v2	Enabled via GTM or script tag

---

🔧 Step 1: Register & Configure Cookiebot

1. Go to https://www.cookiebot.com
2. Register your site & obtain your domain group ID
3. Configure the consent categories:
   • Necessary
   • Preferences
   • Statistics
   • Marketing

---

📦 Step 2: Add Cookiebot Script to OpenCart Theme

Edit catalog/view/theme/YOUR_THEME/template/common/header.twig and insert the script before the GTM snippet:

<!-- 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 ID from Cookiebot dashboard.

---

🏷️ Step 3: Add GTM to Header & Body

In header.twig, below Cookiebot:

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

In footer.twig, before </body>:

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

---

🎛️ Step 4: Enable Consent Mode v2 in GTM

A. Add Consent Initialization Tag in GTM:

• Tag Type: Consent Initialization – Configuration
• Tag Name: Consent Mode - Default
• Consent Types:
  • ad_storage: denied
  • analytics_storage: denied
  • functionality_storage: granted
  • personalization_storage: denied
  • security_storage: granted

✅ This sets default denied values before any consent is granted.

---

B. Add Cookiebot Consent Sync Tag

• Tag Type: Custom HTML
• Trigger: Consent Initialization – All Pages

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

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

✅ This syncs Cookiebot’s categories with Google’s Consent Mode APIs.

---

🔒 Step 5: Assign Consent Settings to Tags in GTM

Go to each GTM tag (e.g., GA4, Google Ads, Meta Pixel, etc.):

• Expand “Consent Settings”
• Enable Built-in Consent Checks
• Assign appropriate purposes:

Tag	Required Consent
GA4	analytics_storage
Google Ads	ad_storage
Meta Pixel	marketing (via trigger/variable)
TikTok, Pinterest	marketing (via trigger/variable)

---

⚙️ Step 6: Block Non-Compliant Tags via Triggers

For non-Google tags (e.g., Facebook Pixel), create a trigger:

Trigger: Consent – Marketing Allowed

• Type: Custom Event
• Event Name: CookieConsentDeclaration
• Condition:

JavaScript Variable: Cookiebot.consents.marketing equals true

Apply this trigger to Meta/TikTok/Other marketing tags.

---

🧪 Step 7: Debug & Validate Consent Mode

Tool	Usage
GTM Preview Mode	Check which tags are blocked/fired
Chrome DevTools → Console	Check output of gtag() and Cookiebot state
Google’s Consent Mode Validator	https://tagassistant.google.com/
Cookiebot Admin → Reports	See consent logs and user preferences

---

🔄 Optional: Store Consent with User in OpenCart

To associate consent with customer ID:

In catalog/controller/common/header.php:

if ($this->customer->isLogged()) {
    $data['customer_id'] = $this->customer->getId();
}

In header.twig, store it:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  customer_id: '{{ customer_id }}'
});
</script>

Store consent in your CRM via webhook if needed.

---

🧠 Advanced Tips

• Enable Cookie Declaration page from Cookiebot for compliance
• Implement Consent Logging server-side for audit trails
• Support auto-language detection with data-culture attribute

---