Personalized popups—timed to user behavior like scroll depth or exit intent—are powerful tools for increasing engagement and conversions. By leveraging Google Tag Manager (GTM), GA4 events, and custom JavaScript in OpenCart, you can trigger popups at the right moment without third-party tools.

🧰 Prerequisites

Tool	Purpose
OpenCart (3.x/4.x)	eCommerce platform
GTM Web Container	Implemented across site
GA4 Property	For behavior tracking
Popup Framework	Basic HTML/CSS/JS or tool like SweetAlert
Consent Management	Optional (recommended)

---

🎯 Target Behavior Conditions

Trigger popups based on:

• Scroll Depth: e.g. >60% of product page
• Exit Intent: Cursor moves toward browser close button
• Combined Conditions: Both scroll & exit in session

---

📦 Step 1: Add Scroll Depth Trigger in GTM

A. Enable Built-In Variables

Go to GTM > Variables > Enable:

• Scroll Depth Threshold
• Scroll Direction

B. Create a Scroll Trigger

• Trigger Type: Scroll Depth
• Vertical Scroll Depths: 60, 80
• Pages: Page Path matches RegEx e.g. /product

C. Tag: GA4 Scroll Event

• Tag Type: GA4 Event
• Event Name: scroll_depth
• Event Parameters:
  • scroll_percent: {{Scroll Depth Threshold}}
  • page_path: {{Page Path}}

---

🌐 Step 2: Detect Exit Intent with Custom HTML Tag

Create a Custom HTML tag in GTM:

<script>
(function() {
  let fired = false;
  document.addEventListener("mouseout", function(e) {
    if (!fired && e.clientY < 0) {
      fired = true;
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({ event: 'exit_intent' });
    }
  });
})();
</script>

Trigger: All Pages (or specific to product/cart pages)

---

💬 Step 3: Show Personalized Popup on Scroll + Exit

You can trigger a popup only when both scroll & exit intent have occurred.

A. Create Custom Event Variables in GTM

• event.scroll_depth_triggered = 1 (when scroll event fires)
• event.exit_intent_triggered = 1 (when exit intent fires)

B. Setup Trigger Logic

1. In GTM, create 2 custom triggers:

• Trigger A: Fires event.scroll_depth → pushes variable
• Trigger B: Fires event.exit_intent → pushes variable

2. Create a Custom HTML Tag:

<script>
if (window.scroll_depth_triggered && window.exit_intent_triggered) {
  document.querySelector('#my-exit-popup').style.display = 'block';
}
</script>

Or, use a library:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
if (window.scroll_depth_triggered && window.exit_intent_triggered) {
  Swal.fire({
    title: 'Leaving so soon?',
    text: 'Grab 10% off before you go!',
    icon: 'info',
    confirmButtonText: 'Apply Code'
  });
}
</script>

---

🛒 Step 4: Personalize Popup by Page

Use {{Page Path}} or {{DL - product_id}} to personalize:

Swal.fire({
  title: 'Still thinking about {{DL - product_name}}?',
  text: 'Get 10% off today!',
  confirmButtonText: 'Buy Now'
});

You can pull product ID, category, or cart value from the Data Layer to tailor your offer.

---

📊 Step 5: Track Popup Views in GA4

Send GA4 events when popup is shown and clicked.

GA4 Event Tag – Popup Shown:

• Event Name: popup_shown
• Parameters:
  • page_type: product
  • trigger_type: scroll_exit_combo

GA4 Event Tag – Popup Clicked:

Use a Custom Event Trigger when popup button is clicked, then push:

dataLayer.push({ event: 'popup_clicked', trigger_type: 'scroll_exit_combo' });

Track that in GA4 with another event tag.

---

🔐 Step 6: Consent-Mode Safe (Optional)

Wrap popup and GA4 events with a consent check:

if (window.consent_granted === true) {
  dataLayer.push({ event: 'popup_shown' });
}

---

🧪 Step 7: QA + Debugging

Tool	Use
GTM Preview Mode	Check firing of both events
GA4 DebugView	Validate scroll/exit events
Browser Console	Test popup firing logic

---

📈 Strategic Use Cases

Use Case	Example Behavior
Cart Abandoners	Show exit popup w/ discount
Product Page Lurkers	Scroll + no add-to-cart
Mobile Browsers >80% scroll	Mobile-specific lead capture
Exit on Checkout Page	Show trust-building popup

---