🎯 Objective

Enable accurate tracking of AddToCart and InitiateCheckout Facebook Pixel events for:

• Optimizing Meta ad performance
• Building remarketing audiences
• Measuring drop-off before purchase

---

✅ Tools & Requirements

Tool	Purpose
Facebook Pixel ID	For Meta Ads tracking
Google Tag Manager	To manage Pixel firing
osCommerce Access	Modify templates to inject dataLayer
Chrome Pixel Helper	Debug and validate events

---

🧱 Implementation Plan

1. Add dataLayer.push() for AddToCart
2. Add dataLayer.push() for InitiateCheckout
3. Set up GTM triggers
4. Configure Facebook Pixel tags
5. Test with Meta Pixel Helper

---

🔹 Step 1: Inject AddToCart dataLayer in osCommerce

File to edit: /product_info.php

Find the Add to Cart form — typically a form[name="cart_quantity"]

🧩 Add the following code before </body>:

<?php
if (isset($_GET['products_id'])) {
  $product_id = (int)$_GET['products_id'];
  $product_query = tep_db_query("SELECT products_name, products_price FROM " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_PRODUCTS . " p WHERE pd.products_id = p.products_id AND pd.language_id = '" . (int)$languages_id . "' AND p.products_id = '" . (int)$product_id . "'");
  $product = tep_db_fetch_array($product_query);
?>
<script>
window.dataLayer = window.dataLayer || [];

document.querySelector('form[name="cart_quantity"]').addEventListener('submit', function() {
  dataLayer.push({
    event: 'add_to_cart',
    ecommerce: {
      content_ids: ['<?= $product_id ?>'],
      content_name: '<?= addslashes($product['products_name']) ?>',
      value: <?= $product['products_price'] ?>,
      currency: 'USD'
    }
  });
});
</script>
<?php } ?>

✅ This pushes an event into the data layer when a user adds an item to cart.

---

🔹 Step 2: Inject InitiateCheckout dataLayer on Checkout Start Page

File to edit: /checkout_shipping.php (or first step of your checkout flow)

🧩 Add this code at the bottom:

<?php
$cart_total = $cart->show_total(); // Or use your session-based cart total
?>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'initiate_checkout',
  ecommerce: {
    value: <?= $cart_total ?>,
    currency: 'USD'
  }
});
</script>

✅ This will push the initiate_checkout event when checkout begins.

---

🔹 Step 3: Configure GTM Triggers

📌 a. AddToCart Trigger

• Type: Custom Event
• Event name: add_to_cart

📌 b. InitiateCheckout Trigger

• Type: Custom Event
• Event name: initiate_checkout

---

🔹 Step 4: Configure Facebook Pixel Tags in GTM

🏷️ a. AddToCart Tag

• Tag Type: Custom HTML
• Trigger: add_to_cart

<script>
fbq('track', 'AddToCart', {
  content_ids: {{DLV - ecommerce.content_ids}},
  content_name: '{{DLV - ecommerce.content_name}}',
  value: {{DLV - ecommerce.value}},
  currency: '{{DLV - ecommerce.currency}}'
});
</script>

🏷️ b. InitiateCheckout Tag

• Tag Type: Custom HTML
• Trigger: initiate_checkout

<script>
fbq('track', 'InitiateCheckout', {
  value: {{DLV - ecommerce.value}},
  currency: '{{DLV - ecommerce.currency}}'
});
</script>

🔍 Step 5: Debug and Validate

✅ Use the Facebook Pixel Helper Chrome Extension

• Visit a product page
• Click “Add to Cart” and verify AddToCart fires
• Start checkout and verify InitiateCheckout fires

✅ Use Facebook Events Manager

• Go to Test Events
• Monitor real-time event flows

---

💡 Bonus: Send AddToCart via Facebook CAPI (Optional Advanced)

If you use Server-Side GTM, you can forward AddToCart/InitiateCheckout events as server-side events. Include event_id and send it in both Pixel and CAPI calls to enable deduplication.

Let me know if you want a server-side extension of this article.

---

🔐 Privacy Best Practices

• Only push identifiable data with user consent
• Hash emails or phone numbers when implementing CAPI
• Use Consent Mode v2 or a cookie banner before firing pixels

---

✅ Summary

Feature	Implementation
AddToCart	Triggered via form submit listener + GTM
InitiateCheckout	Fired on checkout start page load
Facebook Pixel Tags	Fired using GTM with dynamic values
Validation	Meta Pixel Helper + Test Events
Optional	Upgrade to server-side tracking with event deduplication