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

# Brand Metrics

> Integrate with Brand Metrics for brand lift measurement data collection

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/Juzd3YB8HgaWRAEF/images/integrations/logos/brandmetrics.png?fit=max&auto=format&n=Juzd3YB8HgaWRAEF&q=85&s=a31b2e3095a62a5061715f12b6e0c8c7" alt="Brand Metrics" style={{ maxWidth: '32px', maxHeight: '32px', display: 'block', background: 'white', borderRadius: '4px' }} width="96" height="96" data-path="images/integrations/logos/brandmetrics.png" />
    </div>

    <h3 style={{ margin: 0, fontSize: '1.125rem', fontWeight: '600' }}>Brand Metrics</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' }}>
    Brand Metrics enables publishers to measure brand lift delivered by digital ad campaigns through automated survey measurement at scale.
  </p>
</Card>

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

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

## Overview

Brand Metrics is a SaaS platform that enables the automated measurement of brand lift delivered by digital ad campaigns at true scale. The approach firstly tracks exposure frequency and time-in-view of the creative and then retargets a single question survey to a sub-set of those exposed. Based on their answer to the question and their level of exposure to the message, Brand Metrics' regression-based algorithm calculates brand lift and delivers the brand lift results for four key metrics: awareness, consideration, preference and action intent, benchmarked against thousands of other campaigns measured the same way.

Unlike other survey platform integrations where you enable the integration from within the survey platform, Brand Metrics requires you to deploy custom JavaScript code on your website to enable the integration. You cannot initiate this integration from within the Brand Metrics platform.

Use cases include:

* Build cohorts based on survey responses for brand lift analysis
* Track survey response patterns for campaign effectiveness measurement
* Create audiences based on specific brand awareness or consideration answers
* Measure advertiser impact through brand uplift metrics

## Environment Compatibility

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

## Prerequisites

* **Permutive SDK Deployment**: The Permutive JavaScript SDK must be deployed on your website where Brand Metrics surveys will run.
* **Custom BrandMetricsSurveyResponse Event**: Contact your Permutive Customer Success Manager (CSM) to request the setup of the `BrandMetricsSurveyResponse` custom event on your workspace. This event must be preconfigured before you can use the integration.
* **Access to Both Platforms**: You need access to both your website codebase (to deploy the JavaScript code) and the Brand Metrics platform (to create and manage surveys).
* **Developer Resources**: You will need developer support to add the integration code to your website.
* **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 Configuration">
        Contact your Permutive Customer Success Manager (CSM) to request the setup of the `BrandMetricsSurveyResponse` custom event in your workspace. This step must be completed before proceeding with the code deployment.
      </Step>

      <Step title="Deploy Integration Code">
        Add the following JavaScript code to your website where Brand Metrics surveys are displayed. This code listens for Brand Metrics survey responses and sends them to Permutive as `BrandMetricsSurveyResponse` events.

        ```javascript theme={"dark"}
        window._brandmetrics = window._brandmetrics || [];
        window._brandmetrics.push({
          cmd: '_addeventlistener', val: {
            event: 'surveyanswered',
            handler: function(ev) {
              try {
                if (window.permutive && window.permutive.track) {
                  ev.answers.split(';').forEach(function(questionAnswers) {
                    questionAnswers = questionAnswers.split('-');
                    var question = null;
                    var answers = null;
                    if (questionAnswers[0]) {
                      question = questionAnswers[0];
                    }
                    if (questionAnswers[1]) {
                      answers = questionAnswers[1].split(',');
                    }
                    window.permutive.track('BrandMetricsSurveyResponse', {
                      mid: ev.mid,
                      question: question,
                      answers: answers,
                    });
                  });
                }
              } catch (e) {
                console.error('Error sending Brand Metrics data to Permutive', e);
              }
            },
          },
        });
        ```

        <Warning>
          This code is provided "as is", without warranty of any kind, express or implied. In no event shall Permutive be liable for any claim, damages, updates, or other liability.
        </Warning>

        Ensure this code is placed on all pages where Brand Metrics surveys will be displayed and that it loads after the Permutive SDK.
      </Step>

      <Step title="Verify Event Collection">
        After deploying the integration code, run a test survey and submit responses. In your Permutive dashboard, navigate to the Events page and verify that `BrandMetricsSurveyResponse` events are being collected. You should see recent events appearing in the Events list with the survey response data.
      </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 `BrandMetricsSurveyResponse` event will appear in the event dropdown list.

        A common use case is to build a cohort of users who have answered a question in a certain way. For example, you can create cohorts for:

        * Users who demonstrated brand awareness after exposure to campaigns
        * Users showing purchase consideration or intent
        * Users who answered specific brand preference questions
        * Segments based on action intent responses
      </Step>
    </Steps>
  </Tab>

  <Tab title="Web">
    The integration code provided in the Primary Setup Steps is specifically for Web environments. No additional web-specific configuration is required beyond deploying the code snippet and ensuring the Permutive SDK is present on the page.

    The code uses Brand Metrics' event listener API to listen for survey response events and forwards them to Permutive via the `window.permutive.track()` method.
  </Tab>
