Tracking granular product interactions is essential for eCommerce success. With Google Analytics 4 (GA4) and GTM, you can capture product views, clicks, and even inventory levels to analyze customer behavior and stock pressure signals—vital for conversion optimization and remarketing.

🧰 Prerequisites

Component	Purpose
OpenCart 3.x / 4.x	Base eCommerce platform
GTM Installed	Tracking container across all pages
GA4 Web Property	Set up via GTM
Consent Mode v2	Optional, for GDPR-compliant tracking

---

🎯 Event Goals

Event Name	Trigger Location	Purpose
view_item	Product Detail Page	Tracks detailed product views
select_item	Product Click (list/grid)	Tracks clicks from listing pages
view_item_stock	Product View	Captures stock quantity as context

---

🧱 Step 1: Inject DataLayer on Product Detail Page (product.twig)

Edit:
catalog/view/theme/YOUR_THEME/template/product/product.twig

Add the following near the top (inside <script> tags):

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: '{{ product.product_id }}',
      item_name: '{{ product.name | escape('js') }}',
      item_category: '{{ breadcrumbs[1].text }}',
      price: {{ product.price }},
      currency: '{{ currency }}',
      stock_level: '{{ product.quantity }}'
    }]
  }
});
</script>

✅ This handles the view_item event with stock level embedded.

---

🛠️ Step 2: Trigger select_item on Product Clicks

In category.twig or any listing template:

Wrap each product’s link with:

<a href="{{ product.href }}" class="product-link" data-product-id="{{ product.product_id }}" data-product-name="{{ product.name }}" data-product-category="{{ heading_title }}">
  {{ product.name }}
</a>

Then, add this JavaScript (in footer.twig or via GTM Custom HTML tag):

<script>
document.querySelectorAll('.product-link').forEach(function(link) {
  link.addEventListener('click', function(e) {
    const item = {
      event: 'select_item',
      ecommerce: {
        items: [{
          item_id: link.dataset.productId,
          item_name: link.dataset.productName,
          item_category: link.dataset.productCategory
        }]
      }
    };
    window.dataLayer.push(item);
  });
});
</script>

---

📦 Step 3: Add GA4 Tags in GTM

1. GA4 Event Tag: view_item

• Event Name: view_item
• Trigger: Custom Event = view_item
• Parameters:
  • Send ecommerce.items

---

2. GA4 Event Tag: select_item

• Event Name: select_item
• Trigger: Custom Event = select_item
• Parameters:
  • Send ecommerce.items

---

3. GA4 Event Tag: view_item_stock (Optional)

If you want a separate event for inventory levels:

• Trigger: Same as view_item
• Event Name: view_item_stock
• Parameters:
  • item_id, stock_level: extract from DLV - ecommerce.items[0].stock_level

---

🎛️ Step 4: GTM Variables (Data Layer)

Add these:

• DLV - ecommerce.items[0].item_id
• DLV - ecommerce.items[0].item_name
• DLV - ecommerce.items[0].item_category
• DLV - ecommerce.items[0].stock_level

These allow clean mapping of values in your GA4 tags.

---

🔐 Step 5: Consent-Aware Tracking (Optional)

Wrap JS pushes with:

if (window.Cookiebot && Cookiebot.consents.given.analytics) {
  window.dataLayer.push({...});
}

Or configure Consent Mode rules in GTM to delay firing until allowed.

---

🧪 Step 6: Debugging & QA

Tool	Purpose
GTM Preview Mode	Confirm view_item and select_item fire
GA4 DebugView	See events + parameters in real time
Chrome DevTools	Check dataLayer pushes + ecommerce object

---

📊 Use Cases of Stock Tracking

Use Case	Outcome
Segment by “low stock” views	Target urgency-based remarketing
Report average stock level per item	Compare against conversion rates
Funnel users who saw stock_level = 0	Exclude from ROAS measurement

---

📈 GA4 Audience/Report Ideas

• Audience: Users who clicked a product from the list (select_item)
• Funnel: Product view → Add to cart → Purchase
• Condition: Stock level between 1–3 but didn’t convert

---