Implementing TikTok Conversion API (Events API) through Server-Side GTM ensures reliable conversion tracking even if the browser is restricted by ad blockers or iOS limitations. This setup in OpenCart allows for higher accuracy and enhanced campaign attribution.

---

🧰 Prerequisites

• OpenCart 3.x or 4.x
• TikTok Business Account with Pixel ID and Access Token
• GTM Web and Server Containers
• HTTPS domain
• Consent solution (GDPR/CCPA)

---

🧱 Step 1: Install TikTok Pixel in GTM (Web)

1. Go to GTM Web > New Tag
2. Tag Type: Custom HTML
3. Trigger: All Pages

<!-- TikTok Pixel Base Code -->
<script>
!function (w, d, t) {
  w.TiktokAnalyticsObject = t;
  var ttq = w[t] = w[t] || [];
  ttq.methods = ["page","track"],
  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.load = function (e) {
    var n = d.createElement("script");
    n.async = !0;
    n.src = "https://analytics.tiktok.com/i18n/pixel/events.js?sdkid=" + e;
    var a = d.getElementsByTagName("script")[0];
    a.parentNode.insertBefore(n, a)
  };
  ttq.load('YOUR_PIXEL_ID');
  ttq.page();
}(window, document, 'ttq');
</script>

---

💳 Step 2: Data Layer Push on Purchase (success.twig)

<script>
dataLayer = dataLayer || [];
dataLayer.push({
  event: 'purchase',
  transaction_id: '{{ order_id }}',
  value: {{ order_total }},
  currency: '{{ currency }}',
  contents: [{% for product in products %}
    {
      id: '{{ product.model }}',
      name: '{{ product.name }}',
      quantity: {{ product.quantity }},
      price: {{ product.price }}
    },
  {% endfor %}],
  email: '{{ email | lower | sha256 }}',
  phone: '{{ phone | regex_replace('/\D/', '') | sha256 }}',
  event_id: 'tt_{{ order_id }}'
});
</script>

---

🌐 Step 3: Send Payload to Server via Web GTM

Create a Custom HTML tag:

• Trigger: purchase

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

---

📡 Step 4: TikTok Events API Setup in Server GTM

In Server GTM:

1. Trigger: Custom event = CompletePayment
2. Tag Type: HTTP Request

POST https://business-api.tiktok.com/open_api/v1.2/pixel/track/
{
  "pixel_code": "YOUR_PIXEL_ID",
  "event": "CompletePayment",
  "event_id": "{{event_id}}",
  "timestamp": {{timestamp}},
  "properties": {
    "contents": {{contents}},
    "currency": "{{currency}}",
    "value": "{{value}}",
    "order_id": "{{transaction_id}}",
    "user": {
      "email": "{{email}}",
      "phone_number": "{{phone}}"
    }
  }
}

---

🔁 Step 5: Deduplication & Attribution

Ensure both client-side TikTok pixel and server event share the same event_id.

---

🔐 Step 6: Consent Compliance

Use consent_granted variable to ensure tracking only fires after user grants consent.

---

🧪 Step 7: Debugging

Tool	Purpose
TikTok Events Manager	Validate pixel + server events
GTM Preview Mode	Inspect server + web payloads
Browser Dev Tools	Verify network requests

---