Understanding where users drop off in your osCommerce store’s purchase journey is critical for Conversion Rate Optimization (CRO). GA4’s Exploration reports and enhanced ecommerce events—when combined strategically via Google Tag Manager—can provide powerful, actionable funnel insights.

In this article, you’ll learn how to implement Purchase Funnel Tracking and perform in-depth GA4 funnel analysis tailored for osCommerce.

🧰 Prerequisites

• Google Tag Manager installed on osCommerce
• GA4 Configuration Tag already published
• Enhanced Ecommerce Events implemented (view_item, add_to_cart, begin_checkout, purchase)
• Access to checkout_success.php and other relevant templates

---

🎯 Goals of Funnel Analysis

• Identify drop-offs from product view → add to cart → checkout → purchase
• Segment funnels by device, product category, source/medium
• Attribute purchase values accurately
• Improve CRO through data-backed insights

🛒 Step 1: Define GA4 Funnel Events for osCommerce

Funnel Step	GA4 Event	Triggered On
Product View	view_item	Product detail page
Add to Cart	add_to_cart	Add to cart click
View Cart	view_cart	Cart page load
Begin Checkout	begin_checkout	Checkout page load (Step 1)
Add Shipping Info	add_shipping_info	Shipping page or step 2
Purchase	purchase	Order success / thank-you page

🧠 Step 2: Data Layer Push on Key Pages in osCommerce

Product Page →view_item

In product_info.php:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: "view_item",
  ecommerce: {
    currency: "USD",
    value: <?= $product['price'] ?>,
    items: [{
      item_id: "<?= $product['model'] ?>",
      item_name: "<?= $product['name'] ?>",
      item_category: "<?= $product['category'] ?>",
      price: <?= $product['price'] ?>,
      quantity: 1
    }]
  }
});
</script>

Add to Cart → add_to_cart

In your “Add to Cart” button (usually in product_info.php or JS handler):

<button class="btn btn-primary add-to-cart-btn" 
  data-id="<?= $product['model'] ?>"
  data-name="<?= $product['name'] ?>"
  data-price="<?= $product['price'] ?>"
  onclick="addToCartGTM(this)">
  Add to Cart
</button>

<script>
function addToCartGTM(elem) {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: "add_to_cart",
    ecommerce: {
      currency: "USD",
      value: parseFloat(elem.dataset.price),
      items: [{
        item_id: elem.dataset.id,
        item_name: elem.dataset.name,
        price: parseFloat(elem.dataset.price),
        quantity: 1
      }]
    }
  });
}
</script>

Checkout Page → begin_checkout

In checkout_shipping.php or checkout.php:

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

Order Success Page → 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 event (view_item, add_to_cart, begin_checkout, purchase):

1. Tag Type: GA4 Event
2. Event Name: Matches GA4’s ecommerce event names
3. Parameters:
   • value → {{DL - ecommerce.value}}
   • currency → {{DL - ecommerce.currency}}
   • items → {{DL - ecommerce.items}}
4. Trigger: Custom Event with name matching your event push (e.g. add_to_cart)

✅ Step 4: Validate Events

Use:

• GTM Preview Mode to validate triggers
• GA4 DebugView to check real-time event data
• Tag Assistant to verify event parameter accuracy

📈 Step 5: Create Funnel Exploration Report in GA4

1. Go to GA4 → Explore → Funnel Exploration
2. Steps:
   • view_item
   • add_to_cart
   • begin_checkout
   • purchase
3. Use custom dimensions (e.g., item_category, device_category, or source/medium)
4. Filter to only non-bounced sessions for better conversion visibility

🧪 Optional Enhancements

Track Intermediate Steps

Add these events for deeper funnel tracking:

• view_cart (on shopping_cart.php)
• add_shipping_info (after shipping selection)
• add_payment_info (after payment selection)

Example:

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

🎯 CRO Tips Based on Funnel Data

Insight	Actionable Fix
Low add_to_cart after view_item	Improve product copy, images, CTAs
Drop after begin_checkout	Simplify checkout forms, reduce steps
Low purchase conversion	Enable trust badges, optimize page speed
Mobile drop-offs	Improve mobile UX and load time

📌 Summary

You now have a fully customized GA4 purchase funnel for osCommerce using GTM:

• Cleanly structured Enhanced Ecommerce events
• GA4 Funnel Exploration reports
• In-depth drop-off analysis
• Actionable CRO insights

🔄 What’s Next?

• Integrate server-side GTM for enhanced attribution
• Use predictive audiences in GA4 to retarget abandoners
• Combine funnel insights with A/B testing tools like VWO or Google Optimize (if re-enabled)