TikTok is a powerful traffic and conversion channel, especially for Gen Z and Millennial-focused brands. But with ad blockers, browser limitations, and cookie restrictions, client-side tracking using only the TikTok Pixel isn’t enough. That’s where TikTok’s Events API (CAPI) comes in—powered by Server-Side Google Tag Manager (ssGTM).

🧰 Prerequisites

Requirement	Notes
OpenCart (v3.x/v4.x)	Full template & backend access
TikTok Pixel & Access Token	From TikTok Ads Manager
Web + Server GTM Containers	Linked to OpenCart & hosted server-side
Consent System (optional)	For GDPR/CCPA regions

---

🗂️ Overview

We’ll implement server-side Purchase tracking like this:

[OpenCart Success Page]
     ↓
[Web GTM Pushes event_id + dataLayer]
     ↓
[Server GTM Receives + Forwards to TikTok CAPI]
     ↓
[TikTok Ads Manager Receives conversion event]

---

🔹 Step 1: Get TikTok Pixel ID and Access Token

1. Go to TikTok Ads Manager → Assets → Event Manager
2. Create/Select Web Event → Copy:
   • Pixel ID (e.g. C93F99XX)
   • Access Token (long secure token for CAPI)

---

🔹 Step 2: Capture Conversion Data on OpenCart Success Page

Edit file: catalog/controller/checkout/success.php

Add:

$order_id = $this->session->data['order_id'];
$order_info = $this->model_checkout_order->getOrder($order_id);
$products = $this->model_checkout_order->getOrderProducts($order_id);

$items = [];
foreach ($products as $product) {
  $items[] = [
    'content_id' => $product['model'],
    'content_name' => $product['name'],
    'quantity' => $product['quantity'],
    'price' => $product['price']
  ];
}

$email = strtolower(trim($order_info['email']));
$phone = preg_replace('/\D/', '', $order_info['telephone']);

$event_payload = [
  'event' => 'tt_purchase',
  'value' => $order_info['total'],
  'currency' => $order_info['currency_code'],
  'content_type' => 'product',
  'content_ids' => array_column($items, 'content_id'),
  'email' => hash('sha256', $email),
  'phone' => hash('sha256', $phone),
  'event_id' => uniqid('tt_', true)
];

$data['tt_event_data'] = json_encode($event_payload);

---

🔹 Step 3: Push Data to GTM in success.twig

In catalog/view/theme/*/template/checkout/success.twig:

{% if tt_event_data %}
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({{ tt_event_data|raw }});
</script>
{% endif %}

✅ This makes the server-safe, hashed event data available in the dataLayer.

---

🔹 Step 4: Setup TikTok Pixel Tag in Web GTM

1. Create a Custom HTML Tag:

<script>
ttq.track('CompletePayment', {
  value: {{DL - value}},
  currency: '{{DL - currency}}',
  contents: {{DL - content_ids}},
  content_type: 'product'
}, {event_id: '{{DL - event_id}}'});
</script>

2. Trigger: Event equals tt_purchase

✅ This fires the Pixel + event_id for deduplication.

---

🔹 Step 5: Forward Event to Server GTM (Optional but Best Practice)

In the same tag, use fetch() or GA4 transport_url method:

<script>
fetch("https://gtm.yoursite.com/event", {
  method: "POST",
  body: JSON.stringify({
    event_name: "tt_purchase",
    email: '{{DL - email}}',
    phone: '{{DL - phone}}',
    value: '{{DL - value}}',
    currency: '{{DL - currency}}',
    event_id: '{{DL - event_id}}',
    content_ids: {{DL - content_ids}}
  }),
  headers: { "Content-Type": "application/json" }
});
</script>

---

🔹 Step 6: Setup TikTok CAPI Tag in Server GTM

Use the TikTok Events API Tag Template:

1. Install from GTM Community Template Gallery:
   TikTok CAPI Template
2. Configure:

Field	Value
Pixel ID	Your TikTok Pixel ID
Access Token	From TikTok Business Manager
Event Name	CompletePayment
Event ID	{{event_id}}
Currency	{{currency}}
Value	{{value}}
Hashed Email	{{email}}
Hashed Phone	{{phone}}
Content IDs	{{content_ids}}

Trigger: Event Name equals tt_purchase

✅ This ensures the event is reliably sent to TikTok even if Pixel is blocked.

---

🔹 Step 7: Deduplicate Pixel + CAPI

Make sure:

• event_id is identical for both Pixel and Server event
• Meta Events Manager shows “Matched” and “Deduplicated”

---

🔹 Step 8: Validate Setup

Tool	Use
TikTok Events Test Tool	Validate CAPI delivery
Server GTM Preview	Check incoming JSON
Chrome DevTools → Network	Check Pixel delivery
TikTok Ads Manager	Monitor conversions and deduplication

---

🧠 Bonus: Add TikTok Click ID (ttclid) to Cookie

Add to header.twig:

<script>
const ttclid = new URLSearchParams(window.location.search).get('ttclid');
if (ttclid) {
  document.cookie = `ttclid=${ttclid}; path=/; max-age=2592000; SameSite=Lax`;
}
</script>

✅ Use this ttclid in Server GTM to tie ad clicks to conversions.

---

📦 Summary Architecture

[OpenCart Success Page]
      ↓
[dataLayer → Web GTM Pixel + Forward to ssGTM]
      ↓                 ↓
[Client Pixel]      [Server-Side GTM]
                          ↓
                   [TikTok Events API]

---