TikTok Pixel

TikTok Pixel is TikTok's conversion tracking and audience targeting tool. It measures ad effectiveness, tracks user actions, and helps optimize your TikTok advertising campaigns.

Integrate with c15t

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/react';
import { tiktokPixel } from '@c15t/scripts/tiktok-pixel';

const scripts = [tiktokPixel({ pixelId: '123456789012345' })];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: 'https://your-instance.c15t.dev',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}

How c15t loads it

• Category: marketing (Ads & Pixels)
• Loads when: marketing consent is granted
• On revocation: persists — c15t pushes the new consent state to ttq so TikTok stops tracking without removing the script

Tracking events in your app

c15t gates the TikTok Pixel script from loading until marketing consent is granted. After consent is granted the script stays in the DOM, and c15t pushes the new consent state to ttq if consent is later revoked.

This means window.ttq is only defined after the user has granted marketing consent at least once. Before that, unguarded calls throw. After that, calls are safe — TikTok's own consent state suppresses tracking when revoked.

import { useCallback } from 'react';
import { useConsentManager } from '@c15t/react';

function useTrackPurchase() {
  const { has } = useConsentManager();
  return useCallback(() => {
    if (has('marketing')) {
      window.ttq?.track('CompletePayment', { value: 10.0, currency: 'USD' });
    }
  }, [has]);
}

function PurchaseButton() {
  const trackPurchase = useTrackPurchase();
  return <button onClick={trackPurchase}>Complete purchase</button>;
}

Types

TikTokPixelOptions

Script