Heap Analytics offers automatic data capture and advanced journey mapping. Integrating Heap with OpenCart via Google Tag Manager (GTM) allows merchants to track and enrich user actions like product views, add-to-carts, and purchases—without needing custom event tracking per page.

🧰 Prerequisites

Requirement	Description
OpenCart 3.x/4.x	E-commerce platform
GTM Web Container	Installed and publishing
Heap App ID	From your Heap project
Consent Management	Recommended for GDPR/CCPA compliance

---

🎯 Key Events to Track in Heap

Event Name	Trigger Location
Product Viewed	Product Detail Page
Add to Cart	Add Button Click
Checkout Started	Checkout Page
Purchase Completed	Order Success Page
User Identified	Any login or checkout step

---

📦 Step 1: Add Heap Analytics Base Script via GTM

Create a GTM Web tag:

• Tag Type: Custom HTML
• Trigger: All Pages

<script type="text/javascript">
window.heap=window.heap||[],heap.load=function(e,t){
  window.heap.appid=e,window.heap.config=t=t||{};
  var r=document.createElement("script");
  r.type="text/javascript",r.async=!0,
  r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";
  var a=document.getElementsByTagName("script")[0];
  a.parentNode.insertBefore(r,a);
};
heap.load("YOUR_HEAP_APP_ID");
</script>

✅ Replace YOUR_HEAP_APP_ID with your project’s App ID.

---

🛒 Step 2: Push Events from OpenCart Templates

A. Purchase Event on Success Page

In catalog/view/theme/*/template/checkout/success.twig:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'purchase_completed',
  transaction_id: '{{ order_id }}',
  revenue: {{ order_total }},
  currency: '{{ currency }}',
  email: '{{ email | lower | sha256 }}',
  user_id: '{{ customer_id }}'
});
</script>

B. Product View Event on Product Page

In product.twig:

<script>
dataLayer = dataLayer || [];
dataLayer.push({
  event: 'product_viewed',
  product_id: '{{ product_id }}',
  product_name: '{{ heading_title }}',
  price: '{{ price }}',
  category: '{{ category }}'
});
</script>

---

🌐 Step 3: Manual Heap Events via GTM Tags

Create Custom HTML Tags in GTM for each key event.

1. Product Viewed

Trigger: Custom Event = product_viewed

<script>
heap.track("Product Viewed", {
  product_id: '{{DL - product_id}}',
  name: '{{DL - product_name}}',
  price: '{{DL - price}}',
  category: '{{DL - category}}'
});
</script>

2. Add to Cart

Trigger: Click on Add to Cart button (e.g. CSS selector trigger)

<script>
heap.track("Add to Cart", {
  product_id: '{{DL - product_id}}',
  price: '{{DL - price}}'
});
</script>

3. Checkout Started

Trigger: Page Path contains /checkout

<script>
heap.track("Checkout Started", {
  cart_value: '{{DL - cart_total}}',
  item_count: '{{DL - item_count}}'
});
</script>

4. Purchase Completed

Trigger: Custom Event = purchase_completed

<script>
heap.track("Purchase Completed", {
  transaction_id: '{{DL - transaction_id}}',
  revenue: '{{DL - revenue}}',
  currency: '{{DL - currency}}'
});
</script>

---

👤 Step 4: Identify Users for Cross-Session Attribution

Use heap.identify() to tie activity to a user.

Trigger: Pageview after login or on checkout page:

<script>
heap.identify('{{DL - user_id}}');
heap.addUserProperties({
  email: '{{DL - email}}'
});
</script>

Note: Email should be hashed client-side or handled server-side via consent validation.

---

🔐 Step 5: Consent-Aware Event Firing

Use a consent_granted variable in GTM and wrap your tags:

<script>
if (window.consent_granted === true) {
  heap.track("Event Name", { ... });
}
</script>

Or apply GTM’s built-in Consent Mode configuration to block tags.

---

🧪 Step 6: QA & Validation

Tool	Purpose
GTM Preview Mode	Ensure events and variables work
Heap Live View	Real-time view of tracked events
Browser Console	Debug heap.track() invocations

You can also enable Heap’s Event Visualizer for automatic property capture.

---

🎯 Strategic Benefits

• Visualize full customer journey from PDP to checkout
• Enable cohort and funnel analysis
• Support cross-device tracking via heap.identify()
• Enhanced custom property collection via GTM variables

---