Shopify TikTok Pixel Generator

// TikTok Pixel custom pixel for Shopify (Web Pixels API).
// Paste into Settings > Customer events > Add custom pixel, save, then click Connect.
const PIXEL_CODE = "CXXXXXXXXXXXXXXXXXXX";

// TikTok's standard base code, adapted to run inside Shopify's pixel sandbox.
!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(o,e){o[e]=function(){o.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 u="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{};ttq._i[e]=[];ttq._t=ttq._t||{};ttq._t[e]=+new Date;
var s=d.createElement("script");s.type="text/javascript";s.async=!0;s.src=u+"?sdkid="+e+"&lib="+t;
var f=d.getElementsByTagName("script")[0];f.parentNode.insertBefore(s,f)};
ttq.load(PIXEL_CODE);ttq.page()}(window,document,'ttq');

const plainId = (id) => (id == null ? undefined : String(id).split('/').pop());
const money = (m) => (m && m.amount != null ? Number(m.amount) : 0);
const round = (x) => Math.round(x * 100) / 100;
function itemOf(variant, quantity) {
  variant = variant || {};
  const product = variant.product || {};
  const variantTitle = variant.untranslatedTitle || variant.title;
  return {
    id: variant.sku || plainId(variant.id),
    name: product.untranslatedTitle || product.title || variant.title,
    variant: variantTitle && variantTitle !== 'Default Title' ? variantTitle : undefined,
    price: money(variant.price),
    quantity: quantity || 1,
  };
}
function checkoutItems(checkout) {
  return (checkout.lineItems || []).map((line) => {
    const quantity = line.quantity || 1;
    const unit = money(line.variant && line.variant.price);
    const allocated = (line.discountAllocations || []).reduce((sum, d) => sum + money(d.amount), 0);
    const price = round(Math.max(0, unit * quantity - allocated) / quantity);
    return Object.assign(itemOf(line.variant, quantity), { price });
  });
}
const itemsValue = (items) => round(items.reduce((sum, item) => sum + item.price * item.quantity, 0));

/* ---------- Events ---------- */
analytics.subscribe('product_viewed', (event) => {
  const variant = event.data.productVariant;
  const item = itemOf(variant, 1);
  ttq.track('ViewContent', { contents: [{ content_id: item.id, content_name: item.name, quantity: 1, price: item.price }], value: item.price, currency: variant.price.currencyCode }, { event_id: 'view_' + item.id + '_' + Date.now() });
});

analytics.subscribe('product_added_to_cart', (event) => {
  const line = event.data.cartLine;
  if (!line) return;
  const item = itemOf(line.merchandise, line.quantity);
  ttq.track('AddToCart', { contents: [{ content_id: item.id, content_name: item.name, quantity: item.quantity, price: item.price }], value: money(line.cost.totalAmount), currency: line.cost.totalAmount.currencyCode }, { event_id: 'cart_' + item.id + '_' + Date.now() });
});

analytics.subscribe('checkout_started', (event) => {
  const checkout = event.data.checkout;
  const items = checkoutItems(checkout);
  ttq.track('InitiateCheckout', { contents: items.map((i) => ({ content_id: i.id, content_name: i.name, quantity: i.quantity, price: i.price })), value: itemsValue(items), currency: checkout.currencyCode }, { event_id: checkout.token });
});

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;
  const order = checkout.order || {};
  const items = checkoutItems(checkout);
  const transactionId = plainId(order.id) || checkout.token;
  ttq.track('CompletePayment', { contents: items.map((i) => ({ content_id: i.id, content_name: i.name, quantity: i.quantity, price: i.price })), value: itemsValue(items), currency: checkout.currencyCode }, { event_id: transactionId });
});