# The Trade Desk

The c15t theTradeDeskPixel helper loads The Trade Desk Universal Pixel only after visitors allow marketing in Inth. On withdrawal, c15t reloads the page.

## Key facts

- **Tool:** The Trade Desk
- **Category:** Advertising
- **Consent categories:** Marketing
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/the-trade-desk)
- [The Trade Desk](https://www.thetradedesk.com/)

Record The Trade Desk conversions and build ad audiences only after visitors allow marketing. The Universal Pixel waits for that choice.

Inth keeps the consent record of each choice, with the visitor’s country and the policy that applied.

[Start for free](/dashboard/sign-up)

## Before you start

You need an Inth project that connects to your app, c15t in that app and your IDs. Copy the advertiser ID and Universal Pixel IDs from your account snippet.

This helper uses the Universal Pixel 3 loader. Unified ID 2.0 setup is separate.

[Open the quickstart for your framework](https://c15t.com/docs/frameworks)

## How consent works with The Trade Desk

Before marketing has permission, the c15t theTradeDeskPixel helper defines no pixel globals and adds no loader.

After permission, the helper creates ttdConversionEventsLayer and a ttdConversionEvents function. It queues one init call and one event call, then adds the async loader.

The SDK reads TCF and GPP signals where they apply. Those signals control the SDK after it loads. They do not replace the c15t gate.

The Trade Desk has no API to stop its SDK. So on withdrawal, the helper leaves the SDK in place, and the default reload of c15t removes it.

## Installation

The Trade Desk has one load mode in c15t. The helper waits for marketing permission.

### Wait for permission

No request goes to The Trade Desk until the visitor accepts marketing. On withdrawal, c15t reloads the page.

```ts
theTradeDeskPixel({ advertiserId, pixelIds })
```

An opt-out policy or no policy gives optional categories permission before a choice. Then The Trade Desk loads on the first page. This guide uses an opt-in policy.

## Setup steps

#### Install the integration package

Add the helpers next to c15t. An import alone does not start the Universal Pixel.

```
pnpm add @c15t/integrations
```

#### Add your IDs

Pass the advertiser ID and a list of pixel IDs. With dataProcessingOption, the helper passes it to init and to the event.

```
import { theTradeDeskPixel } from '@c15t/integrations/the-trade-desk';

export const scripts = [
  theTradeDeskPixel({ advertiserId: 'ADVERTISER_ID', pixelIds: ['PIXEL_ID'] }),
];
```

If your page already defines ttdConversionEvents or the layer, the helper leaves them alone.

### Register it with your existing setup

#### Next.js

Add scripts to c15t.config.ts, next to next.config.ts. Keep the rest of your config, such as mode, in the same call. App Router, Pages Router and static export read the same file.

```
import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });
```

#### TanStack Start

Pass scripts to the ConsentRoot in your root route. Import helpers in the route module, not in a server function: script configurations carry callbacks.

```
import { scripts } from '../consent-scripts';

<ConsentRoot state={consent} scripts={scripts}>
```

#### React

Add scripts to the options of your ConsentProvider, next to mode. Keep the banner, dialog and preferences link inside the provider.

```
import { scripts } from './consent-scripts';

<ConsentProvider options={{ mode, scripts }}>
```

#### Nuxt

Register scripts under the c15t key in app.config.ts. Keep them out of nuxt.config.ts, which reaches the browser as JSON and drops the helper callbacks.

```
import { scripts } from '../src/consent-scripts';

export default defineAppConfig({
  c15t: { scripts },
});
```

#### Vue

Pass scripts to the c15tVue plugin call you have now. The plugin starts one script loader when the app mounts.

```
import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
import { scripts } from './consent-scripts';

app.use(c15tVue, {
  mode: manifest(),
  scripts,
});
```

#### Astro

Add scripts to the client entrypoint, which the integration finds on its own. Keep helpers out of astro.config.mjs: its options are serialized into the page.

```
import type { C15tClientOptionsExtension } from 'c15t/astro';
import { scripts } from './consent-scripts';

export default { scripts } satisfies C15tClientOptionsExtension;
```

#### Svelte

Pass scripts as a prop to the ConsentProvider you have now. The provider owns the loader and disposes it on unmount.

```
<script lang="ts">
  import { ConsentProvider, manifest } from 'c15t/svelte';
  import { scripts } from './consent-scripts';
</script>

<ConsentProvider mode={manifest()} {scripts}>
  <!-- Your app and consent UI -->
</ConsentProvider>
```

#### SvelteKit

Add scripts to the ConsentRoot in the root layout. Import helpers in the layout component, not in +layout.server.ts: a server load cannot send functions to the browser.

```
<script lang="ts">
  import { ConsentRoot } from 'c15t/svelte';
  import { scripts } from '../consent-scripts';

  let { children, data } = $props();
</script>

<ConsentRoot state={data.consent} {scripts}>
  {@render children()}
</ConsentRoot>
```

#### HTML: Paste the vendor’s snippet behind consent

The helpers need a bundler. On a page with the c15t script tag, paste the vendor’s own snippet instead and keep it inert until visitors allow its category. Helper options, such as loadMode, do not apply.

```
<script type="text/plain" data-c15t-category="marketing">
  // The vendor's snippet, unchanged
</script>
```

#### JavaScript

Pass scripts to init() from @c15t/browser, next to your mode. With createConsentRuntime, pass scripts to it instead.

```
import { init, manifest } from '@c15t/browser';
import { scripts } from './consent-scripts';

const consent = init({
  mode: manifest(),
  scripts,
});
```

Delete the direct snippet and each tag manager copy, so they cannot load The Trade Desk without consent. Send your own conversion calls only while marketing has permission.

## Verify your setup

Use a fresh browser profile with an opt-in policy. Open DevTools Network and filter by adsrvr.org. Then test the three states.

- **Before a choice**: No request goes to adsrvr.org. Allow only another category and check again. No globals, cookies or storage appear.

- **After you allow marketing**: The loader loads, and its URL matches the snippet of your account.

- **After you withdraw marketing**: Save your choice. c15t reloads the page, and The Trade Desk stays blocked on the new page.

For a Content Security Policy, allow js.adsrvr.org for scripts. Allow insight.adsrvr.org and match.adsrvr.org for frames.

[Open the full guide for The Trade Desk](https://c15t.com/docs/integrations/the-trade-desk)

## Related guides

- [TikTok Pixel](/integrations/tiktok-pixel)

- [Vector](/integrations/vector)

- [X Pixel](/integrations/x-pixel)