Checkout abandonment is one of the biggest friction points in any ecommerce funnel. For osCommerce stores, tracking checkout drop-offs using GA4 events allows store owners and marketers to identify exactly where users abandon the flow—and optimize accordingly.

In this guide, you’ll learn how to track each checkout step, send GA4-compatible events via GTM, and build a drop-off analysis funnel to improve conversion rates.

🎯 Goals of This Implementation

• Track entry into each checkout step (shipping, billing, payment, confirmation)
• Capture user abandonment/drop-off between steps
• Segment drop-offs by device, source, product, etc.
• Enable targeted CRO and remarketing strategies

🧰 Prerequisites

• Google Tag Manager installed on all osCommerce pages
• GA4 Configuration Tag created in GTM
• osCommerce’s checkout process has multiple step pages (e.g., checkout_shipping.php, checkout_payment.php, checkout_confirmation.php, checkout_success.php)

🛒 Step 1: Identify Checkout Steps in osCommerce

Typical osCommerce checkout pages:

Step	File in osCommerce	GA4 Event to Use
Step 1: Shipping	checkout_shipping.php	begin_checkout
Step 2: Payment Info	checkout_payment.php	add_payment_info
Step 3: Confirmation	checkout_confirmation.php	add_shipping_info
Step 4: Success	checkout_success.php	purchase

🔧 Step 2: Inject dataLayer.push() on Each Page

Step 1 – begin_checkout in checkout_shipping.php

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: "begin_checkout",
  ecommerce: {
    currency: "USD",
    items: <?= json_encode($cart_items_array); ?>
  }
});
</script>

Step 2 – add_payment_info in checkout_payment.php

<script>
dataLayer.push({
  event: "add_payment_info",
  ecommerce: {
    items: <?= json_encode($cart_items_array); ?>,
    payment_type: "Credit Card"
  }
});
</script>

Step 3 – add_shipping_info in checkout_confirmation.php

<script>
dataLayer.push({
  event: "add_shipping_info",
  ecommerce: {
    items: <?= json_encode($cart_items_array); ?>,
    shipping_tier: "Standard"
  }
});
</script>

Step 4 – purchase in checkout_success.php

<script>
dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "<?= $order['id']; ?>",
    value: <?= $order['total']; ?>,
    currency: "USD",
    items: <?= json_encode($order['products']); ?>
  }
});
</script>

🏷️ Step 3: Create GA4 Event Tags in GTM

For each checkout step:

1. GA4 Event Tag: begin_checkout

• Tag type: GA4 Event
• Configuration Tag: Your GA4 config
• Event name: begin_checkout
• Event parameters:
  • items → {{DL - ecommerce.items}}
  • currency → {{DL - ecommerce.currency}}

Trigger: Custom Event = begin_checkout

2. GA4 Event Tag: add_payment_info

• Event name: add_payment_info
• Add parameter payment_type if available

Trigger: Custom Event = add_payment_info

3. GA4 Event Tag: add_shipping_info

• Event name: add_shipping_info
• Parameter shipping_tier = {{DL - ecommerce.shipping_tier}}

Trigger: Custom Event = add_shipping_info

4. GA4 Event Tag: purchase

• Event name: purchase
• Parameters: transaction_id, value, currency, items

Trigger: Custom Event = purchase

✅ Step 4: Test in Preview & GA4 DebugView

1. Enable GTM Preview Mode
2. Navigate through the checkout pages
3. On each page:
   • Ensure correct event is pushed
   • GTM Tag fires as expected

In GA4 → Admin → DebugView, confirm that events are hitting with data

📈 Step 5: Create a Funnel Exploration Report in GA4

1. Go to GA4 → Explore → Funnel Exploration
2. Add Funnel Steps:
   • Step 1: begin_checkout
   • Step 2: add_payment_info
   • Step 3: add_shipping_info
   • Step 4: purchase
3. Choose Breakdown Dimensions:
   • device_category
   • session_source/medium
   • item_category
4. Enable open funnel to track where users drop off

📊 Example Funnel Insights You Can Derive

Insight	Action
High drop-off after shipping → payment	Simplify payment methods or fix errors
Drop after payment → confirmation	Show trust badges, reduce field friction
High mobile abandonment	Optimize form UX for mobile
Segment-based drop-offs	Adjust targeting in PPC/SEO campaigns

🧠 Bonus: Trigger Scroll or Field Abandon Events

To capture early exits:

window.addEventListener("beforeunload", function() {
  if (window.location.pathname.includes("checkout")) {
    dataLayer.push({
      event: "checkout_abandon",
      step: window.location.pathname
    });
  }
});

Set up a GA4 Event Tag checkout_abandon to measure hard exits.

🧾 Summary

You now have a complete GA4-based checkout drop-off tracking system for osCommerce:

• All major checkout steps tracked with ecommerce events
• Events pushed from the server dynamically
• GA4 tags fire based on real user actions
• Funnel visualized in GA4 with custom drop-off insights

🔄 What’s Next?

• Connect Google Ads audience to re-engage abandoners
• A/B test checkout steps using VWO or Google Optimize
• Send checkout step info server-side via GTM SS for better attribution