Combining GA4’s behavioral segmentation with CleverTap’s real-time messaging engine unlocks powerful retargeting strategies. You can capture user behavior on your OpenCart store, build GA4 audiences (like cart abandoners, category viewers, etc.), and automatically sync them to CleverTap for

• Push Notifications
• In-app messages
• Emails & SMS
• WhatsApp campaigns

🧰 Prerequisites

Tool / Platform	Purpose
OpenCart v3/v4	Frontend event collection
Google Tag Manager	Send events to GA4
Google Analytics 4	Audience segmentation
BigQuery	Query & export GA4 audiences
CleverTap Account	Retargeting engine with API enabled
Server/Cloud Func	To push users from BigQuery to CleverTap

---

📦 Step 1: Track Key Events in OpenCart with GTM

A. Add add_to_cart in product.twig:

<script>
document.querySelector('.btn-add-to-cart').addEventListener('click', function() {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: "add_to_cart",
    product_id: "{{ product.product_id }}",
    product_name: "{{ product.name }}",
    email: "{{ email if customer_logged_in else '' }}"
  });
});
</script>

---

🏷️ Step 2: Send Events to GA4 via GTM

Create a GA4 Event Tag:

• Event name: add_to_cart
• Parameters:
  • product_id: {{DLV - product_id}}
  • email: {{DLV - email}} (critical for syncing to CleverTap)

Repeat similar steps for view_item, begin_checkout, etc.

---

👥 Step 3: Create GA4 Audience

Go to: GA4 > Admin > Audiences > Create Audience

Examples:

Audience A: Cart Abandoners

• Include: add_to_cart
• Exclude: purchase
• Include only if: email is present

Audience B: Category Viewers

• Users who triggered view_item with product_category = Shoes

Save and name them meaningfully, e.g., Cart_Abandoners_3D.

---

💾 Step 4: Enable BigQuery Export of GA4 Data

1. GA4 Admin > BigQuery Linking
2. Enable daily export
3. Data appears in: project.dataset.events_YYYYMMDD

---

🧠 Step 5: Query GA4 Audience from BigQuery

Sample SQL to get cart abandoners:

WITH cart_events AS (
  SELECT
    user_pseudo_id,
    MAX(IF(event_name = 'add_to_cart', 1, 0)) AS added,
    MAX(IF(event_name = 'purchase', 1, 0)) AS purchased,
    MAX(IF(event_name = 'add_to_cart', value.string_value) FILTER (WHERE key = 'email')) AS email
  FROM
    `project.dataset.events_*`
  WHERE
    _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE(), INTERVAL 2 DAY))
    AND FORMAT_DATE('%Y%m%d', CURRENT_DATE())
  GROUP BY user_pseudo_id
)
SELECT email
FROM cart_events
WHERE added = 1 AND purchased = 0 AND email IS NOT NULL

---

🔌 Step 6: Send to CleverTap via API

Use Google Cloud Function / Node.js / Python script:

Example: Node.js Script

const axios = require('axios');

async function pushToCleverTap(email) {
  const payload = {
    d: [{
      objectId: email,
      type: "profile",
      profileData: {
        Email: email,
        AbandonedCart: true
      }
    }]
  };

  await axios.post("https://<region>.api.clevertap.com/1/upload", payload, {
    headers: {
      "X-CleverTap-Account-Id": "<YOUR_ACCOUNT_ID>",
      "X-CleverTap-Passcode": "<YOUR_PASSCODE>",
      "Content-Type": "application/json"
    }
  });
}

🛡️ Run this daily or near-real-time using BigQuery results.

---

📣 Step 7: Trigger Campaign in CleverTap

Inside CleverTap:

1. Go to Campaigns > Create Campaign
2. Audience: AbandonedCart = true
3. Trigger: Event or profile update
4. Channel: Email / Push / WhatsApp
5. Personalize message using dynamic tokens (e.g., product category, value)

---

🔐 Step 8: Consent Handling

Use GTM consent signals to conditionally allow sending email into GA4.

if (Cookiebot.consents.marketing) {
  dataLayer.push({ event: "add_to_cart", email: ... });
}

Also, only push to CleverTap users who’ve opted in.

