Offering back-in-stock notifications is a powerful strategy to recapture lost demand and build retention. But are you tracking how many users subscribe to these alerts? With Google Tag Manager (GTM) and GA4, you can track custom events when users sign up for back-in-stock notifications—helping you:

• Measure product-level demand
• Identify restocking priorities
• Segment users for retargeting

🧰 Prerequisites

Component	Purpose
OpenCart 3.x / 4.x	Storefront
GTM Installed	Web container
GA4 Configured	Connected via GTM
Email Module	Optional: extension handling stock alerts

---

🧱 Step 1: Add HTML/JS for Back-in-Stock Signup Trigger

If you already have a back-in-stock notification module, locate the form/button where users input email. Otherwise, you can implement a basic version like this in product.twig (only for out-of-stock products):

{% if product.quantity <= 0 %}
<div id="back-in-stock-box">
  <label for="bis-email">Notify me when available:</label>
  <input type="email" id="bis-email" placeholder="Enter your email">
  <button id="bis-submit" data-product-id="{{ product.product_id }}" data-product-name="{{ product.name }}">Notify Me</button>
</div>
{% endif %}

---

🧠 Step 2: Trigger dataLayer.push() on Button Click

Add the following JavaScript in footer.twig or via GTM Custom HTML tag:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const btn = document.getElementById('bis-submit');
  if (btn) {
    btn.addEventListener('click', function () {
      const email = document.getElementById('bis-email').value;
      if (email) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          event: 'back_in_stock_signup',
          email: email,
          product_id: btn.getAttribute('data-product-id'),
          product_name: btn.getAttribute('data-product-name'),
          page_path: window.location.pathname
        });
      }
    });
  }
});
</script>

✅ This fires a custom back_in_stock_signup event to GTM with product and email info.

---

🛠️ Step 3: Create GTM Variables

In GTM, create Data Layer Variables for:

• DLV - email → email
• DLV - product_id → product_id
• DLV - product_name → product_name
• DLV - page_path → page_path

---

🧲 Step 4: Build the GA4 Event Tag in GTM

Create a new GA4 Event Tag:

• Event Name: back_in_stock_signup
• Configuration Tag: Select your GA4 config tag
• Event Parameters:

Name	Value
email	{{DLV - email}}
product_id	{{DLV - product_id}}
product_name	{{DLV - product_name}}
page_path	{{DLV - page_path}}

✅ You can optionally hash the email before sending using SHA-256 in JS or server-side for privacy.

---

⏰ Step 5: Set the Trigger

Create a trigger:

• Type: Custom Event
• Event name: back_in_stock_signup
• Trigger on: All Pages

Attach this trigger to the GA4 event tag.

---

🧪 Step 6: Debug Your Setup

Tool	Purpose
GTM Preview Mode	Ensure event fires with right data
GA4 DebugView	See back_in_stock_signup appear
Dev Console	Inspect dataLayer pushes manually

---

🔐 Optional: Consent-Based Triggering

If you’re using a Consent Management Platform (CMP), wrap dataLayer.push() in:

if (window.Cookiebot && Cookiebot.consents.given.marketing) {
  dataLayer.push({ ... });
}

Or use GTM Consent Settings to conditionally fire this tag.

---

📈 Strategic Use Cases

Use Case	Description
Segment by product demand	Products with highest signup interest
Trigger remarketing ads post-stock	Sync with ad platforms
Email list enrichment	Collect new leads via back-in-stock alerts
Track restock ROI	Link restock actions to actual conversions

---

🧠 Pro Tips

• 🔁 Pair this with a GA4 conversion event when restock email converts
• 📤 Use the email + product_id to send event server-side (for advanced remarketing)
• 📊 Create a funnel: view_item → back_in_stock_signup → purchase

---