c15t/docs/integrations/snapchat-pixel.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Snapchat Pixel
description: Measure Snapchat ad performance and build remarketing audiences
  with a prebuilt pixel helper.
group: integrations
icon: snapchat
---
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

**React**

```tsx
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>
  );
}
```

**Next.js**

```tsx
'use client';

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

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

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: '/api/c15t',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**JavaScript**

```ts
import { getOrCreateConsentRuntime } from 'c15t';
import { snapchatPixel } from '@c15t/scripts/snapchat-pixel';

getOrCreateConsentRuntime({
  mode: 'hosted',
  backendURL: 'https://your-instance.c15t.dev',
  scripts: [snapchatPixel({ pixelId: '123456789012345' })],
});
```

## 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:

```ts
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:

```tsx
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:

```ts
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

|Property|Value|
|:--|:--|
|Type Name|\`SnapchatPixelOptions\`|
|Source Path|\`./packages/scripts/src/vendors/ads-and-pixels/snapchat-pixel.ts\`|

\*ExtractedTypeTable: Could not extract "SnapchatPixelOptions" from "./packages/scripts/src/vendors/ads-and-pixels/snapchat-pixel.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

### SnapchatPixelEventProperties

|Property|Value|
|:--|:--|
|Type Name|\`SnapchatPixelEventProperties\`|
|Source Path|\`./packages/scripts/src/vendors/ads-and-pixels/snapchat-pixel.ts\`|

\*ExtractedTypeTable: Could not extract "SnapchatPixelEventProperties" from "./packages/scripts/src/vendors/ads-and-pixels/snapchat-pixel.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

### Script

|Property|Value|
|:--|:--|
|Type Name|\`Script\`|
|Source Path|\`./packages/core/src/libs/script-loader/types.ts\`|

\*ExtractedTypeTable: Could not extract "Script" from "./packages/core/src/libs/script-loader/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*