---

🧪 Step 9: QA the End-to-End Flow

Tool	Use
GA4 DebugView	Check event + email delivery
BigQuery	Inspect audience queries
Cloud Function Logs	See email payloads sent to CleverTap
CleverTap Profiles	Confirm real-time user enrichment
CRM Logs	Track retargeting delivery & click rates

---

📈 Strategic Benefits

Feature	Value
Real-time sync	No need to wait for exported lists
Personalized retargeting	Based on real GA4 signals
Consent-compliant	Works with Cookiebot or GTM signals
Multi-channel retargeting	Email, SMS, push, WhatsApp

---

Personalized product recommendations can dramatically improve conversion rates and average order value (AOV). By using GA4 user properties, you can segment users by behavior—like last viewed category, device, or price preference—and deliver dynamic product recommendations based on these signals.

---

🧰 Prerequisites

Tool / Platform	Purpose
OpenCart v3/v4	Storefront with access to .twig templates
Google Tag Manager	Capture and push user property values
Google Analytics 4	User property storage and segmentation
JavaScript / jQuery	DOM manipulation for product UI
Optional: Reco Engine	Custom endpoint or AI engine for suggestion

---

🎯 Strategy Overview

User browses product ➜ GA4 captures category or price ➜ GTM sets user property ➜
Next page or visit ➜ JS reads user property ➜ injects matching recommendations

---

🧱 Step 1: Capture User Signals on Product Pages

Edit product.twig to push category and price into dataLayer:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  product_category: '{{ category }}',
  product_price: {{ product.price }}
});
</script>

---

🏷️ Step 2: Set GA4 User Properties via GTM

In GTM:

Tag: GA4 – Set User Properties

• Tag Type: GA4 Configuration
• Fields to Set:
  • user_properties.product_category = {{DLV - product_category}}
  • user_properties.price_segment = use custom JS variable

JS Variable: Price Segment Mapper

Create a custom JavaScript variable:

function() {
  var price = {{DLV - product_price}};
  if (price < 50) return "low";
  if (price < 150) return "mid";
  return "high";
}

You can expand this to include device type, brand, etc.

---

📋 Step 3: Verify in GA4 DebugView

Ensure you see user properties in:

• Realtime > User Snapshot
• Admin > User Properties (should auto-populate)

Example:

• product_category = "T-Shirts"
• price_segment = "mid"

---

🤖 Step 4: Store User Properties in a Cookie (Optional)

If you want to reuse the value on frontend (e.g., for JS recos), mirror GA4 properties into a cookie:

<script>
document.cookie = "user_category=" + '{{ category }}' + "; path=/";
document.cookie = "price_segment=" + '{{ price_segment }}' + "; path=/";
</script>

Now you can read these on any page:

function getCookie(name) {
  let value = "; " + document.cookie;
  let parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

---

🔁 Step 5: Show Personalized Recommendations

You have two options:

Option A: Inject Product Blocks via JavaScript

<div id="personal-recos"></div>

<script>
let cat = getCookie('user_category') || 'T-Shirts';
fetch('/api/reco-products?category=' + cat)
  .then(res => res.json())
  .then(data => {
    let html = '<h3>Recommended for you</h3><ul>';
    data.forEach(p => {
      html += `<li><a href="${p.url}">${p.name}</a></li>`;
    });
    html += '</ul>';
    document.getElementById('personal-recos').innerHTML = html;
  });
</script>

You must create a simple /api/reco-products route in OpenCart that filters top products by category.

Option B: Use a Third-Party Engine

Use tools like Clerk.io, Segment + Reco, or your in-house ML model that accepts category and price_segment to return recommendations via API.

---

🧪 Step 6: QA User Property Assignment

Tool	Use Case
GTM Preview Mode	Confirm variable values and tags fire
GA4 DebugView	Confirm user properties show in session
Chrome DevTools	Verify cookies or fetch requests work

---

📈 Bonus: Create GA4 Audiences from User Properties

In GA4:

• Go to Admin > Audiences > Create New
• Condition:
  • User property: price_segment = high
  • User property: product_category = T-Shirts

You can now use these for remarketing lists or personalization experiments.

---

Recovering abandoned carts is one of the highest ROI email automations in eCommerce. When combined with OpenCart’s event data and GA4’s behavioral insights, you can build a powerful system that auto-triggers emails only to engaged, identifiable users who abandon without converting.

🧰 Prerequisites

Platform/Tool	Purpose
OpenCart v3.x / 4.x	Storefront + editable theme files
Google Tag Manager	Pushing events into GA4
GA4 + BigQuery	Event collection and audience queries
Email Platform (e.g. Klaviyo)	Email automation via API or CSV import

---

🔄 Flow Overview

OpenCart ➜ dataLayer ➜ GTM ➜ GA4 ➜ BigQuery ➜ Query abandoned carts ➜ CRM ➜ Email

---

📦 Step 1: Push add_to_cart Event from OpenCart

Update product.twig or JS add-to-cart handler to send data to GTM:

<script>
document.querySelector('.btn-add-to-cart').addEventListener('click', function () {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: "add_to_cart",
    product_id: "{{ product.product_id }}",
    product_name: "{{ product.name }}",
    product_price: "{{ product.price }}",
    email: "{{ email if customer_logged_in else '' }}"
  });
});
</script>

