Advanced Guide: Installing Facebook Pixel in osCommerce Using GTM | Facebook Pixel Setup in osCommerce via GTM

Facebook Pixel is critical for:

Tracking visitor actions (AddToCart, Purchase, etc.)
Creating retargeting audiences
Measuring conversions from Meta Ads

In this guide, we’ll implement the Facebook Pixel in osCommerce via Google Tag Manager, covering:

Pixel base code
Dynamic eCommerce events
Custom data layer setup
Enhanced Purchase tracking
Debugging

✅ Prerequisites

Tool	Requirement
Facebook Business Manager	Pixel ID
GTM Account	Web container
Access to osCommerce	Edit templates or inject GTM snippet
Admin rights	To modify checkout/order confirmation pages

🚀 Step-by-Step Setup

🔹 1. Add GTM to osCommerce

a. Install GTM Snippet

Edit your theme header file (e.g., /includes/header.php or template_top.php) and insert GTM container code right after <head> tag:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Also add the noscript iframe version right after <body> tag.

🔹 2. Add Facebook Pixel Base Code in GTM

a. Create a New Tag in GTM

Tag Type: Custom HTML
Tag Name: FB Pixel – Base Code
HTML Code:

<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src='https://connect.facebook.net/en_US/fbevents.js';
  s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script');
  
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
       src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>

Replace 'YOUR_PIXEL_ID' with your actual Pixel ID.

Trigger: All Pages

🔹 3. Configure osCommerce Data Layer for eCommerce Events

You’ll need to inject data layer events in osCommerce templates for actions like Add to Cart, Initiate Checkout, and Purchase.

🔹 4. AddToCart Event Setup

a. Modify Product Page Template (`product_info.php`)

Before the closing </body>, inject:

<?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 } ?>

b. GTM Tag for AddToCart

Tag Type: Custom HTML
Trigger: Custom Event = add_to_cart
HTML:

<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>

🔹 5. Purchase Event Setup

a. Inject Data Layer on Thank You Page (`checkout_success.php`)

<?php
$order_query = tep_db_query("SELECT orders_id, order_total FROM " . TABLE_ORDERS . " WHERE customers_id = '" . (int)$customer_id . "' ORDER BY orders_id DESC LIMIT 1");
$order = tep_db_fetch_array($order_query);
$order_id = $order['orders_id'];
$order_total = $order['order_total'];
?>
<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: 'purchase',
    ecommerce: {
      value: <?= $order_total ?>,
      currency: 'USD',
      transaction_id: '<?= $order_id ?>'
    }
  });
</script>

b. GTM Tag for Purchase

Tag Type: Custom HTML
Trigger: Custom Event = purchase
HTML:

<script>
  fbq('track', 'Purchase', {
    value: {{DLV - ecommerce.value}},
    currency: {{DLV - ecommerce.currency}},
    contents: [],
    content_type: 'product',
    content_ids: [],
    content_category: '',
    num_items: 1,
    order_id: {{DLV - ecommerce.transaction_id}}
  });
</script>

🔹 6. Test Implementation

Use Facebook Pixel Helper Chrome Extension:

Verify events fire correctly
Look for PageView, AddToCart, and Purchase with parameters

🔹 7. Optional Events (for B2C or B2B flows)

Action	Event Name
View Product	`ViewContent`
Begin Checkout	`InitiateCheckout`
Lead Form Submitted	`Lead`

You can inject additional dataLayer.push() and replicate the tag logic accordingly.

📈 Bonus: Set Up Conversion API (Optional for Advanced Users)

Use server-side GTM to fire deduplicated events using event_id and Meta’s Conversions API to boost attribution accuracy. Let me know if you want the full server-side guide.

✅ Summary

Step	Description
1	Add GTM to osCommerce
2	Add FB Pixel Base Code in GTM
3	Inject Data Layer for key eCommerce events
4	Create FB Event Tags (AddToCart, Purchase, etc.)
5	Test with Pixel Helper
6	Expand with optional B2B/B2C events