Ads & Pixels

Snapchat Pixel

Snapchat Pixel is Snapchat's website conversion tracking and audience-building tool. The snapchatPixel() helper seeds the snaptr queue, initializes your pixel, and by default tracks a PAGE_VIEW event as soon as marketing consent is available.

Integrate with c15t

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

const scripts = [snapchatPixel({ 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 from the DOM, so app code should guard snaptr(...) calls until consent is granted again.

You can pass extra init payload and disable the default page-view event when you need finer control:

snapchatPixel({
  pixelId: '123456789012345',
  initOptions: {
    user_email: 'hello@example.com',
  },
  trackPageView: false,
});

Tracking events in your app

c15t gates the Snapchat Pixel script from loading until marketing consent is granted. Your application code that calls Snapchat's runtime API (window.snaptr(...)) is not automatically gated - window.snaptr does not exist until the script is loaded, so unguarded calls before consent throw.

Use snapchatPixelEvent() for typed standard and custom event tracking. Guard event calls by checking consent state. From React:

import { useCallback } from 'react';
import { useConsentManager } from '@c15t/react';
import { snapchatPixelEvent } from '@c15t/scripts/snapchat-pixel';

function CheckoutExample() {
  const { has } = useConsentManager();

  const trackPurchase = useCallback(() => {
    if (has('marketing')) {
      snapchatPixelEvent('PURCHASE', {
        price: 99,
        currency: 'USD',
        transaction_id: 'order-123',
        client_dedup_id: 'event-123',
      });
    }
  }, [has]);

  // Call trackPurchase() from your conversion success path.
}

From plain JavaScript:

import { getOrCreateConsentRuntime } from 'c15t';
import { snapchatPixelEvent } from '@c15t/scripts/snapchat-pixel';

const { consentStore } = getOrCreateConsentRuntime();

if (consentStore.getState().has('marketing')) {
  snapchatPixelEvent('PURCHASE', { price: 99, currency: 'USD' });
}

Types

SnapchatPixelOptions

Warning: ExtractedTypeTable: Could not extract "SnapchatPixelOptions" from "./packages/scripts/src/vendors/ads-and-pixels/snapchat-pixel.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…

SnapchatPixelEventProperties

Warning: ExtractedTypeTable: Could not extract "SnapchatPixelEventProperties" from "./packages/scripts/src/vendors/ads-and-pixels/snapchat-pixel.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…

Script

Warning: ExtractedTypeTable: Could not extract "Script" from "./packages/core/src/libs/script-loader/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…