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

# Collective Audience

> Integrate with Collective Audience (formerly BeOp) for survey data collection and cohort retargeting

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/collective-audience.svg?fit=max&auto=format&n=pNhz39ducTVcQczh&q=85&s=2cbec50f2462ab1df56f8a2f7c50c8c8" alt="Collective Audience" style={{ maxWidth: '32px', maxHeight: '32px', display: 'block' }} width="587" height="642" data-path="images/integrations/logos/collective-audience.svg" />
    </div>

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

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

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

    <BadgeRowCenter label="Capability">
      <BadgeContainer>
        <CapabilityBadge capability="Event Collection" />
      </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' }}>
    Collective Audience (formerly BeOp) enables publishers to collect first-party survey data and optionally retarget Permutive cohorts within their survey platform.
  </p>
</Card>

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

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

## Overview

Collective Audience (formerly BeOp) allows you to run multiple-choice surveys on your site. This declared first-party data is useful for building cohorts for demographics or purchase intent targeting.

This is a Source integration where Collective Audience has integrated with Permutive, meaning you enable the integration from within the Collective Audience platform after Permutive configures a custom event in your workspace.

Use cases include:

* Build cohorts based on survey responses (e.g., demographic segments, purchase intent)
* Track survey completion and question-level responses for advanced segmentation
* Optionally activate Permutive cohorts to Collective Audience for targeted surveys

## Environment Compatibility

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

## Prerequisites

