TikTok Pixel Implementation for osCommerce with Event Matching | TikTok Pixel Setup in osCommerce with Event Matching

TikTok Ads can drive massive traffic, but without precise tracking, conversions and remarketing opportunities are lost. This guide walks you through installing the TikTok Pixel with event matching in osCommerce using GTM.

✅ Why Use Event Matching?

TikTok’s Advanced Matching uses hashed personal identifiers (like email) to:

Improve conversion attribution
Recover conversions lost due to cookie blockers
Enhance audience building

🔧 Tools Required

Tool	Purpose
TikTok Pixel	Track user actions
GTM Web	Manage tracking tags
osCommerce Access	Inject dataLayer + templates
TikTok Ads Manager	Create events + get Pixel ID
TikTok Pixel Helper	Debug implementation

🧱 Step-by-Step Implementation

🔹 1. Create a TikTok Pixel

Log in to TikTok Ads Manager
Go to Assets > Event > Website Pixel
Click Create Pixel
Choose “Manually install Pixel code”
Copy your Pixel ID

🔹 2. Add GTM to osCommerce

Add GTM script in:

Header: includes/template_top.php
Body: Insert noscript GTM snippet right after <body>

🔹 3. Add TikTok Pixel Base Code in GTM

a. Tag Configuration

Tag Type: Custom HTML
Trigger: All Pages

b. HTML Code

<script>
!function (w, d, t) {
  w.TiktokAnalyticsObject = t;
  var ttq = w[t] = w[t] || [];
  ttq.methods = ["page", "track", "identify", "instances", "debug", "on", "off", "once", "ready", "alias", "group", "enableCookie", "disableCookie"],
  ttq.setAndDefer = function (t, e) {
    t[e] = function () {
      t.push([e].concat(Array.prototype.slice.call(arguments, 0)))
    }
  };
  for (var i = 0; i < ttq.methods.length; i++) ttq.setAndDefer(ttq, ttq.methods[i]);
  ttq.instance = function (t) {
    var e = ttq._i[t] || [];
    for (var n = 0; n < ttq.methods.length; n++) ttq.setAndDefer(e, ttq.methods[n]);
    return e
  };
  ttq.load = function (e, n) {
    var i = "https://analytics.tiktok.com/i18n/pixel/events.js";
    ttq._i = ttq._i || {}, ttq._i[e] = [], ttq._i[e]._u = i, ttq._t = ttq._t || {}, ttq._t[e] = +new Date,
    ttq._o = ttq._o || {}, ttq._o[e] = n || {};
    var o = document.createElement("script");
    o.type = "text/javascript", o.async = !0, o.src = i + "?sdkid=" + e + "&lib=" + t;
    var a = document.getElementsByTagName("script")[0];
    a.parentNode.insertBefore(o, a)
  };

  ttq.load('YOUR_PIXEL_ID');
  ttq.page();
}(window, document, 'ttq');
</script>

Replace YOUR_PIXEL_ID with your TikTok Pixel ID.

🔹 4. Push AddToCart Event from osCommerce

File: product_info.php

Find the form used for “Add to Cart” and inject the following script before </body>:

<?php
$product_id = $_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>
document.querySelector('form[name="cart_quantity"]').addEventListener('submit', function () {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: 'add_to_cart',
    tiktok_event_data: {
      content_id: '<?= $product_id ?>',
      content_name: '<?= addslashes($product['products_name']) ?>',
      value: <?= $product['products_price'] ?>,
      currency: 'USD'
    }
  });
});
</script>

🔹 5. Trigger TikTok AddToCart Tag in GTM

a. Trigger:

Type: Custom Event
Event name: add_to_cart

b. Tag: Custom HTML

<script>
ttq.track('AddToCart', {
  content_id: '{{DLV - tiktok_event_data.content_id}}',
  content_name: '{{DLV - tiktok_event_data.content_name}}',
  value: {{DLV - tiktok_event_data.value}},
  currency: '{{DLV - tiktok_event_data.currency}}'
});
</script>

🔹 6. Push Purchase + Email to dataLayer in checkout_success.php

<?php
$order_query = tep_db_query("SELECT orders_id, order_total, customers_email_address 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'];
$customer_email = $order['customers_email_address'];
?>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'purchase',
  tiktok_event_data: {
    value: <?= $order_total ?>,
    currency: 'USD',
    order_id: '<?= $order_id ?>',
    email: '<?= $customer_email ?>'
  }
});
</script>

🔹 7. GTM Tag – TikTok Purchase with Advanced Matching

a. Trigger: Custom Event = `purchase`

b. Tag Code:

<script>
function sha256(str) {
  return crypto.subtle.digest("SHA-256", new TextEncoder().encode(str))
    .then(hash => {
      return Array.from(new Uint8Array(hash))
        .map(b => b.toString(16).padStart(2, '0')).join('');
    });
}

sha256('{{DLV - tiktok_event_data.email}}').then(function(hashedEmail) {
  ttq.track('CompletePayment', {
    value: {{DLV - tiktok_event_data.value}},
    currency: '{{DLV - tiktok_event_data.currency}}',
    order_id: '{{DLV - tiktok_event_data.order_id}}',
    email: hashedEmail
  });
});
</script>

✅ This sends a CompletePayment event with hashed email and order details for improved attribution.

🔍 Testing & Validation

Use the TikTok Pixel Helper (Chrome Extension)
Go to TikTok Events Manager > Test Events
Verify:
- PageView, AddToCart, and CompletePayment fire
- Events contain matching values and hashed email

🔐 Privacy & Consent

Hash personal data (like emails) before sending to TikTok
Integrate Consent Mode or a Cookie Banner (optional but recommended)
Respect CCPA/GDPR guidelines if applicable

🔁 Bonus: Upgrade to TikTok Events API (Server-Side)

For even more accurate attribution:

Send events via TikTok Events API from GTM Server container
Use event_id to deduplicate with pixel events

Let me know if you want a server-side version next.

✅ Summary

Step	Description
1	Install TikTok Pixel via GTM
2	Inject AddToCart + Purchase data into `dataLayer`
3	Create GTM Tags for each event
4	Include event matching using email hashing
5	Test with TikTok Pixel Helper