X Pixel (Twitter Pixel)

X Pixel (formerly Twitter Pixel) is X's conversion tracking and audience building tool. It helps you measure ad performance, retarget website visitors, and optimize campaigns on the X platform.

Official X documentation

• Conversion tracking for websites (X Ads Help)

Integrate with c15t

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

const scripts = [xPixel({ 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: unloaded — c15t removes the script element from the DOM

Configure the integration

You can use the xPixelEvent function to track events. This is a wrapper around the twq function that the X Pixel script uses.

import { xPixelEvent } from '@c15t/scripts/x-pixel';

xPixelEvent('tw-xxxx-xxxx', { value: 10.00, currency: 'USD' });

Tracking events in your app

c15t gates the X Pixel script from loading until marketing consent is granted. Your application code that calls twq or the xPixelEvent helper is not automatically gated — window.twq does not exist before consent is granted, and is removed again if consent is revoked. Unguarded calls throw.

Guard event calls by checking consent state:

import { useCallback } from 'react';
import { useConsentManager } from '@c15t/react';
import { xPixelEvent } from '@c15t/scripts/x-pixel';

function useTrackPurchase() {
  const { has } = useConsentManager();
  return useCallback(() => {
    if (has('marketing')) {
      xPixelEvent('tw-xxxx-xxxx', { value: 10.0, currency: 'USD' });
    }
  }, [has]);
}

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

Types

XPixelOptions

Script

XPixelEvent

XPixelContent