Hotjar provides visual behavior analytics like session recordings, heatmaps, and user feedback tools. Integrating Hotjar into OpenCart helps you analyze how users interact with your product pages, cart flow, and checkout steps—offering key insights to boost conversions and reduce drop-offs.

🧰 Prerequisites

Item	Description
OpenCart 3.x or 4.x	Store platform
Google Tag Manager	For deployment and trigger control
Hotjar Site ID	Available from your Hotjar dashboard
Consent Banner	Required for GDPR/CCPA compliance

---

🎯 Objective

• Record visitor sessions
• Generate heatmaps for PDP, cart, and checkout
• Enable feedback polls or surveys
• Use GTM for granular control and triggering

---

📦 Step 1: Get Your Hotjar Site ID

1. Log into https://insights.hotjar.com
2. Create or select your OpenCart site
3. Copy your unique Hotjar Site ID

---

🌐 Step 2: Add Hotjar Script in GTM

Create a new GTM tag:

• Tag Type: Custom HTML
• Trigger: All Pages (or conditional triggers after consent)

<!-- Hotjar Tracking Code -->
<script>
(function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid: YOUR_HOTJAR_ID, hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

✅ Replace YOUR_HOTJAR_ID with your Hotjar Site ID.

---

🔐 Step 3: Consent-Only Execution (Optional but Recommended)

Wrap the tag in a GTM Consent Initialization Trigger or use a custom variable:

<script>
if (window.consent_granted === true) {
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid: YOUR_HOTJAR_ID, hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
}
</script>

Or configure GTM Consent Settings:

• Enable "ad_storage" or "analytics_storage" before tag fires.

---

🛒 Step 4: Set Up Triggers for Key Page Types

Instead of firing Hotjar on all pages, fire only on key funnel steps:

Trigger Name	URL Path Condition	Use
Product View Page	Page Path contains /product	Heatmaps + session replay
Cart Page	Page Path is /index.php?route=checkout/cart	Behavior before checkout
Checkout Page	Page Path contains /checkout	Funnel abandonment cues
Success Page	Page Path contains /success	Post-conversion analysis

You can also use custom event triggers for finer control.

---

👁️ Step 5: Add Custom Hotjar Events (Optional)

Use hj('event', 'name') to tag sessions.

Example: Track Checkout Start

In checkout.twig:

<script>
if (typeof hj === "function") {
  hj('event', 'checkout_started');
}
</script>

Use these in GTM tags too:

<script>
hj('event', 'product_viewed');
</script>

Then use the Hotjar filters to isolate sessions containing those events.

---

💬 Step 6: Trigger Feedback Polls on Key Pages

Example: Show survey after purchase

<script>
if (typeof hj === "function") {
  hj('trigger', 'purchase_feedback');
}
</script>

Then configure a Hotjar Survey to appear only for the purchase_feedback trigger.

---

🧪 Step 7: Debug Your Setup

Tool	Use
GTM Preview	Ensure tag and trigger activation
Hotjar Site Dashboard	Confirm data is being received
Hotjar Live View	Watch real-time sessions

---

🎯 Strategic Benefits

• Visualize clicks, scrolls, drop-offs
• Learn why users abandon cart or checkout
• Collect user feedback on product pages
• Understand session replay behavior

---