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

# Catalog

> Browse our comprehensive catalog of ecosystem integrations.

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 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>;
};

# Ad Server Integrations

<CardGroup cols={2}>
  <Card title="" href="/integrations/advertising/ad-servers/google-ad-manager">
    <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/google-ad-manager.svg?fit=max&auto=format&n=pNhz39ducTVcQczh&q=85&s=0af7359c310585ef11d412ee1dbc0e04" alt="Google Ad Manager" style={{ maxWidth: '32px', maxHeight: '32px', display: 'block' }} width="2454" height="2454" data-path="images/integrations/logos/google-ad-manager.svg" />
      </div>

      <h3 style={{ margin: 0, fontSize: '1.125rem', fontWeight: '600' }}>Google Ad Manager</h3>
    </div>

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

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

          <EnvironmentBadge environment="iOS" />

          <EnvironmentBadge environment="Android" />

          <EnvironmentBadge environment="CTV" />

          <EnvironmentBadge environment="API Direct" />
        </BadgeContainer>
      </BadgeRowCenter>

      <BadgeRowCenter label="Capability">
        <BadgeContainer>
          <CapabilityBadge capability="Event Collection" />

          <CapabilityBadge capability="Cohort Activation" />

          <CapabilityBadge capability="Campaign Optimization" />
        </BadgeContainer>
      </BadgeRowCenter>
    </div>

    <p style={{ margin: 0, fontSize: '0.875rem', color: '#6b7280', lineHeight: '1.5' }}>
      Google Ad Manager is a comprehensive ad management platform that helps publishers sell, deliver, and optimize ads across web, app, and video content.
    </p>
  </Card>

  <Card title="" href="/integrations/advertising/ad-servers/xandr">
    <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/microsoft.svg?fit=max&auto=format&n=pNhz39ducTVcQczh&q=85&s=9529b6161618c2c2503443b2d35bf484" alt="Microsoft Monetize" style={{ maxWidth: '32px', maxHeight: '32px', display: 'block' }} width="2500" height="2500" data-path="images/integrations/logos/microsoft.svg" />
      </div>

      <h3 style={{ margin: 0, fontSize: '1.125rem', fontWeight: '600' }}>Microsoft Monetize (Ad Server)</h3>
    </div>

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

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

          <EnvironmentBadge environment="iOS" />

          <EnvironmentBadge environment="Android" />

          <EnvironmentBadge environment="CTV" />

          <EnvironmentBadge environment="API Direct" />
        </BadgeContainer>
      </BadgeRowCenter>

      <BadgeRowCenter label="Capability">
        <BadgeContainer>
          <CapabilityBadge capability="Event Collection" />

          <CapabilityBadge capability="Cohort Activation" />
        </BadgeContainer>
      </BadgeRowCenter>
    </div>

    <p style={{ margin: 0, fontSize: '0.875rem', color: '#6b7280', lineHeight: '1.5' }}>
      Microsoft Monetize's ad server helps publishers manage campaigns and optimize yield across direct and programmatic channels.
    </p>
  </Card>

  <Card title="" href="/integrations/advertising/ad-servers/equativ">
    <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/equativ-icon.png?fit=max&auto=format&n=tY6HQAw8J0a8II15&q=85&s=d2e30a2fa256d9c1eaa9ce0040a28d92" alt="Equativ" style={{ maxWidth: '32px', maxHeight: '32px', display: 'block' }} width="32" height="32" data-path="images/integrations/logos/equativ-icon.png" />
      </div>

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

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

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

      <BadgeRowCenter label="Capability">
        <BadgeContainer>
          <CapabilityBadge capability="Event Collection" />

          <CapabilityBadge capability="Cohort Activation" />
        </BadgeContainer>
      </BadgeRowCenter>
    </div>

    <p style={{ margin: 0, fontSize: '0.875rem', color: '#6b7280', lineHeight: '1.5' }}>
      Equativ (formerly Smart AdServer) provides publishers with an independent ad server and SSP for managing and monetizing inventory.
    </p>
  </Card>

  <Card title="" href="/integrations/advertising/ad-servers/freewheel">
    <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/freewheel-icon.png?fit=max&auto=format&n=tY6HQAw8J0a8II15&q=85&s=154a46d899cd3da68fc8ac012f174a15" alt="FreeWheel" style={{ maxWidth: '32px', maxHeight: '32px', display: 'block' }} width="256" height="256" data-path="images/integrations/logos/freewheel-icon.png" />
      </div>

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

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

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

          <EnvironmentBadge environment="iOS" />

          <EnvironmentBadge environment="Android" />

          <EnvironmentBadge environment="CTV" />
        </BadgeContainer>
      </BadgeRowCenter>

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

    <p style={{ margin: 0, fontSize: '0.875rem', color: '#6b7280', lineHeight: '1.5' }}>
      Freewheel offers a premium video ad server and SSP tailored to broadcasters and publishers for advanced monetization.
    </p>
  </Card>

  <Card title="" href="/integrations/advertising/ad-servers/nativo">
    <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>
    </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>

  <Card title="" href="/integrations/advertising/ad-servers/adswizz">
    <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/adswizz.svg?fit=max&auto=format&n=pNhz39ducTVcQczh&q=85&s=872eda08cf80a878d44bf1d34744add8" alt="AdsWizz" style={{ maxWidth: '32px', maxHeight: '32px', display: 'block' }} width="102" height="93" data-path="images/integrations/logos/adswizz.svg" />
      </div>

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

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

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

          <EnvironmentBadge environment="iOS" />

          <EnvironmentBadge environment="Android" />

          <EnvironmentBadge environment="CTV" />

          <EnvironmentBadge environment="API Direct" />
        </BadgeContainer>
      </BadgeRowCenter>

      <BadgeRowCenter label="Capability">
        <BadgeContainer>
          <CapabilityBadge capability="Event Collection" />

          <CapabilityBadge capability="Cohort Activation" />
        </BadgeContainer>
      </BadgeRowCenter>
    </div>

    <p style={{ margin: 0, fontSize: '0.875rem', color: '#6b7280', lineHeight: '1.5' }}>
      AdsWizz is an audio advertising platform specializing in programmatic audio and podcast monetization.
    </p>
  </Card>
</CardGroup>