Tracking user intent signals—like Add to Compare and Add to Wishlist—provides critical insights into customer consideration behavior. These micro-interactions, when sent to Google Analytics 4 (GA4) via Google Tag Manager (GTM), allow you to build deeper remarketing audiences, evaluate interest-level products, and refine your CRO strategy.

🧰 Prerequisites

Component	Details
OpenCart 3.x / 4.x	With Compare & Wishlist modules
GTM Installed	Site-wide (Web container)
GA4 Property	Installed via GTM
Consent Management	Optional (GDPR/CCPA compliance)

---

🎯 What You’ll Track

Event Name	Trigger Action	Use Case
add_to_compare	User clicks “Compare”	Analyze product interest depth
add_to_wishlist	User clicks “Wishlist”	Remarketing and high-intent tracking

---

📦 Step 1: Identify Compare & Wishlist Button Selectors

OpenCart usually loads these buttons with JavaScript. You’ll need to locate the classes or IDs for:

• Compare → Usually a button like .button-compare
• Wishlist → Usually a button like .button-wishlist

Use browser DevTools and confirm selectors on listing and product pages.

---

🧩 Step 2: Create Custom JavaScript Listener via GTM

Go to GTM → Tags → New → Custom HTML Tag

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Compare button click listener
  document.body.addEventListener('click', function (e) {
    if (e.target.classList.contains('button-compare')) {
      const productName = e.target.getAttribute('data-name') || e.target.title || 'Unknown';
      const productId = e.target.getAttribute('data-product-id') || null;

      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'add_to_compare',
        product_id: productId,
        product_name: productName,
        click_context: window.location.pathname
      });
    }

    // Wishlist button click listener
    if (e.target.classList.contains('button-wishlist')) {
      const productName = e.target.getAttribute('data-name') || e.target.title || 'Unknown';
      const productId = e.target.getAttribute('data-product-id') || null;

      window.dataLayer.push({
        event: 'add_to_wishlist',
        product_id: productId,
        product_name: productName,
        click_context: window.location.pathname
      });
    }
  });
});
</script>

🧠 Add this to All Pages with a DOM Ready trigger.

---

🧠 Step 3: Add Required Data Attributes in OpenCart

Edit the compare and wishlist buttons in your theme files:

Example (in product_card.twig or category.twig):

<button class="button-compare" data-product-id="{{ product.product_id }}" data-name="{{ product.name }}">
  <i class="fa fa-exchange"></i> Compare
</button>

<button class="button-wishlist" data-product-id="{{ product.product_id }}" data-name="{{ product.name }}">
  <i class="fa fa-heart"></i> Wishlist
</button>

✅ This ensures your dataLayer push contains product context.

---

🔧 Step 4: Configure Data Layer Variables in GTM

Create the following Data Layer Variables:

Variable Name	Data Layer Key
DLV - product_id	product_id
DLV - product_name	product_name
DLV - click_context	click_context

---

🧱 Step 5: Build GA4 Event Tags

1. add_to_compare

• Event Name: add_to_compare
• Trigger: Custom Event = add_to_compare
• Event Parameters:

product_id: {{DLV - product_id}}
product_name: {{DLV - product_name}}
click_context: {{DLV - click_context}}

---

2. add_to_wishlist

• Event Name: add_to_wishlist
• Trigger: Custom Event = add_to_wishlist
• Event Parameters:

product_id: {{DLV - product_id}}
product_name: {{DLV - product_name}}
click_context: {{DLV - click_context}}

---

🧪 Step 6: Debugging & QA

Tool	Use For
GTM Preview Mode	Validate dataLayer.push() and triggers
GA4 DebugView	Confirm event names and parameters
Dev Console	Inspect events with dataLayer

---

📊 Use Cases in GA4

Insight	Use Case
Wishlist product popularity	Identify high-consideration SKUs
Funnel: Compare → Purchase	Optimize comparison-to-conversion journey
Retarget users who added to wishlist	Boost ROAS on mid-funnel users
Click context (listing vs PDP) analysis	Improve button placement

---

🔐 Consent Wrapping (Optional)

If you’re using a Consent Management Platform (CMP), modify the JS tag:

if (window.Cookiebot && Cookiebot.consents.given.marketing) {
  // add GTM listeners
}

Or use GTM Consent Settings to only trigger when consent is granted.

---