* **Permutive Project ID**: Available in your [Permutive dashboard project settings](https://dash.permutive.com/settings/keys/).
* **Custom SurveyResponse Event**: Contact your Permutive Customer Success Manager (CSM) to configure the SurveyResponse custom event on your workspace. This event must be preconfigured before using this integration.
* **Access to Collective Audience Platform**: You must have access to the Collective Audience dashboard where you can configure integrations.
* **Verify with your CSM**: Confirm that this collector is part of your Permutive plan.

## Setup

<Tabs>
  <Tab title="Primary Setup Steps">
    <Steps>
      <Step title="Request Custom Event Setup">
        Contact your Permutive Customer Success Manager (CSM) to configure the SurveyResponse custom event on your workspace.

        The SurveyResponse event is collected for every survey answer. If a survey has multiple questions, an event is emitted for each question.

        This is a prerequisite that must be completed before proceeding with the Collective Audience configuration.
      </Step>

      <Step title="Configure in Collective Audience">
        In the Collective Audience platform:

        1. Navigate to the DMP integration settings.
        2. Add your Permutive Project ID (found in your Permutive dashboard [project settings](https://dash.permutive.com/settings/keys/)).
        3. Save the configuration.

        For detailed instructions, refer to [Collective Audience's DMP Configuration documentation](https://docs.collectiveaudience.co/dmp-configuration/#permutive).
      </Step>

      <Step title="Verify Data Collection">
        Once configured, survey responses from Collective Audience will automatically be sent to Permutive as SurveyResponse events.

        To verify:

        1. Navigate to the Permutive dashboard.
        2. Go to **Events** and look for the SurveyResponse event type.
        3. Check that survey response data is being collected.
      </Step>

      <Step title="Build Survey-Based Cohorts">
        Once event collection is verified, you can build cohorts based on survey responses. In the Permutive cohort builder, the `SurveyResponse` event will appear in the event dropdown list.

        For example, you can create cohorts for:

        * Users who completed a specific survey
        * Users who answered a particular question with a specific response (e.g., users who answered "Female" to a gender question)
        * Demographic segments (e.g., users who answered "25-34" to an age question)
        * Purchase intent (e.g., users interested in specific product categories)
      </Step>
    </Steps>

    <Expandable title="Optional: Retarget Permutive Cohorts in Collective Audience">
      To enable Permutive cohort retargeting within Collective Audience (optional feature):

      **Prerequisites for Cohort Retargeting:**

      * Ensure 'UpdateAll' access to the Cohort API at the Organizational, Workspace, or API-Key level.
      * Contact [Technical Services](mailto:technical-services@permutive.com) to verify API access.

      **Steps:**

      1. Generate an API key from your Permutive platform dashboard.
      2. In Collective Audience settings, enable "Activate Permutive retargeting".
      3. Select "Permutive API" mode.
      4. Enter your generated API key.
      5. Save the configuration.

      For detailed instructions, see [Collective Audience's Permutive Retargeting documentation](https://docs.collectiveaudience.co/dmp-configuration/#permutive-retargeting).
    </Expandable>
  </Tab>

  <Tab title="Web">
    No additional Web SDK configuration is required. The Permutive SDK must be deployed on your site, and Collective Audience will automatically send survey response data to Permutive once configured in their platform.
  </Tab>
</Tabs>

## Data Types

With your Collective Audience integration setup, you'll see the following additional event types collected in Permutive:

<AccordionGroup>
  <Accordion title="SurveyResponse">
    The SurveyResponse event is emitted for each answer to a survey question. If a survey contains multiple questions, a SurveyResponse event is sent for each question answered.

    <ResponseField name="answer.id" type="string">
      Collective Audience ID of the answer.
    </ResponseField>

    <ResponseField name="answer.text" type="string">
      Text of the answer provided by the user.
    </ResponseField>

    <ResponseField name="answer.valid" type="boolean">
      Whether the answer is valid.
    </ResponseField>

    <ResponseField name="answer.index" type="string">
      Index of the answer within the question options.
    </ResponseField>

    <ResponseField name="question.id" type="string">
      Collective Audience ID of the question.
    </ResponseField>

    <ResponseField name="question.text" type="string">
      Text of the question.
    </ResponseField>

    <ResponseField name="survey.id" type="string">
      Collective Audience ID of the survey.
    </ResponseField>

    <ResponseField name="survey.text" type="string">
      Text or title of the survey.
    </ResponseField>

    <ResponseField name="survey.complete" type="boolean">
      Whether the survey is completed (true when the last question is answered).
    </ResponseField>

    <ResponseField name="audience_question_match.id" type="string">
      Audience question match ID (Collective Audience technical field).
    </ResponseField>

    <ResponseField name="audience_question_match.tag" type="string">
      Audience question match tag (Collective Audience technical field).
    </ResponseField>

    <ResponseField name="audience_answer_match.id" type="string">
      Audience answer match ID (Collective Audience technical field).
    </ResponseField>

    <ResponseField name="audience_answer_match.tag" type="string">
      Audience answer match tag (Collective Audience technical field).
    </ResponseField>

    <ResponseField name="audience_survey_match.id" type="string">
      Audience survey match ID (Collective Audience technical field).
    </ResponseField>

    <ResponseField name="audience_survey_match.tag" type="string">
      Audience survey match tag (Collective Audience technical field).
    </ResponseField>

    <ResponseField name="audience_survey_match" type="array">
      List of audience survey match details (Collective Audience technical field).
    </ResponseField>

    <ResponseField name="audience_answer_match" type="array">
      List of audience answer match details (Collective Audience technical field).
    </ResponseField>

    <ResponseField name="audience_question_match" type="array">
      List of audience question match details (Collective Audience technical field).
    </ResponseField>

    <Note>
      SurveyResponse events also contain default Permutive event properties such as page URL (`client.url`) and page title (`client.title`).
    </Note>
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="SurveyResponse events are not appearing in Permutive">
    **Solution:**

    * Verify that the SurveyResponse custom event has been created on your Permutive workspace. Contact your CSM if this step was missed.
    * Confirm that you have entered the correct Permutive Project ID in the Collective Audience DMP integration settings.
    * Check that the Permutive SDK is deployed on the pages where Collective Audience surveys are running.
    * Use your browser's developer console to check for any JavaScript errors that might prevent event collection.
  </Accordion>

  <Accordion title="Cohort retargeting is not working in Collective Audience">
    **Solution:**

    * Verify that you have 'UpdateAll' access to the Cohort API. Contact [Technical Services](mailto:technical-services@permutive.com) to confirm API permissions.
    * Check that you have generated a valid API key from the Permutive dashboard and entered it correctly in Collective Audience.
    * Ensure "Activate Permutive retargeting" is enabled in Collective Audience settings and "Permutive API" mode is selected.
    * Confirm that the cohorts you want to retarget are active and have users.
  </Accordion>

  <Accordion title="Survey responses are missing some fields">
    **Solution:**

    * Not all survey types may populate all fields in the SurveyResponse event. The `audience_question_match`, `audience_answer_match`, and `audience_survey_match` fields are Collective Audience technical fields that may not be populated for all survey configurations.
    * Verify the survey configuration in Collective Audience to ensure the expected fields are being sent.
    * Check the [Collective Audience documentation](https://docs.collectiveaudience.co/) for details on which fields are supported for your survey type.
  </Accordion>
</AccordionGroup>

## Changelog

<Info>
  For the latest updates and changes to this integration, visit [changelog.permutive.com](https://changelog.permutive.com).
</Info>