> ## Documentation Index
> Fetch the complete documentation index at: https://docs.permutive.com/llms.txt
> Use this file to discover all available pages before exploring further.

# The Trade Desk

> Integrate with The Trade Desk for targeting and campaign optimization

export const NoBadge = () => {
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.5rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: '#F7D0E2',
    color: '#1A1A1A',
    fontWeight: '500'
  }}>
      No
    </span>;
};

export const YesBadge = () => {
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.5rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: '#C7E8F9',
    color: '#1A1A1A',
    fontWeight: '500'
  }}>
      Yes
    </span>;
};

export const BadgeRowCenter = ({label, children}) => {
  return <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '0.5rem'
  }}>
      <span style={{
    fontSize: '0.625rem',
    color: '#6b7280',
    textTransform: 'uppercase',
    fontWeight: '500',
    letterSpacing: '0.05em'
  }}>
        {label}
      </span>
      {children}
    </div>;
};

export const BadgeRow = ({label, children}) => {
  return <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: '0.5rem'
  }}>
      <span style={{
    fontSize: '0.625rem',
    color: '#6b7280',
    textTransform: 'uppercase',
    fontWeight: '500',
    letterSpacing: '0.05em'
  }}>
        {label}
      </span>
      {children}
    </div>;
};

export const BadgeContainer = ({children}) => {
  return <div style={{
    display: 'flex',
    gap: '0.25rem',
    flexWrap: 'wrap',
    justifyContent: 'flex-end',
    minWidth: '0',
    flex: '1'
  }}>
      {children}
    </div>;
};

export const ProductRequiredBadge = ({product}) => {
  const getBadgeStyle = product => {
    switch (product) {
      case 'Core Platform':
        return {
          background: '#CB88FC',
          color: '#1A1A1A'
        };
        --purple;
      case 'Routing':
        return {
          background: '#CB88FC',
          color: '#1A1A1A'
        };
        --purple;
      case 'Contextual':
        return {
          background: '#CB88FC',
          color: '#1A1A1A'
        };
        --purple;
      default:
        return {
          background: '#A7B3D9',
          color: '#1A1A1A'
        };
        --haze;
    }
  };
  const style = getBadgeStyle(product);
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.375rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: style.background,
    color: style.color,
    fontWeight: '500'
  }}>
      {product}
    </span>;
};

export const SdkRequiredBadge = ({required}) => {
  const getBadgeStyle = required => {
    switch (required) {
      case 'Yes':
        return {
          background: '#C7E8F9',
          color: '#1A1A1A'
        };
        --blue;
      case 'No':
        return {
          background: '#F7D0E2',
          color: '#1A1A1A'
        };
        --pink;
      default:
        return {
          background: '#A7B3D9',
          color: '#1A1A1A'
        };
        --haze;
    }
  };
  const style = getBadgeStyle(required);
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.375rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: style.background,
    color: style.color,
    fontWeight: '500'
  }}>
      {required}
    </span>;
};

export const CapabilityBadge = ({capability}) => {
  const getBadgeStyle = capability => {
    switch (capability) {
      case 'Event Collection':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Cohort Activation':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Campaign Optimization':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Identity Signal':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Contextual Signal':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Connectivity':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Routing':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      case 'Data Collaboration':
        return {
          background: '#EFDFC8',
          color: '#1A1A1A'
        };
        --clay;
      default:
        return {
          background: '#A7B3D9',
          color: '#1A1A1A'
        };
        --haze;
    }
  };
  const style = getBadgeStyle(capability);
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.375rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: style.background,
    color: style.color,
    fontWeight: '500',
    whiteSpace: 'nowrap'
  }}>
      {capability}
    </span>;
};

export const EnvironmentBadge = ({environment}) => {
  const getBadgeStyle = environment => {
    switch (environment) {
      case 'Web':
        return {
          background: '#F9C1A8',
          color: '#1A1A1A'
        };
        --peach;
      case 'iOS':
        return {
          background: '#F9C1A8',
          color: '#1A1A1A'
        };
        --peach;
      case 'Android':
        return {
          background: '#F9C1A8',
          color: '#1A1A1A'
        };
        --peach;
      case 'CTV':
        return {
          background: '#F9C1A8',
          color: '#1A1A1A'
        };
        --peach;
      case 'API Direct':
        return {
          background: '#F9C1A8',
          color: '#1A1A1A'
        };
        --peach;
      default:
        return {
          background: '#A7B3D9',
          color: '#1A1A1A'
        };
        --haze;
    }
  };
  const style = getBadgeStyle(environment);
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.375rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: style.background,
    color: style.color,
    fontWeight: '500',
    whiteSpace: 'nowrap'
  }}>
      {environment}
    </span>;
};

