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

# Nativo

> Integrate with Nativo 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/tY6HQAw8J0a8II15/images/integrations/logos/nativo-icon.png?fit=max&auto=format&n=tY6HQAw8J0a8II15&q=85&s=aab17bbc261190f909646551ea1639e9" alt="Nativo" style={{ maxWidth: '32px', maxHeight: '32px', display: 'block' }} width="32" height="32" data-path="images/integrations/logos/nativo-icon.png" />
    </div>

    <h3 style={{ margin: 0, fontSize: '1.125rem', fontWeight: '600' }}>Nativo</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' }}>
    Nativo helps publishers deliver and manage native advertising formats that blend seamlessly with editorial content.
  </p>
</Card>

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

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

## Overview

Nativo is a native advertising platform that helps publishers deliver and manage native ad formats. The Permutive integration with Nativo enables you to activate your Permutive cohorts for targeting in Nativo ad campaigns.

This integration is a Destination:

* **Destination:** Permutive activates cohorts into Nativo for audience targeting via key-value pairs.

Use cases include:

* Target Nativo ad campaigns with Permutive audience segments
* Deliver personalized native advertising based on user behavior and interests
* Optimize native ad performance with audience insights

## Environment Compatibility

| Environment    | Supported    | Notes |
| -------------- | ------------ | ----- |
| **Web**        | <YesBadge /> | --    |
| **iOS**        | <NoBadge />  | --    |
| **Android**    | <NoBadge />  | --    |
| **CTV**        | <NoBadge />  | --    |
| **API Direct** | <NoBadge />  | --    |

## Prerequisites

* **Nativo Account** - You must have an active Nativo account with access to manage ad campaigns and targeting settings.
* **Permutive SDK** - The Permutive JavaScript SDK must be deployed on your web properties where Nativo ads will be served.
* **Active Cohorts** - You should have cohorts created in Permutive that you want to activate for targeting in Nativo campaigns.

## Setup

<Tabs>
  <Tab title="Primary Setup Steps">
    <Steps>
      <Step title="Enable in Permutive Dashboard">
        In the Permutive dashboard, navigate to your workspace's integrations page. Click *Add Integration* and select *Nativo* from the list of available ad server integrations.

        Once enabled, you'll be able to activate cohorts to Nativo from the cohort configuration page.
      </Step>

      <Step title="Activate Cohorts">
        Navigate to the cohort you want to activate for Nativo targeting. In the cohort's activation settings, toggle the Nativo activation to *On*.

        When a cohort is activated, Permutive will automatically sync the cohort membership data to the browser's local storage, making it available for Nativo ad requests.
      </Step>

      <Step title="Verify Setup">
        After enabling the integration and activating cohorts, you can verify the setup by:

        1. Open your browser's Developer Tools
        2. Navigate to the Application tab (Chrome) or Storage tab (Firefox)
        3. Check Local Storage for your domain
        4. Look for the `_pnativo` key - it should contain an array of cohort IDs for activated cohorts

        Once verified, proceed to deploy the Nativo-specific script on your web properties (see Web tab).
      </Step>
    </Steps>
  </Tab>

  <Tab title="Web">
    ### Deploy Nativo-specific JavaScript

    You'll need to deploy a small piece of JavaScript on your web properties to enable Permutive to append targeting key-values to Nativo ad requests. This script reads cohort membership data from local storage and makes it available to Nativo's ad server.

    Deploy this script on pages where Nativo ads will be served. We recommend placing it before Nativo's ad request initialization:

    ```javascript theme={"dark"}
    <script>
    window.ntvConfig = window.ntvConfig || {} ;
    window.ntvConfig.keyValues = window.ntvConfig.keyValues || {};
    var segs = localStorage.getItem('_pnativo');
    if (segs) {
      window.ntvConfig.keyValues.permutive = JSON.parse(segs).join(",");
    }
    </script>
    ```

    **What this script does:**

    * Initializes the `window.ntvConfig` object if it doesn't exist
    * Reads cohort membership data from the `_pnativo` local storage key
    * Appends cohort IDs as a comma-separated string to `window.ntvConfig.keyValues.permutive`
    * Makes this data available for Nativo to use in ad targeting

    <Note>This script should be deployed on all pages where Nativo ads are served, alongside your standard Permutive tag.</Note>
  </Tab>

  <Tab title="iOS">
    Nativo integration is currently only supported on Web environments. iOS support is not available at this time.
  </Tab>

  <Tab title="Android">
    Nativo integration is currently only supported on Web environments. Android support is not available at this time.
  </Tab>
</Tabs>

## Data Types

The Nativo integration is a cohort activation integration and does not collect event data into Permutive. Instead, it passes cohort membership data from Permutive to Nativo for ad targeting purposes.

**Cohort Data Format:**
Cohort IDs are stored in the browser's local storage under the `_pnativo` key as a JSON array. These are then passed to Nativo's `window.ntvConfig.keyValues.permutive` as a comma-separated string.

Example format:

```javascript theme={"dark"}
// Local storage: _pnativo
["cohort-id-1", "cohort-id-2", "cohort-id-3"]

// Passed to Nativo as:
window.ntvConfig.keyValues.permutive = "cohort-id-1,cohort-id-2,cohort-id-3"
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="Cohort data not appearing in local storage">
    If you don't see the `_pnativo` key in your browser's local storage:

    1. Verify that the Nativo integration is enabled in the Permutive dashboard
    2. Check that you have activated at least one cohort for Nativo
    3. Ensure the Permutive SDK is properly deployed and firing page view events
    4. Verify that the user qualifies for at least one activated cohort
    5. Check browser console for any JavaScript errors that might be blocking Permutive

    You can verify cohort membership by checking other Permutive local storage keys or using the Permutive Chrome Extension.
  </Accordion>

  <Accordion title="Nativo not receiving Permutive cohort data">
    If Nativo campaigns are not receiving cohort targeting data:

    1. Verify that the Nativo-specific script has been deployed on the page
    2. Check that the script is placed before Nativo's ad request initialization
    3. Open browser Developer Tools and check the console for any JavaScript errors
    4. Verify that `window.ntvConfig.keyValues.permutive` is populated by inspecting the console:
       ```javascript theme={"dark"}
       console.log(window.ntvConfig.keyValues.permutive);
       ```
    5. Ensure that the `_pnativo` local storage key contains valid cohort data

    If the key-value is populated correctly but Nativo still isn't receiving it, contact Nativo support to verify their side of the integration.
  </Accordion>

  <Accordion title="Cohort data shows 0 live size in insights">
    If you see cohorts with 0 live size in Permutive insights despite having qualifying users:

    1. Check that users are actively browsing your site and triggering page view events
    2. Verify that cohort logic is correctly configured and users meet the qualification criteria
    3. Allow up to 24 hours for cohort membership data to populate in insights
    4. Check the cohort's definition to ensure there are no overly restrictive filters

    If the issue persists after 24 hours, contact Permutive Support for investigation.
  </Accordion>

  <Accordion title="Local storage data not persisting across sessions">
    If cohort data in `_pnativo` is being cleared between browsing sessions:

    1. Check browser settings to ensure local storage is not being cleared on exit
    2. Verify that third-party cookie blocking or privacy settings are not affecting local storage
    3. Check for browser extensions that might be clearing local storage
    4. On Safari, ensure Intelligent Tracking Prevention (ITP) settings are not interfering

    Permutive automatically refreshes local storage data on each page view, so even if data is cleared, it should be repopulated on the next visit.
  </Accordion>
</AccordionGroup>

## Changelog

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