Mapping OpenCart events to Mixpanel using Google Tag Manager provides granular insight into your eCommerce customer funnel—from product view to checkout. This setup enables precise user journey analysis and advanced segmentation.

---

🧰 Prerequisites

• OpenCart (v3.x or 4.x)
• Google Tag Manager (Web container)
• Mixpanel project token
• SHA-256 hashing (for PII)

---

📦 Step 1: Install Mixpanel Base Script via GTM

GTM Web > New Tag

• Tag Type: Custom HTML
• Trigger: All Pages

<script type="text/javascript">
(function(f,b){if(!b.__SV){var a,e,i,g;window.mixpanel=b;b._i=[];
b.init=function(a,e,d){function f(b,h){var a=h.split(".");
2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(
Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==
typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){
var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};
c.people.toString=function(){return c.toString(1)+".people (stub)"};
i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};
b.__SV=1.2;a=f.createElement("script");a.type="text/javascript";
a.async=!0;a.src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";
e=f.getElementsByTagName("script")[0];e.parentNode.insertBefore(a,e)}})(document,window.mixpanel||[]);

mixpanel.init("YOUR_MIXPANEL_TOKEN");
mixpanel.track("Page View");
</script>

---

🛒 Step 2: Push Events from OpenCart Templates

Add the following to success.twig for order confirmation:

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

Similarly, push add_to_cart, view_item, begin_checkout events in respective .twig templates or via JS listeners.

---

🌐 Step 3: GTM Tags for Funnel Events

Create GTM tags (Custom HTML) for each funnel step with respective triggers:

Example: Purchase Event

<script>
mixpanel.identify('{{DL - user_id}}');
mixpanel.track('Purchase', {
  transaction_id: '{{DL - transaction_id}}',
  revenue: '{{DL - revenue}}',
  currency: '{{DL - currency}}',
  email: '{{DL - email}}'
});
</script>

Example: Add to Cart

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

---

📌 Key Events to Track

Event Name	Trigger Point
Page View	All Pages
View Item	Product Detail Page
Add to Cart	On Click of Add Button
Begin Checkout	Checkout Initiation Page
Purchase	Order Success Page

---

🔐 Consent Management

Ensure dataLayer events and Mixpanel scripts only run after consent. Use a consent_granted variable in GTM.

---

🧪 Debug & QA Tools

Tool	Use Case
GTM Preview	Check variable injection
Mixpanel Debugger	Live event stream
Browser Console	Verify track() invocations

---

🎯 Strategic Value

• Full-funnel visibility in Mixpanel
• Enhanced segmentation using product/category-level events
• Cross-session and cross-device tracking with identify()

---