export const DirectionBadge = ({direction}) => {
  const getBadgeStyle = direction => {
    switch (direction) {
      case 'Bidirectional':
        return {
          background: '#FA8784',
          color: '#1A1A1A'
        };
        --tomato;
      case 'Destination':
        return {
          background: '#FA8784',
          color: '#1A1A1A'
        };
        --tomato;
      case 'Source':
        return {
          background: '#FA8784',
          color: '#1A1A1A'
        };
        --tomato;
      default:
        return {
          background: '#A7B3D9',
          color: '#1A1A1A'
        };
        --haze;
    }
  };
  const style = getBadgeStyle(direction);
  return <span style={{
    display: 'inline-block',
    padding: '0.125rem 0.375rem',
    borderRadius: '0.25rem',
    fontSize: '0.625rem',
    background: style.background,
    color: style.color,
    fontWeight: '500'
  }}>
      {direction}
    </span>;
};

<Card title="">
  <div style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
    <div style={{ width: '32px', height: '32px', marginRight: '0.75rem', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <img src="https://mintcdn.com/permutive/pNhz39ducTVcQczh/images/integrations/logos/the-trade-desk.svg?fit=max&auto=format&n=pNhz39ducTVcQczh&q=85&s=51d0468198c0758633366eecfd00448f" alt="The Trade Desk" style={{ maxWidth: '32px', maxHeight: '32px', display: 'block' }} width="800" height="845" data-path="images/integrations/logos/the-trade-desk.svg" />
    </div>

    <h3 style={{ margin: 0, fontSize: '1.125rem', fontWeight: '600' }}>The Trade Desk</h3>
  </div>

  <div style={{ marginBottom: '1rem' }}>
    <BadgeRowCenter label="Direction">
      <DirectionBadge direction="Destination" />
    </BadgeRowCenter>

    <BadgeRowCenter label="Environment">
      <BadgeContainer>
        <EnvironmentBadge environment="Web" />
      </BadgeContainer>
    </BadgeRowCenter>

    <BadgeRowCenter label="Capability">
      <BadgeContainer>
        <CapabilityBadge capability="Cohort Activation" />
      </BadgeContainer>
    </BadgeRowCenter>

    <BadgeRowCenter label="SDK Required">
      <SdkRequiredBadge required="Yes" />
    </BadgeRowCenter>

    <BadgeRowCenter label="Product(s) Required">
      <ProductRequiredBadge product="Core Platform" />
    </BadgeRowCenter>
  </div>

  <p style={{ margin: 0, fontSize: '0.875rem', color: '#6b7280', lineHeight: '1.5' }}>
    The Trade Desk is the world's largest independent demand-side platform, enabling advertisers to buy digital advertising across multiple channels with advanced targeting capabilities.
  </p>
</Card>

<CardGroup cols={2}>
  <Card title="Setup" href="#setup" icon="gear" />

  <Card title="Troubleshooting" href="#troubleshooting" icon="wrench" />
</CardGroup>

## Overview

The Trade Desk is a leading independent demand-side platform (DSP) that empowers advertisers and agencies to programmatically buy digital advertising inventory across display, video, mobile, connected TV, audio, and native formats. Our integration with The Trade Desk enables server-side audience activation, allowing you to target your Permutive cohorts in programmatic campaigns.

This integration is a Destination:

* **Destination:** Permutive activates your cohorts to The Trade Desk using a server-side integration, enabling you to target users with cohort membership data in programmatic advertising campaigns.

The integration works via a two-step process:

1. **Cookie Sync**: The Permutive SDK initiates a cookie sync with The Trade Desk to obtain and store The Trade Desk's cookie ID as an alias for each user.
2. **Cohort Activation**: When users fall into activated cohorts, Permutive looks up The Trade Desk cookie ID from the aliases table and makes a server-side API call to The Trade Desk, informing them of the user's cohort membership.

There are two variations of this integration:

* **The Trade Desk 1P**: For first-party targeting and retargeting your own website visitors across The Trade Desk's inventory.
* **The Trade Desk 3P**: For selling your Permutive audiences to advertisers using The Trade Desk's platform, enabling third-party data monetization.

Use cases include:

* Retarget your website visitors across display, video, and CTV campaigns with cohorts built from first-party behavioral data.
* Activate lookalike audiences and custom segments for programmatic advertising.
* Sell third-party audience segments to advertisers through The Trade Desk's marketplace.
* Measure campaign performance and optimize based on audience engagement.

## Environment Compatibility

| Environment    | Supported    | Notes                        |
| -------------- | ------------ | ---------------------------- |
| **Web**        | <YesBadge /> | Requires third-party cookies |
| **iOS**        | <NoBadge />  | Not supported                |
| **Android**    | <NoBadge />  | Not supported                |
| **CTV**        | <NoBadge />  | Not supported                |
| **API Direct** | <NoBadge />  | Not supported                |

<Note>
  This integration requires third-party cookies to be enabled. As of 2023, this means the integration primarily works in Chrome-based browsers. Safari and Firefox block third-party cookies by default, which prevents the cookie sync mechanism from functioning.
</Note>

## Prerequisites

* **The Trade Desk Account**: You must have an active advertiser or agency account with The Trade Desk.

* **Advertiser ID**: You'll need your Trade Desk Advertiser ID to configure the integration in the Permutive Dashboard. This identifier links your Permutive cohorts to your Trade Desk account.

* **Permutive Web SDK**: The Permutive Web SDK must be deployed on your website to enable the cookie sync and cohort activation mechanisms.

* **Third-Party Cookies**: Users must have third-party cookies enabled in their browsers for the integration to function. This limits reach to browsers that support third-party cookies (primarily Chrome-based browsers).

## Setup

<Tabs>
  <Tab title="Primary Setup Steps">
    <Steps>
      <Step title="Enable in Permutive Dashboard">
        You must enable The Trade Desk integration in the Permutive Dashboard.

        1. Navigate to the Permutive dashboard
        2. Go to your workspace's integrations page
        3. Click "Add Integration" and select either:
           * **The Trade Desk - 1P** for first-party retargeting, or
           * **The Trade Desk - 3P** for third-party audience sales
        4. Enter your Trade Desk Advertiser ID when prompted
        5. Save the integration configuration

        Once enabled, the Permutive SDK will automatically begin the cookie sync process for users visiting your site.
      </Step>

      <Step title="Configure Cohort Activation">
        After enabling the integration, you must configure which cohorts should be activated to The Trade Desk.

        1. In the Permutive Dashboard, navigate to one of your cohorts
        2. Look for The Trade Desk activation option in the cohort configuration
        3. Toggle the activation to "On" for cohorts you want to sync to The Trade Desk
        4. The activation will fire when users enter or exit the cohort

        When a user falls into an activated cohort, Permutive will:

        * Look up The Trade Desk cookie ID from the user's aliases
        * Make a server-side API request to The Trade Desk
        * Inform The Trade Desk that this user is a member of the cohort
      </Step>

      <Step title="Verify Setup">
        Verify that the integration is working correctly.

        1. Check your browser's developer tools Network tab for requests to The Trade Desk domain during the cookie sync process
        2. Look for redirect requests from The Trade Desk back to Permutive's identity API
        3. In The Trade Desk platform, verify that your Permutive audiences are appearing and being populated
        4. Check that audience sizes in The Trade Desk match your expected cohort sizes (accounting for cookie matching rates)

        <Note>
          The cookie sync happens client-side via the SDK, while cohort membership updates are sent server-side. There may be a slight delay between a user entering a cohort and appearing in The Trade Desk audience.
        </Note>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Web">
    ### Cookie Sync Process

    The Permutive Web SDK automatically handles the cookie sync with The Trade Desk. Here's how it works:

    1. **Initial Request**: The SDK makes a request to The Trade Desk's domain
    2. **302 Redirect**: The Trade Desk responds with a 302 redirect back to Permutive's identity API
    3. **Cookie ID Capture**: The redirect URL includes the user's Trade Desk cookie ID, which was read from the request headers
    4. **Alias Storage**: Permutive's identity API stores this cookie ID as an alias (type: `tradedesk` for 1P or `thirdparty_tradedesk` for 3P)

    This process happens automatically when users visit your site with the Permutive SDK deployed.

    ### Browser Compatibility

    The cookie sync requires third-party cookies to function:

    * **Chrome and Chromium-based browsers**: Fully supported
    * **Safari**: Not supported (blocks third-party cookies by default)
    * **Firefox**: Not supported (blocks third-party cookies by default with Enhanced Tracking Protection)
    * **Brave**: Not supported (blocks third-party cookies by default)

    ### Verifying Cookie Sync

    To verify the cookie sync is working:

    1. Open your browser's developer tools
    2. Navigate to the Network tab
    3. Visit your website
    4. Look for requests to The Trade Desk domain
    5. Check for a 302 redirect response
    6. Verify the redirect URL points to Permutive's identity API and includes cookie ID parameters
  </Tab>

  <Tab title="iOS">
    The Trade Desk integration is not currently supported on iOS. The integration requires a web-based cookie sync mechanism that is not available in mobile app environments.

    For mobile app audience activation, please contact your Permutive Customer Success Manager to discuss alternative DSP integrations that support mobile app environments.
  </Tab>

  <Tab title="Android">
    The Trade Desk integration is not currently supported on Android. The integration requires a web-based cookie sync mechanism that is not available in mobile app environments.

    For mobile app audience activation, please contact your Permutive Customer Success Manager to discuss alternative DSP integrations that support mobile app environments.
  </Tab>
</Tabs>

## Data Types

<AccordionGroup>
  <Accordion title="Cohort Membership Data">
    When a user enters an activated cohort, Permutive sends the following information to The Trade Desk via server-side API:

    <ResponseField name="cookie_id" type="string">
      The Trade Desk's cookie ID for the user, obtained during the cookie sync process.
    </ResponseField>

    <ResponseField name="cohort_id" type="string">
      The Permutive cohort ID that the user has entered.
    </ResponseField>

    <ResponseField name="advertiser_id" type="string">
      Your Trade Desk Advertiser ID configured in the Permutive Dashboard.
    </ResponseField>
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Cookie sync not working in Safari or Firefox">
    The Trade Desk integration requires third-party cookies, which are blocked by default in Safari and Firefox.

    **Solution**: This is an expected limitation. The integration will only work in browsers that support third-party cookies (primarily Chrome-based browsers). There is no workaround for this limitation with the current integration architecture.

    Consider using UID2 or other cookieless identifier solutions for broader browser reach. Contact your Customer Success Manager for information about alternative identity solutions.
  </Accordion>

  <Accordion title="Low match rates between Permutive and The Trade Desk">
    You may notice that your audience sizes in The Trade Desk are smaller than your cohort sizes in Permutive.

    **Possible causes**:

    * Users visiting in browsers that block third-party cookies (Safari, Firefox)
    * Users with ad blockers that prevent cookie syncing
    * Users who have cleared their cookies since visiting your site
    * Geographic differences (The Trade Desk may not operate in all regions)

    **Solution**: Match rates of 40-60% are typical due to third-party cookie limitations. To improve match rates:

    * Focus measurement on Chrome users where possible
    * Implement UID2 for cookieless identification
    * Ensure the Permutive SDK loads before users leave the page
  </Accordion>

  <Accordion title="Cohorts not appearing in The Trade Desk platform">
    Your activated cohorts may not appear in The Trade Desk interface.

    **Possible causes**:

    * The integration was recently enabled and data hasn't populated yet
    * Advertiser ID is incorrect in Permutive Dashboard
    * Cohort has no users with successful cookie syncs

    **Solution**:

    1. Verify your Advertiser ID in the Permutive Dashboard matches your The Trade Desk account
    2. Check that cohorts are toggled "On" for The Trade Desk activation
    3. Wait 24-48 hours after enabling activation for initial population
    4. Contact The Trade Desk support to verify they're receiving data from Permutive
  </Accordion>

  <Accordion title="Users remain in The Trade Desk audience after exiting cohort">
    Users may still appear in The Trade Desk audiences even after they've exited a cohort in Permutive.

    **Solution**: This may be due to caching or TTL (time-to-live) settings on The Trade Desk's side. Audience removals can take 24-48 hours to fully propagate. If users consistently remain in audiences longer than expected, contact The Trade Desk support to review your account's TTL settings.
  </Accordion>

  <Accordion title="Cookie sync blocked by ad blockers">
    Ad blocking browser extensions may prevent the cookie sync process from completing.

    **Solution**: This is an expected limitation. Users with ad blockers will not successfully complete the cookie sync and therefore won't be activatable in The Trade Desk. This is factored into expected match rates. There is no workaround for this limitation.
  </Accordion>
</AccordionGroup>

## Changelog

<Info>
  For detailed changelog information, visit our
  [Changelog](https://changelog.permutive.com/).
</Info>