✅ If email is not available on frontend, collect it at checkout entry or via login field.

---

💳 Step 2: Push purchase Event on Success Page

Edit success.twig (after order placement):

<script>
dataLayer = dataLayer || [];
dataLayer.push({
  event: 'purchase',
  transaction_id: '{{ order_id }}',
  email: '{{ email if email else customer.email }}',
  value: {{ total }}
});
</script>

---

🛠️ Step 3: Configure GA4 Tags in GTM

Create two GA4 Event Tags:

A. GA4 – add_to_cart

• Event Name: add_to_cart
• Parameters:
  • product_id: {{DLV - product_id}}
  • product_name: {{DLV - product_name}}
  • product_price: {{DLV - product_price}}
  • email: {{DLV - email}} (if available)
• Trigger: Custom Event = add_to_cart

B. GA4 – purchase

• Event Name: purchase
• Parameters:
  • transaction_id: {{DLV - transaction_id}}
  • value: {{DLV - value}}
  • email: {{DLV - email}}

---

🧠 Step 4: Store GA4 Events in BigQuery

1. Go to GA4 > Admin > BigQuery Linking
2. Enable daily or streaming export
3. GA4 data will populate in:
   project.dataset.events_*

---

🔍 Step 5: Write SQL Query to Find Abandoned Carts

Abandoned cart = add_to_cart exists but purchase doesn’t.

WITH cart_events AS (
  SELECT
    user_pseudo_id,
    event_date,
    MAX(IF(event_name = 'add_to_cart', 1, 0)) AS added_to_cart,
    MAX(IF(event_name = 'purchase', 1, 0)) AS purchased,
    MAX(IF(event_name = 'add_to_cart', value.string_value) FILTER(WHERE key = 'email')) AS email
  FROM
    `project.dataset.events_*`
  WHERE
    _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE(), INTERVAL 2 DAY))
                      AND FORMAT_DATE('%Y%m%d', CURRENT_DATE())
  GROUP BY user_pseudo_id, event_date
)
SELECT *
FROM cart_events
WHERE added_to_cart = 1 AND purchased = 0 AND email IS NOT NULL

✅ Export the result to CSV or use directly in Zapier/Cloud Function for automation.

---

📬 Step 6: Trigger Emails from CRM (Klaviyo, Mailchimp, etc.)

Option A: Klaviyo via API

1. Send data via POST to Klaviyo /profiles/ or /events/ endpoint
2. Use email as identifier
3. Trigger a flow in Klaviyo for new abandoned cart entry

{
  "data": {
    "type": "event",
    "attributes": {
      "profile": {
        "email": "user@example.com"
      },
      "metric": {
        "name": "Abandoned Cart"
      },
      "properties": {
        "product_name": "OpenCart T-shirt",
        "cart_value": "29.99"
      },
      "timestamp": "2025-06-04T12:00:00Z"
    }
  }
}

Option B: CSV Import (Manual / Zapier)

• Download your BigQuery output
• Import into Mailchimp/Klaviyo segment
• Trigger automation from the list