</Tabs>

## Data Types

With your Brand Metrics integration setup, you'll see the following event type collected in Permutive:

<AccordionGroup>
  <Accordion title="BrandMetricsSurveyResponse">
    This event is triggered when a user responds to a Brand Metrics survey question. The event captures details about the measurement, question, and answers provided.

    <ResponseField name="mid" type="string">
      The measurement ID for the Brand Metrics survey.
    </ResponseField>

    <ResponseField name="question" type="string">
      Question identifier. Example: `q1` (represents question + question id)
    </ResponseField>

    <ResponseField name="answers" type="array">
      Array of answer values, typically numeric values from 1-5. Example: `['3', '4', '5']`
    </ResponseField>

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

## Troubleshooting

<AccordionGroup>
  <Accordion title="BrandMetricsSurveyResponse events are not appearing in Permutive">
    Verify the following:

    * The custom `BrandMetricsSurveyResponse` event has been configured in your Permutive workspace. Contact your CSM if this step was missed.
    * The integration code has been deployed to all pages where Brand Metrics surveys are displayed.
    * The Permutive SDK is deployed and loading correctly on those pages. Use the Permutive Chrome Extension to verify SDK presence.
    * The integration code is loading after the Permutive SDK (check that `window.permutive` is available).
    * Check your browser's developer console for any JavaScript errors that might prevent the code from executing.
  </Accordion>

  <Accordion title="Custom event not configured in workspace">
    The `BrandMetricsSurveyResponse` event is a custom event that must be preconfigured by Permutive before the integration will work. If you deploy the integration code without this custom event being set up first, survey data will not be collected.

    Contact your Customer Success Manager to request the custom event setup.
  </Accordion>

  <Accordion title="Integration code is not capturing survey responses">
    If the integration code is deployed but not capturing responses:

    * Verify that Brand Metrics surveys are actually loading on the page and users are submitting responses.
    * Check that the Brand Metrics `surveyanswered` event is firing correctly.
    * Use your browser's developer console to monitor for the `surveyanswered` event and verify that Brand Metrics is sending the expected data structure.
    * Ensure the `window.permutive.track()` method is available when the code executes.
  </Accordion>

  <Accordion title="Answer data is not formatted correctly">
    The integration code parses the Brand Metrics answer format (`ev.answers`) which uses semicolons and dashes as delimiters. The format is typically: `question-answer1,answer2,answer3`.

    If you see parsing issues:

    * Verify that Brand Metrics is sending answers in the expected format.
    * Check the browser console for any parsing errors logged by the integration code.
    * Contact Brand Metrics support to confirm the answer format matches your survey configuration.
  </Accordion>

  <Accordion title="Need help or have questions?">
    For questions about this integration, contact [Technical Services](mailto:technical-services@permutive.com).
  </Accordion>
</AccordionGroup>

## Changelog

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