Amplitude Tracking for E-commerce Behavior in OpenCart

Standard

Amplitude Analytics empowers product and growth teams to analyze user behavior at scale. Integrating Amplitude with OpenCart allows merchants to track granular e-commerce actions such as product views, cart additions, checkouts, and purchases—all with high fidelity.

🧰 Prerequisites

Requirement Purpose
OpenCart (v3.x or 4.x) E-commerce platform
Google Tag Manager Client-side tag deployment
Amplitude API Key For event tracking
Consent Handling Optional, for GDPR/CCPA compliance

🎯 Goal

Track the following events in Amplitude from OpenCart:

Event Name Trigger Location
Product Viewed Product detail page
Add to Cart Add to cart button click
Begin Checkout Checkout initiation
Purchase Order success page

Each event will include user ID, product data, value, and currency.

📦 Step 1: Install Amplitude JS SDK via GTM

Create a tag in your GTM Web Container:

  • Tag Type: Custom HTML

  • Trigger: All Pages

<script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script");
r.type="text/javascript";r.async=true;
r.src="https://cdn.amplitude.com/libs/amplitude-8.12.0-min.gz.js";
r.onload=function(){if(e.amplitude.runQueuedFunctions){
e.amplitude.runQueuedFunctions()}else{
console.log("[Amplitude] Error loading")}};
var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i);
function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this};
var a=["add","append","clearAll","prepend","set","setOnce","unset"];
for(var c=0;c<a.length;c++){s(o,a[c])}n.Identify=o;
n.getInstance=function(e){e=(!e || e.length===0 ? "$default_instance" : e);
if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};for(var t=0;t<a.length;t++){
s(n._iq[e],a[t])}}return n._iq[e]};e.amplitude=n})
(window,document);amplitude.getInstance().init(“YOUR_API_KEY”);
</script>

Replace YOUR_API_KEY with your Amplitude project API key.

🛒 Step 2: Push Events via OpenCart DataLayer

Inject dynamic data from OpenCart into the dataLayer. For example, in catalog/view/theme/*/template/checkout/success.twig:

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

Repeat similar structures for:

  • Product View (product.twig)

  • Add to Cart (via JS listener on add-to-cart button)

  • Begin Checkout (checkout.twig)

🌐 Step 3: GTM Tags for Each Event

🔹 Product Viewed

Trigger: Page Path contains /product/

Tag (Custom HTML):

<script>
amplitude.getInstance().identify(new amplitude.Identify().set('user_id', '{{DL - user_id}}'));
amplitude.getInstance().logEvent("Product Viewed", {
product_id: '{{DL - product_id}}',
product_name: '{{DL - product_name}}',
category: '{{DL - category}}',
price: '{{DL - price}}'
});
</script>

🔹 Add to Cart

Use a click trigger on the Add to Cart button.

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

🔹 Begin Checkout

Trigger: Page path contains /checkout

html
<script>
amplitude.getInstance().logEvent("Begin Checkout", {
cart_value: '{{DL - cart_total}}',
item_count: '{{DL - item_count}}'
});
</script>

🔹 Purchase

Trigger: Custom Event = purchase

<script>
amplitude.getInstance().identify(new amplitude.Identify().set('user_id', '{{DL - user_id}}'));
amplitude.getInstance().logEvent("Purchase", {
transaction_id: '{{DL - transaction_id}}',
revenue: '{{DL - revenue}}',
currency: '{{DL - currency}}',
email: '{{DL - email}}'
});
</script>

🔐 Consent Handling

If GDPR/CCPA applies, wrap your Amplitude tags in conditional logic:

if (window.consent_granted === true) {
amplitude.getInstance().logEvent("Event Name", {...});
}

Or, use GTM’s built-in Consent Mode to block tags until ad_storage or analytics_storage is granted.

🧪 Debugging

Tool Purpose
GTM Preview Mode Validate variables and triggers
Amplitude Debug Enable via browser dev console: localStorage.setItem('amplitude_debug', true)
Amplitude UI View real-time event stream

🧠 Strategic Tips

  • Use identify() with user_id to enable cross-device journey analysis.

  • Track refund events via server-side GTM and send to Amplitude’s HTTP API if needed.

  • Enable Amplitude’s cohort exports to ad platforms using the Segment or mParticle bridge.

📊 Funnel Events Summary

Event Location Purpose
Product Viewed PDP Template Engagement stage
Add to Cart Button Click Intent stage
Begin Checkout Checkout Entry Decision stage
Purchase Order Success Page Conversion + Revenue tracking

Related posts:

Default ThumbnailSetting Up User ID & Login Data for Cross-Device Attribution in GA4 Default ThumbnailOpencart GA4 Enhanced eCommerce Tracking using Google Tag Manager Default ThumbnailOpencart GA4 eCommerce Tracking using Google Tag Manager Default ThumbnailFirst-Party Data Enrichment via Server-Side Data Pipelines Default ThumbnailTracking Subscription Conversions with Server-Side Events Default ThumbnailTracking Refunds & Returns Server-Side for Analytics Accuracy Default ThumbnailServer-Side Email and SMS Event Tracking Integration Default ThumbnailOpenCart to Mixpanel Event Mapping via GTM for Customer Funnel Insights

Leave a Reply

Your email address will not be published. Required fields are marked *