---

✅ Optional: Add Deduplication Logic

To prevent re-triggering for same cart:

• Store sent user_pseudo_id + event_date in Firestore or Sheets
• On next query, exclude previously used users

---

🧪 Step 7: QA the Journey

Tool	Use
GTM Preview	Ensure event firing
GA4 DebugView	Validate add_to_cart and purchase
BigQuery	Check email field population
Klaviyo Logs	Confirm abandoned cart event appears

---

📈 Bonus: Add Engagement Thresholds

To avoid low-quality email triggers:

• Add filter: session_engaged = TRUE in GA4 events
• Or engagement_time_msec > 10000

---

With the right GA4 audience setup, you can automate personalized email journeys—like abandoned cart reminders, wishlist promotions, or browse recovery flows—by connecting GA4 signals to platforms like Klaviyo, Mailchimp, or Customer.io.

---

🧰 Prerequisites

Tool	Role
OpenCart v3/v4	Storefront and event source
Google Tag Manager	For pushing custom events
Google Analytics 4	Destination for event + audience logic
Email Platform (CRM)	To trigger email journeys (Klaviyo, Mailchimp, etc.)

---

🎯 Use Cases for Email Journeys

User Behavior	Email Trigger Example
Viewed a product	“Still thinking about this item?”
Added to cart but no buy	“Complete your purchase and save 10%”
Viewed promo but no click	“Your exclusive offer is waiting”
Visited X times this week	“Welcome back—our latest arrivals!”

---

📦 Step 1: Push Key Events into GA4 via GTM

Update your OpenCart templates to push events to dataLayer.
Examples:

A. product.twig – View Item Event

<script>
dataLayer = dataLayer || [];
dataLayer.push({
  event: 'view_item',
  item_id: '{{ product.product_id }}',
  item_name: '{{ product.name }}',
  category: '{{ category_name }}'
});
</script>

B. add_to_cart Listener via JS

<script>
document.querySelector('.btn-add-to-cart').addEventListener('click', function() {
  dataLayer.push({
    event: 'add_to_cart',
    product_id: '{{ product.product_id }}',
    name: '{{ product.name }}',
    price: '{{ product.price }}'
  });
});
</script>

C. Wishlist or Compare Actions

If you have buttons or links:

dataLayer.push({
  event: 'add_to_wishlist',
  product_id: '12345'
});

---

🧱 Step 2: Configure GA4 Events in GTM

For each custom event:

1. Go to GTM > Tags > New
2. Tag Type: GA4 Event
3. Event Name: add_to_wishlist (or add_to_cart, etc.)
4. Event Parameters:
   • product_id: {{DLV - product_id}}
   • item_name: {{DLV - item_name}}

Trigger: Custom Event = add_to_wishlist (match your push)

Repeat this for each behavioral event.

---

🧠 Step 3: Build Audiences in GA4

Go to GA4 Admin > Audiences > New Audience

A. Abandoned Cart Audience

• Include users who:
  • Triggered add_to_cart
  • AND not triggered purchase
• Membership Duration: 3–7 days

You can include conditions like cart_value > 50 or category = shoes.

B. Product View Audience

• Include users who:
  • Viewed an item (view_item)
  • AND not add_to_cart or purchase

---

🔁 Step 4: Export GA4 Audiences to Email Platforms

GA4 audiences can’t natively send to email platforms. Use these options:

Option 1: Connect GA4 to Google Ads

1. Go to GA4 > Admin > Product Links > Google Ads
2. Link your GA account

Export audiences to Google Ads, sync to tools like Klaviyo via Zapier or BigQuery pipelines.

Option 2: Use BigQuery + Email Platform Integration

• Export GA4 events and audiences to BigQuery
• Run queries to detect audience IDs
• Send user emails or UIDs to Mailchimp/Klaviyo via API

Example SQL:

SELECT user_pseudo_id, event_name
FROM `project.dataset.events_*`
WHERE event_name = "add_to_cart"
AND NOT EXISTS (
  SELECT 1
  FROM `project.dataset.events_*`
  WHERE event_name = "purchase"
  AND user_pseudo_id = e.user_pseudo_id
)

