> For the complete documentation index, see [llms.txt](https://help.citrusad.com/retail-media-interface/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.citrusad.com/retail-media-interface/integration/pt-br/brand-pages/brand-page-retailer-integration-guide/overview-1.md).

# Visão geral

## O que são páginas de marca?

Páginas de marca são experiências personalizadas de página de destino que vivem em seu site e destacam conteúdos específicos de marcas. Elas são hospedadas em seu domínio e renderizadas usando seus componentes de UI.

As páginas de marca são gerenciadas separadamente das campanhas de anúncios padrão na Epsilon plataforma.\
Embora usem um fluxo de trabalho de criação e revisão semelhante, elas representam experiências de páginas de destino com a marca no site de um varejista, e não anúncios tradicionais.

**Exemplo:** Um usuário visita `yoursite.com/brands/nike` e vê uma página da marca Nike com produtos da Nike, mas ela tem a aparência e a sensação de fazer parte do seu site.

## O que você construirá

Como engenheiro do varejista, você irá:

* Adicionar uma rota para URLs de páginas de marca (por exemplo, `/brands/{slug}`).

{% hint style="info" %}
Os varejistas não são obrigados a provisionar uma URL para cada página de marca. As URLs são gerenciadas automaticamente pela plataforma.

No entanto, a URL base da página de marca (incluindo o prefixo) deve ser configurada durante o onboarding (por exemplo, no Guia de Estilo do Varejista). Se a URL completa ou o prefixo não forem fornecidos, a URL da página de marca não será preenchida na página de configuração.
{% endhint %}

* Chamar a API de páginas de marca usando o slug extraído.
* Renderizar os módulos de conteúdo retornados.
* Implementar o rastreamento de impressões, cliques e adições ao carrinho.
* Configurar um proxy reverso para rastreamento de first-party.

{% hint style="info" %}
Esta etapa só é necessária para o rastreamento do lado do cliente.
{% endhint %}

### Suas responsabilidades vs. Epsilon's

| Você gerencia                            | Epsilon Fornece                            |
| ---------------------------------------- | ------------------------------------------ |
| ✅ Integração de API para buscar conteúdo | ✅ Conteúdo e modelos de páginas de marca   |
| ✅ Renderização de conteúdo em seu site   | ✅ Infraestrutura de rastreamento           |
| ✅ Configuração de proxy reverso          | ✅ Análise e relatórios                     |
| ✅ Fornecimento do seu guia de estilo     | ✅ Ferramentas de gerenciamento de campanha |
| ✅ Testes e validação                     | ✅ Suporte técnico                          |

## Como funcionam as páginas de marca

### Fluxo de ponta a ponta

{% hint style="info" %}
O conteúdo da página de marca é configurado e pré-visualizado na Epsilon UI. Os varejistas integram as páginas de marca exclusivamente por meio de APIs e são responsáveis por renderizar a experiência final em seus sites.
{% endhint %}

Durante o processo de revisão, os varejistas podem pré-visualizar o conteúdo configurado da página de marca antes da aprovação.

### Modelos e Módulos

Durante o onboarding, a Epsilon trabalha com sua equipe para criar modelos que definem:

* Os módulos de conteúdo disponíveis (como hero, grade de produtos, texto e imagens), com nomes de módulos configuráveis na UI para se alinharem à taxonomia do seu varejista.
* As restrições para cada módulo (limites de caracteres, dimensões de imagem, etc.).
* Estilo que se alinha com suas diretrizes de marca.

As marcas selecionam um modelo ao criar sua campanha e, em seguida, preenchem o conteúdo dentro dessas restrições.

{% hint style="info" %}
A API de páginas de marca retorna módulos de conteúdo e URLs de rastreamento. Os varejistas são responsáveis por aplicar o estilo usando seus próprios componentes de UI e sistema de design.
{% endhint %}

**Exemplos**

Os exemplos a seguir ilustram como as marcas podem preencher módulos de conteúdo comuns ao criar uma página de marca. Estes são apenas exemplos de entradas e podem ser ajustados com base no modelo selecionado e nos objetivos da campanha.

**Módulo HERO**

* **Título:** Descubra a coleção de verão mais recente
* **Subtítulo:** Estilos novos para todas as ocasiões
* **CTA:** Compre agora

**Módulo TEXT**

Explore nossas novidades projetadas para conforto, estilo e desempenho - perfeitas para o uso diário.

**Módulo IMAGE**

* Legenda:\*\* Novidades já disponíveis
* **Texto alt:** Modelo vestindo a coleção de verão
* URL: <https://example-cdn.com/summer-collection.jpg>

**PRODUCTMódulo \_GRID**

Use uma grade de produtos para destacar os produtos mais vendidos ou sazonais e impulsionar o engajamento e as conversões.

#### Configuração do módulo:

| Módulo         | Descrição                                           | Elementos configuráveis (Resumo)                                 |
| -------------- | --------------------------------------------------- | ---------------------------------------------------------------- |
| HERO           | Banner de largura total com imagem, título e CTA    | Título, subtítulo, CTA, imagem, sobreposição                     |
| PRODUCT\_GRID  | Grade ou carrossel de produtos                      | Produtos, título da seção, descrição, CTA                        |
| TEXT           | Bloco de conteúdo de texto (título, corpo do texto) | Campos de texto, CTA                                             |
| IMAGE          | Imagem única com link opcional                      | Imagem, legenda, texto alternativo, link opcional                |
| IMAGE\_GALLERY | Várias imagens em layout de grade                   | Imagens, legendas, texto alternativo, título da seção, descrição |
| FILTER\_MENU   | Guias de filtro horizontais para grades de produtos | Rótulos de filtro e ordenação                                    |
| SPLIT\_LAYOUT  | Layout de várias colunas com módulos aninhados      | Estrutura do layout e módulos aninhados                          |

{% hint style="info" %}
Cada elemento configurável pode ser definido como obrigatório, opcional (permitido) ou desativado, dependendo dos requisitos do módulo e do varejista.

Alguns campos também podem impor limites máximos de caracteres quando marcados como obrigatórios ou permitidos.
{% endhint %}

### Tags de módulo

Os modelos podem incluir um campo opcional `tags` em cada módulo — uma lista de rótulos de texto curtos (por exemplo, `["header"]`) que sua integração pode usar para decisões de layout, análises ou mapeamento de módulos para seus próprios componentes.

#### Como as tags funcionam na resposta da API

* Quando um módulo possui tags, elas aparecem como uma matriz `tags` no item correspondente em `contentData`.
* Quando um módulo não possui tags, a propriedade `tags` é totalmente omitida da resposta - ela não aparecerá como `"tags": []`.
* Trate um campo `tags` ausente da mesma forma que "sem tags" - não lance um erro se ele estiver ausente.
* As tags também são suportadas em módulos aninhados dentro do `SPLIT_LAYOUT` — não apenas no módulo dividido raiz.

{% hint style="info" %}
Importante

As tags são rótulos opacos acordados entre o varejista e sua equipe de integração. Elas não estão relacionadas a tags de rastreamento de anúncios ou a qualquer outro sistema — sempre se refira a elas como *"tags de módulo"* ou *"tags de módulo de página de marca"* para evitar confusão.
{% endhint %}

Exemplo de módulo de resposta com uma tag

```json
{
  "id": "image-1",
  "contentType": "IMAGE",
  "order": 1,
  "tags": ["header"],
  "imageUrl": "https://example.com/images/banner.jpg"
}
```

**Exemplo de módulo de resposta sem tag (propriedade tags omitida):**

```json
{
  "id": "image-2",
  "contentType": "IMAGE",
  "order": 2,
  "imageUrl": "https://example.com/images/promo.jpg"
}
```

#### O que isso significa para a resposta da API

A resposta `POST /ads/v3/brand-pages` reflete essas mesmas regras: um tipo de módulo só aparece em `contentData` quando faz parte do modelo ativo e a página da marca configurou o conteúdo para esse módulo.

Os campos dentro de um módulo podem estar ausentes no JSON, `null`ou vazios quando o modelo os marca como opcionais ou desativados, ou quando a marca os deixa sem definição - isso é esperado e não indica uma carga útil com defeito.

Implemente a renderização com tipos opcionais e acessores seguros - por exemplo, renderize um bloco de CTA apenas quando `ctaText` e um destino de navegação estiverem presentes; oculte a mídia principal quando `mediaUrl`estiver ausente.

`trackers`no nível da página ou em um nó pode ser omitido quando não houver interação rastreável. Componha URLs somente quando tiver uma chave de modelo aplicável de `trackingTypes` e o correspondente `trackers.`\<slot>`.params`, quando fornecido pela API.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.citrusad.com/retail-media-interface/integration/pt-br/brand-pages/brand-page-retailer-integration-guide/overview-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
