TikTok Pixel Setup for South African Stores.

const PIXEL_ID = 'YOUR_TIKTOK_PIXEL_ID';

const loadTikTokPixel = () => {
  if (window.ttq) return;
  !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){for(var e=ttq._i[t]||[],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(PIXEL_ID);
    ttq.page();
  }(window, document, 'ttq');
};

analytics.subscribe('page_viewed', () => {
  if (window.__marketingConsent) loadTikTokPixel();
});

analytics.subscribe('product_viewed', (event) => {
  const p = event.data.productVariant;
  window.ttq?.track('ViewContent', {
    contents: [{ content_id: p.sku, content_name: p.title, quantity: 1, price: Number(p.price.amount) }],
    value: Number(p.price.amount),
    currency: 'ZAR'
  });
});

analytics.subscribe('product_added_to_cart', (event) => {
  const l = event.data.cartLine;
  window.ttq?.track('AddToCart', {
    contents: [{ content_id: l.merchandise.sku, content_name: l.merchandise.title, quantity: l.quantity, price: Number(l.merchandise.price.amount) }],
    value: Number(l.cost.totalAmount.amount),
    currency: 'ZAR'
  });
});

analytics.subscribe('checkout_completed', (event) => {
  const c = event.data.checkout;
  window.ttq?.track('CompletePayment', {
    contents: c.lineItems.map((li) => ({ content_id: li.variant.sku, content_name: li.title, quantity: li.quantity, price: Number(li.variant.price.amount) })),
    value: Number(c.totalPrice.amount),
    currency: c.totalPrice.currencyCode,
    description: 'order ' + c.order.id
  });
});

export interface Env { TIKTOK_ACCESS_TOKEN: string; TIKTOK_PIXEL_ID: string; }

async function sha256(v: string) {
  const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(v.trim().toLowerCase()));
  return [...new Uint8Array(buf)].map(b => b.toString(16).padStart(2, '0')).join('');
}

export default {
  async fetch(req: Request, env: Env): Promise<Response> {
    const ev = await req.json<any>();
    const body = {
      event_source: 'web',
      event_source_id: env.TIKTOK_PIXEL_ID,
      data: [{
        event: ev.event_name, // 'CompletePayment'
        event_time: Math.floor(Date.now() / 1000),
        event_id: ev.event_id,
        user: {
          email: ev.email ? await sha256(ev.email) : undefined,
          phone: ev.phone ? await sha256(ev.phone) : undefined,
          ip: req.headers.get('cf-connecting-ip'),
          user_agent: req.headers.get('user-agent'),
          ttclid: ev.ttclid,
          ttp: ev.ttp,
        },
        properties: {
          contents: ev.contents,
          currency: 'ZAR',
          value: ev.value,
        },
      }],
    };
    const res = await fetch('https://business-api.tiktok.com/open_api/v1.3/event/track/', {
      method: 'POST',
      headers: { 'Access-Token': env.TIKTOK_ACCESS_TOKEN, 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    return new Response(await res.text(), { status: res.status });
  }
};