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.

---