Understanding how often users encounter out-of-stock or low inventory products in OpenCart is critical for conversion rate optimization (CRO). With GA4 and GTM, you can track these friction points and quantify lost revenue opportunities, improve merchandising, and prioritize restocks.

---

🧰 Prerequisites

Component	Purpose
OpenCart 3.x / 4.x	Storefront
GTM Installed	Tracks frontend product views
GA4 Setup	Via GTM with custom events
Consent Management	Optional but recommended

---

🎯 Goal: What You’ll Track

Event Name	Trigger Condition	Use Case
out_of_stock_view	Product quantity <= 0	High demand, zero availability
low_stock_view	Product quantity <= 3	Scarcity-based marketing/CRO

---

🧱 Step 1: Modify product.twig to Inject Inventory Data

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

Add this dataLayer.push() block above the closing </script> tag:

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

dataLayer.push({
  event: '{% if product.quantity <= 0 %}out_of_stock_view{% elseif product.quantity <= 3 %}low_stock_view{% endif %}',
  product_id: '{{ product.product_id }}',
  product_name: '{{ product.name | escape('js') }}',
  stock_level: '{{ product.quantity }}',
  price: '{{ product.price }}',
  category: '{{ breadcrumbs[1].text }}'
});
</script>

✅ This pushes context-aware events only when relevant.

---

🔧 Step 2: Create Data Layer Variables in GTM

Go to GTM > Variables > New, and add:

Variable Name	Data Layer Key
DLV - product_id	product_id
DLV - product_name	product_name
DLV - stock_level	stock_level
DLV - price	price
DLV - category	category

---

🎯 Step 3: Configure GA4 Event Tags

1. Out-of-Stock View Event

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

Parameter Name	Value
product_id	{{DLV - product_id}}
product_name	{{DLV - product_name}}
stock_level	{{DLV - stock_level}}
price	{{DLV - price}}
category	{{DLV - category}}

---

2. Low Inventory Event

• Event Name: low_stock_view
• Trigger: Custom Event = low_stock_view
• Same Parameters as Above

---

📐 Step 4: Register Custom Dimensions in GA4 (Optional)

To build deep reports:

1. Go to GA4 Admin > Custom Definitions
2. Create Event-scoped dimensions:

Name	Event Parameter
stock_level	stock_level
product_id	product_id
category	category

---

🧪 Step 5: QA & Debug

Tool	Purpose
GTM Preview Mode	Validate low_stock_view or out_of_stock_view events trigger correctly
GA4 DebugView	Confirm event names and params
Dev Console	Run dataLayer and inspect events

---

📈 Use Cases in GA4 & CRO

Insight	Benefit
Top-viewed out-of-stock items	Plan restocking & urgency messaging
Low inventory with high views	Trigger scarcity popups (e.g., “3 left”)
Track lost conversions	Map to add_to_cart drop-offs
Segment remarketing audiences	Build GA4 audiences by low_stock_view

---

🔐 Step 6: Consent Handling (Optional)

Wrap dataLayer.push() block with consent logic:

{% if product.quantity <= 3 and Cookiebot.consents.given.analytics %}
<script>
  // Your dataLayer.push here
</script>
{% endif %}

Or use GTM’s built-in Consent Initialization trigger.

---

🧠 Pro Tips

• Pair this with a Back-in-Stock signup tracker
• Set up GA4 conversions for products recovered post OOS
• Track how fast stock depletes post view (engagement vs stock velocity)

---