Automate sending this to Klaviyo’s list/segment API

---

📨 Step 5: Trigger Email Campaigns in CRM

In your CRM:

• Import segment of GA4 users
• Create behavior-based journeys:

Trigger Audience	Email Flow
Added to Cart (no buy)	Abandonment series (1–3 emails)
Viewed Promo (no click)	Reminder with limited-time offer
Viewed Product (no action)	Personalized recommendation mail

---

🔒 Step 6: Respect Consent

If you’re using Cookiebot or similar:

1. Only push events to GA4 after marketing/statistics consent
2. Use GTM’s consent checks on all GA4 tags

Example condition:

Cookiebot.consents.marketing equals true

---

🧪 Step 7: QA Events and Audience Membership

Tool	Use
GA4 DebugView	Confirm events are recorded
GTM Preview Mode	Validate event triggers and variables
GA4 Audience Overview	See real-time audience size + preview
CRM Logs	Ensure email platform receives data

---

Modern CRO strategies rely on behavioral triggers—like exit intent, scroll depth, and engagement level—to show popups only when users are likely to bounce without converting.

This technique boosts cart recovery, lead capture, and discount promo performance without annoying engaged users.

---

🧰 Prerequisites

Tool	Purpose
OpenCart v3/v4	Storefront with theme access
Google Tag Manager	Trigger logic and behavioral tracking
GA4	Engagement metrics and audience tuning
Popup Tool	(Custom HTML, ConvertBox, OptiMonk, etc.)

---

🧠 Strategy Breakdown

We will trigger a popup only if all of the following are true:

1. User scrolled > 50%
2. No purchase or add_to_cart recorded (via GA4)
3. Mouse movement toward browser top (exit intent)
4. One-time trigger per session

---

📜 Step 1: Add Scroll Depth Trigger in GTM

A. Enable Built-in Scroll Variables

In GTM:

• Variables > Enable:
  • Scroll Depth Threshold
  • Scroll Direction

B. Create Scroll Trigger (50%+)

• Trigger Type: Scroll Depth
• Vertical Scroll: 50, 75
• Trigger on: All Pages
• Name it: Scroll - 50%

---

🖱️ Step 2: Create Exit Intent Detection Script

A. Add the script via GTM (Custom HTML tag):

<script>
document.addEventListener('DOMContentLoaded', function () {
  var exitIntentFired = false;

  document.addEventListener('mouseout', function (e) {
    if (e.clientY < 50 && !exitIntentFired) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'exit_intent'
      });
      exitIntentFired = true;
    }
  });
});
</script>

• Trigger: All Pages
• This fires exit_intent when the mouse leaves toward the top

---

🧠 Step 3: Create a One-Time Popup Trigger

A. Tag: Show Popup (Custom HTML)

<script>
if (!sessionStorage.getItem('popup_shown')) {
  // Custom popup logic (HTML/3rd party embed)
  alert('Wait! Grab a 10% discount before you go.');
  sessionStorage.setItem('popup_shown', 'true');
}
</script>

Replace alert() with your actual popup tool (OptiMonk, ConvertBox embed, or custom modal)

---

🔄 Step 4: Combine Scroll + Exit + No GA4 Event with Custom Trigger

A. Create Trigger: Custom Event

Name: Trigger - Exit + Scroll

• Trigger Type: Custom Event
• Event name: exit_intent
• Additional Condition:{{Scroll Depth Threshold}} > 49 AND {{DLV - add_to_cart}} != true AND {{DLV - purchase}} != true

You must push these GA4 events into the dataLayer to reference their absence.

---

🧾 Step 5: Push add_to_cart and purchase into dataLayer

In product.twig and success.twig, include:

A. Add to Cart (JS listener or backend trigger)

dataLayer.push({
  event: 'add_to_cart'
});

B. On Purchase:

dataLayer.push({
  event: 'purchase'
});

---

📊 Step 6: Optional – Push GA4 Engagement Flags for Future Use

GA4 sends engagement_time_msec, which you can use via BigQuery or custom audiences, but for real-time GTM, it’s better to flag your own:

