If your OpenCart store targets EU visitors, you must comply with GDPR by collecting user consent before firing ad or analytics tags. Google, Meta, TikTok, and others now require prior consent for personalized tracking.

---

🧰 Prerequisites

Component	Description
OpenCart v3/v4	With theme access
GTM Web Container	Installed and active
Cookiebot	Or any consent tool (e.g., OneTrust)
Consent Mode v2	Supported by Google for GDPR

---

🎯 Objective

✅ No tracking until user consents
✅ GA4, Google Ads, Meta Pixel, etc., only fire after approval
✅ Custom OpenCart events (e.g., purchase, add_to_cart) tracked with consent
✅ Audit-ready setup

---

⚙️ Step 1: Install Cookiebot in OpenCart

Place the Cookiebot script in catalog/view/theme/YOUR_THEME/template/common/header.twig before GTM:

<!-- Cookiebot Script -->
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js"
    data-cbid="YOUR_DOMAIN_GROUP_ID"
    data-blockingmode="auto"
    type="text/javascript"></script>

Replace YOUR_DOMAIN_GROUP_ID with your Cookiebot ID.

---

🏷️ Step 2: Add Google Tag Manager Snippet

Still in header.twig, add GTM after Cookiebot:

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

And the <noscript> version in footer.twig:

<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: Add Consent Initialization Tag in GTM

In GTM:

• Tag Type: Consent Initialization – Configuration
• Trigger: Consent Initialization – All Pages
• Settings:

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

This ensures no data is sent before consent is granted.

---

🔁 Step 4: Sync Cookiebot Consent with Google Consent Mode

Create a Custom HTML tag in GTM:

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

• Trigger: Consent Initialization – All Pages

---

🛒 Step 5: Push Custom eCommerce Events to dataLayer in OpenCart

Example: Purchase event in success.twig:

<script>
dataLayer = dataLayer || [];
dataLayer.push({
  event: 'purchase',
  transaction_id: '{{ order_id }}',
  value: {{ total }},
  currency: '{{ currency }}',
  items: [
    {% for product in products %}
    {
      item_id: '{{ product.product_id }}',
      item_name: '{{ product.name }}',
      quantity: {{ product.quantity }},
      price: {{ product.price }} 
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ]
});
</script>

Do not fire this until user has given statistics or marketing consent, depending on usage.

---

🔒 Step 6: Block Tags by Consent in GTM

For GA4, Google Ads, and others:

1. Open each tag
2. Expand Consent Settings
3. Enable Built-in Consent Checks
4. Set the required types:

Tag	Required Consent
GA4	analytics_storage
Google Ads	ad_storage
Meta/TikTok	Use trigger conditions + Cookiebot JS variable

---

🧪 Step 7: Debugging Consent and Event Tracking

A. GTM Debug View

• Use GTM Preview Mode (?gtm_debug=x)
• Watch for tags blocked by consent

B. Chrome DevTools

• Console: Run Cookiebot.consents to see state
• Network tab: Check if GA4 collect requests are blocked until consent

C. Google Tag Assistant

• https://tagassistant.google.com/
• View tag status and consent checks

---

🔍 Step 8: Optional – Store Consent State for Logged-In Users

In header.twig, push to dataLayer:

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

Use this to store consent logs in your CRM/backend for compliance.

---