GA4 Enhanced Ecommerce allows you to track every touchpoint across a customer’s product discovery journey. For OpenCart (or any eCommerce platform), capturing product list impressions, clicks, and detail views is crucial for measuring product exposure and user engagement.

✅ Why Track Product List Interactions?

Metric	Insight
Product impressions	Measure visibility across carousels or listings
Product clicks	Determine which items are drawing attention
Product detail views	See what earns deeper interest
Click-through rate (CTR)	Identify which products convert from list views

---

🧰 Requirements

• GA4 with GTM installed
• Dynamic rendering of product lists (e.g., homepage, category page, etc.)
• Access to .twig or template files
• Consent mode implemented (recommended for EU compliance)

---

🚀 Step-by-Step Implementation

---

🔹 Step 1: Push Product List Impressions to dataLayer

In your category or homepage .twig file, loop through products like this:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item_list',
  ecommerce: {
    item_list_name: '{{ heading_title }}',
    items: [
      {% for product in products %}
      {
        item_id: '{{ product.model }}',
        item_name: '{{ product.name|escape('js') }}',
        price: '{{ product.price|replace({'$': '', ',': ''}) }}',
        index: {{ loop.index }},
        item_list_name: '{{ heading_title }}'
      }{% if not loop.last %},{% endif %}
      {% endfor %}
    ]
  }
});
</script>

✅ This pushes a view_item_list event to the dataLayer whenever a list is rendered.

---

🔹 Step 2: Push Clicks on Products in the List

Wrap each product card or link with a click listener that pushes a select_item event.

Example (inside each product loop):

<a href="{{ product.href }}" class="product-card" 
   onclick="dataLayer.push({
     event: 'select_item',
     ecommerce: {
       item_list_name: '{{ heading_title }}',
       items: [{
         item_id: '{{ product.model }}',
         item_name: '{{ product.name|escape('js') }}',
         price: '{{ product.price|replace({'$': '', ',': ''}) }}',
         index: {{ loop.index }},
         item_list_name: '{{ heading_title }}'
       }]
     }
   })">
   <img src="{{ product.thumb }}" alt="{{ product.name }}" />
   <span>{{ product.name }}</span>
</a>

✅ This sends a select_item event on click, preserving context like index and list name.

---

🔹 Step 3: Push Product Detail Views

On the product detail page (product.twig):

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: '{{ product.model }}',
      item_name: '{{ product.name|escape('js') }}',
      price: '{{ product.price|replace({'$': '', ',': ''}) }}',
      item_category: '{{ category_name }}',
      item_list_name: '{{ referring_list_name|default('Product Page') }}'
    }]
  }
});
</script>

✅ This sends a view_item event to GA4, capturing the actual detail page view.

---

🔹 Step 4: Create GA4 Event Tags in GTM

For each interaction:

1. view_item_list

• Tag Type: GA4 Event
• Event Name: view_item_list
• Parameters:
  • item_list_name: {{DLV - ecommerce.item_list_name}}
  • items: {{DLV - ecommerce.items}}
• Trigger: Custom Event → view_item_list

---

2. select_item

• Tag Type: GA4 Event
• Event Name: select_item
• Parameters:
  • item_list_name: {{DLV - ecommerce.item_list_name}}
  • items: {{DLV - ecommerce.items}}
• Trigger: Custom Event → select_item

---

3. view_item (product page)

• Tag Type: GA4 Event
• Event Name: view_item
• Parameters:
  • items: {{DLV - ecommerce.items}}
• Trigger: Custom Event → view_item

---

🔹 Step 5: Create Data Layer Variables in GTM

Create these Data Layer Variables:

Variable	DLV Name
DLV – ecommerce.items	ecommerce.items
DLV – ecommerce.item_list_name	ecommerce.item_list_name

✅ These will populate event parameters in your GA4 event tags.

---

🔹 Step 6: Verify in GA4 DebugView

• Navigate to your product list or homepage
• Watch for:
  • view_item_list on list load
  • select_item on click
  • view_item on detail page

Make sure GA4 receives the correct structure under ecommerce.items.

---

🔹 Step 7: Analyze List Performance in GA4

Go to Explore → Free Form or Funnel:

Suggested Funnel:

1. view_item_list
2. select_item
3. view_item
4. add_to_cart
5. purchase

Breakdown by:

• item_list_name
• item_name
• device category
• source/medium

---

🧠 Pro Tips

Tip	Why It Matters
Include index in each item	Enables CTR measurement
Track multiple carousels with item_list_name	Compare visibility across homepage, category, and upsells
Use product.model as item_id	Matches Merchant Center feed
Escape product names	Prevents JS injection
Leverage select_item + view_item	For full pre-cart journey analysis

---

🧪 QA Checklist

Action	✅
Product list triggers view_item_list	✅
Product clicks push select_item	✅
Product pages fire view_item	✅
GA4 DebugView shows correct values	✅
Tags configured and firing in GTM	✅

---

📦 Summary Table

GA4 Event	Description	Triggered On
view_item_list	List impression	Homepage / Category page
select_item	Product click	Product card anchor click
view_item	Product detail page view	Product detail page

---