window.addEventListener('scroll', function() {
  if (window.scrollY > 1000 && !window._hasScrolledDeep) {
    window._hasScrolledDeep = true;
    dataLayer.push({ event: 'scrolled_deep' });
  }
});

Use scrolled_deep as a signal to enrich the exit trigger condition.

---

🧪 Step 7: Test and Debug

Tool	What to Look For
GTM Preview	Does exit_intent fire after scroll?
GA4 DebugView	Does add_to_cart / purchase exist?
DevTools > Console	Check if popup script runs once
Tag Assistant	Validate conditional firing logic

---

🧠 Bonus: Fire GA4 Event on Popup Trigger

To track effectiveness:

gtag('event', 'popup_shown', {
  engagement_type: 'exit_scroll_trigger',
  page_location: window.location.href
});

Use this in a GA4 tag or inline within your popup tag.

---

As Google enforces Consent Mode v2, marketers must not only collect consent—but also route tracking events dynamically based on whether consent has been granted.

---

🧰 Prerequisites

Tool/Tech	Requirement
OpenCart v3.x/v4.x	With editable theme files
Google Tag Manager (Web)	Installed properly
GA4 Tag in GTM	Configured with Consent Mode v2
Cookiebot / OneTrust	Cookie consent tool that sets gtag() correctly

---

🎯 Goal

✅ Read GA4 consent signals (analytics_storage, ad_storage, etc.)
✅ Conditionally fire GA4, Google Ads, Meta Pixel, TikTok, etc.
✅ Avoid firing events when user has not granted consent
✅ Centralize platform routing based on real consent status

---

🔧 Step 1: Enable Google Consent Mode v2

A. Add a Consent Initialization Tag in GTM

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

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

This prevents all Google tags from firing until consent is updated.

---

🔁 Step 2: Sync Cookie Consent with Google Consent Mode

A. 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',
    personalization_storage: Cookiebot.consents.preferences ? 'granted' : 'denied',
    security_storage: 'granted'
  });
});
</script>

• Trigger: Consent Initialization – All Pages

🧠 Adjust this if you use OneTrust, Axeptio, or another tool instead.

---

📦 Step 3: Create a Custom JavaScript Variable to Read Consent State

Variable: JS - Consent Analytics

function() {
  try {
    return gtag && gtag.get('consent', 'default')?.analytics_storage || 'denied';
  } catch (e) {
    return 'denied';
  }
}

Variable: JS - Consent Ads

function() {
  try {
    return gtag && gtag.get('consent', 'default')?.ad_storage || 'denied';
  } catch (e) {
    return 'denied';
  }
}

These read the live consent signal pushed by Google Consent Mode.

---

🧠 Step 4: Route Events Based on Consent in GTM Tags

Let’s use these variables to control which tags fire and when.

A. GA4 Tag

• Enable Built-in Consent Checks
• Consent type: analytics_storage
• Add trigger condition:JS - Consent Analytics equals granted

B. Google Ads Tag

• Consent type: ad_storage
• Trigger condition:JS - Consent Ads equals granted

C. Meta Pixel Tag (Custom HTML)

Use a Custom HTML Tag that fires only if marketing consent is true:

<script>
fbq('init', 'PIXEL_ID');
fbq('track', 'PageView');
</script>

Trigger: Custom Event CookieConsentDeclaration
Condition:

Cookiebot.consents.marketing equals true

---

🔁 Step 5: Shared Event Dispatch Logic (Centralized Routing)

Instead of duplicating event code, push a universal event into dataLayer:

dataLayer.push({
  event: "ecommerce_event",
  action: "purchase",
  order_id: "12345",
  value: 199.99,
  consent_analytics: '{{JS - Consent Analytics}}',
  consent_ads: '{{JS - Consent Ads}}'
});

Then build separate tags for GA4, Ads, Meta, etc., each using:

• The same trigger: ecommerce_event
• With conditions on consent_analytics or consent_ads

---

📊 Step 6: Testing Consent-Based Event Routing

Tool	Use
GTM Preview Mode	Ensure event routing based on consent
DevTools > Console	Run gtag.get('consent', 'default')
Google Tag Assistant	Validate tag fire status with consent logs
Real-time GA4 DebugView	Confirm events only appear post-consent

---

