Microsoft Clarity is a free behavioral analytics tool offering session recordings, heatmaps, rage click detection, and powerful filters. In this tutorial, you’ll learn how to integrate Clarity into OpenCart via Google Tag Manager (GTM), and enhance it with event-based filters like product views, add-to-cart actions, and checkout initiations.

🧰 Prerequisites

Requirement	Description
OpenCart (v3.x/4.x)	Your eCommerce platform
GTM Web Container	Installed on OpenCart
Microsoft Clarity	Project ID from clarity.microsoft.com
Consent Banner (Optional)	GDPR/CCPA compliance

---

🎯 What You’ll Achieve

• Full session recording and heatmaps on OpenCart
• Tag sessions with custom events (e.g., “purchase”, “view_product”)
• Filter recordings by user interactions
• Respect consent with conditional loading

---

📦 Step 1: Get Your Clarity Project ID

1. Sign in at clarity.microsoft.com
2. Create a new project (site)
3. Copy the Project ID from the installation instructions

---

🌐 Step 2: Add Microsoft Clarity Script via GTM

In your GTM Web Container:

• Tag Type: Custom HTML
• Trigger: All Pages (or conditional based on consent)

<script type="text/javascript">
(function(c,l,a,r,i,t,y){
  c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
  t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
  y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "YOUR_CLARITY_PROJECT_ID");
</script>

✅ Replace YOUR_CLARITY_PROJECT_ID with your actual Clarity ID.

---

🔐 Step 3: Consent-Based Loading (Optional)

To respect privacy regulations, use GTM consent triggers or wrap your script:

<script>
if (window.consent_granted === true) {
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "YOUR_CLARITY_PROJECT_ID");
}
</script>

Or use GTM’s built-in Consent Mode and enable only after "analytics_storage" is granted.

---

🛒 Step 4: Push Custom DataLayer Events in OpenCart

Add these in appropriate .twig templates:

A. Product Detail Page

In product.twig:

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

B. Add to Cart Event

In your cart button JS handler or via click listener:

dataLayer.push({
  event: 'add_to_cart',
  product_id: '{{ product_id }}',
  price: '{{ price }}'
});

C. Checkout Start

In checkout.twig:

<script>
dataLayer.push({
  event: 'checkout_started'
});
</script>

---

🎯 Step 5: Fire Clarity Custom Events via GTM

Example: Tag Product View Sessions

• Trigger: Custom Event = product_viewed
• Tag Type: Custom HTML

<script>
clarity("set", "product_viewed", true);
</script>

Repeat for:

• add_to_cart → clarity("set", "add_to_cart", true)
• checkout_started → clarity("set", "checkout_started", true)
• purchase_complete → clarity("set", "purchase", true)

You can also push metadata:

<script>
clarity("set", "cart_value", "{{DL - cart_total}}");
</script>

---

🔎 Step 6: Filter Recordings by Custom Tags

After custom tags are pushed:

1. Go to Clarity > Recordings
2. Use the Filter by Custom Tags
   • Example: product_viewed, checkout_started
3. Combine filters with Device, Browser, Page, or Country

---

🧪 Step 7: Test & Debug

Tool	Purpose
GTM Preview	Confirm triggers and tag fire
Clarity Dashboard	View incoming sessions and tags
Clarity Debug Tool	Use browser DevTools > Network tab

You should see https://www.clarity.ms/tag/ load and custom events appear.

---

📈 Bonus: Funnel Insights with Clarity

Use Clarity’s Filters + Heatmaps to evaluate:

Funnel Stage	Filter Tag	Use
Product Browsing	product_viewed	Scroll/click depth on PDP
Intent	add_to_cart	Rage clicks on add buttons
Conversion Flow	checkout_started	Drop-off points in checkout
Post-Purchase	purchase	Survey triggers

---