🧪 Bonus: Push Consent Info into GA4 as Parameters

You can send consent context into GA4 for visibility:

gtag('event', 'purchase', {
  consent_analytics: '{{JS - Consent Analytics}}',
  consent_ads: '{{JS - Consent Ads}}'
});

This helps in reporting opt-in vs opt-out conversion performance.

---

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.

---

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)

---

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

---

Google Analytics 4 (GA4) DebugView is an essential tool for validating event tracking. In dynamic eCommerce platforms like OpenCart, improper dataLayer setup, JavaScript execution timing, or misconfigured GTM tags can result in missing or broken analytics.

---

🔍 Why DebugView?

What You Can See	Why It Matters
Real-time event stream	Confirm tracking tag is firing
Parameter values	Ensure accuracy of eCommerce data
User properties	Validate user_id, logged-in state
Event sequence	Analyze purchase funnel flow

---

🧰 Prerequisites

• GA4 property with Measurement ID
• GTM container installed on OpenCart
• Chrome browser with Tag Assistant
• ?gtm_debug=x or Chrome Extension to trigger debug mode

---

⚙️ Step 1: Add GTM to OpenCart Properly

Edit catalog/view/theme/YOUR_THEME/template/common/header.twig:

<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>
<!-- End GTM -->

✅ Make sure GTM is loaded in the <head> for DebugView accuracy.

---

🧪 Step 2: Use gtm_debug=x for Debug Mode

Append this query parameter to any OpenCart URL:

https://yourstore.com?gtm_debug=x

This automatically enables GTM DebugView and sends events to GA4’s DebugView tab.

---

🛒 Step 3: Push Ecommerce Events into Data Layer

Example for purchase event in success.twig:

<script>
window.dataLayer = window.dataLayer || [];
window.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>

✅ This makes events available for GTM Tags with triggers on purchase.

---

🧱 Step 4: Configure GA4 Event Tag in GTM

In GTM Web:

• Tag Type: GA4 Event
• Configuration Tag: Your GA4 property
• Event Name: purchase
• Event Parameters:
  • transaction_id → {{DLV - transaction_id}}
  • value → {{DLV - value}}
  • currency → {{DLV - currency}}
  • items → {{DLV - items}}

Use Data Layer Variables for each parameter.

---

🧬 Step 5: Check GA4 DebugView

In GA4:

1. Navigate to Admin → DebugView
2. Open the store in debug mode (?gtm_debug=x)
3. Interact with your site (e.g., add to cart, checkout)
4. Observe:
   • Event name (purchase)
   • Parameters and values
   • Timestamp of firing
   • Session stream (left pane) vs event log (center pane)

---

🧠 Step 6: Troubleshooting Checklist

Issue	Solution
No events appear	Ensure gtm_debug=x is present or use Tag Assistant Chrome extension
purchase not shown	Check GTM trigger is on correct custom event
Missing parameters	Confirm variables are mapped in the tag
Wrong data type in DebugView	Ensure prices are numbers, items is an array
No debug traffic at all	Disable browser extensions like Brave/Privacy Badger

---

🧪 Bonus: Debug Without GTM Web

If you send GA4 events server-side, use:

• x-gtm-server-preview header
• Debug GA4 requests in Network tab > payload
• In Server GTM, use Console Log tag or preview mode to trace flow

---

🧰 Additional DevTool Tips

1. Open DevTools → Network
2. Filter by collect?
3. Inspect payloads sent to https://www.google-analytics.com/g/collect
4. Validate tid, en=purchase, ep.transaction_id etc.

---

🧠 Best Practices for OpenCart + DebugView

Practice	Why It’s Critical
Use event_id in all events	Helps with deduplication + server syncing
Map GA4 Ecommerce fields exactly	Ensures compatibility with GA4 standard reports
Debug each funnel step	Don’t assume only the final conversion matters
Use preview mode + network logs	Best way to trace event firing + issues

---

🔐 Consent Debugging (if enabled)

If using Cookiebot, OneTrust, etc., ensure analytics or marketing consent is granted before event push.

Example:

if (Cookiebot.consents.given.analytics) {
  dataLayer.push({ event: 'purchase', ... });
}

---