Passar para o conteúdo principal

Configuração de Vitrines e Banners: VTEX Ads

b
Escrito por bruno bulso

Configuração de Vitrines e Banners: VTEX Ads

Essa funcionalidade utiliza a API de Ads da NewTail, garantindo uma gestão ágil e segura para potencializar a receita de mídia própria.

Como funcionam os componentes patrocinados?

Diferente dos componentes tradicionais, que buscam dados diretamente do catálogo ou de imagens fixas no CMS, os componentes de Ads são dinâmicos.

  • O aplicativo identifica o componente via placement_id e publisher_id.

  • Faz uma chamada à API da NewTail.

  • Exibe o conteúdo com o selo "Patrocinado", mantendo o mesmo layout visual dos componentes padrão.

1. Configuração de Vitrines (Produtos)

A. Exibição na Home

  1. No CMS VTEX, acesse a configuração da página Home.

  2. Adicione um componente do tipo Carrossel de Produto.

  3. No campo Tipo de listagem, selecione a opção ads-commerce. 1.

  4. Role até o final e clique em Novo Ads Commerce para preencher os campos

  • Fonte de anúncios: Selecione Vtex_ Ads.

  • ID de publisher: Insira o identificador único fornecido pela VTEX Ads.

  • Nome do placement: Identifique a página (Ex: app_home_product).

  • Quantidade de anúncios: Limite máximo de produtos na vitrine.

  • Contexto: Digite home (obrigatoriamente em letras minúsculas).

  • ContextId: Opcional para o contexto home.

  • Tipo de anúncio: Selecione product.

B. Exibição em outras partes do App (Busca, Categoria, PDP)

  1. No Headless CMS, clique em Criar Documento e selecione o componente Content Container.

  2. No campo Tipo de listagem, selecione ads-commerce. 1.

  3. Defina a Ordenação como Score. 1.

  4. Em Novo Ads Commerce, preencha:

  • Nome do placement: Deve estar ativo na VTEX Ads (Ex: app_category_product, app_search_product ou app_productpage_product).

  • Contexto: Utilize um dos padrões aceitos: ["home", "search", "category", "product_page"].

  • ID do Contexto: Obrigatório para o contexto category (insira o nome da categoria). Opcional para Busca e PDP.

  • Tipo de anúncio: Selecione product.

2. Configuração de Banners Patrocinados

A. Exibição na Home

  1. Acesse o componente Home e selecione Carrossel | Banner ou Mosaico | Banner.

  2. Configure o Tamanho e a Imagem seguindo os padrões abaixo:

| Tamanho | Dimensões (L x A) | Resolução Esperada (px) | | ----------- | --------------------- | --------------------------- | | P | 360L x 53A | 1080 x 159 | | M | 176L x 155A | 528 x 465 | | G | 360L x 155A | 1080 x 465 | | FULL | 360L x 587A | 1080 x 1500 |

  1. Em Novo Ads Commerce, preencha:

  • Nome do placement: Ex: app_home_banner.

  • Quantidade de anúncios: Ex: 1 para banner único ou 3 para carrossel.

  • Contexto: Digite home.

  • Tipo de anúncio: Selecione banner.

  • Tamanho: Deve corresponder ao cadastrado na VTEX Ads (Ex: 1280x280).

B. Exibição em outras partes do App

  1. Crie um documento do tipo Content Container.

  2. Defina o Tamanho (conforme cadastrado no painel VTEX Ads).

  3. Em Ads - Provedor do anúncio, selecione Vtex_ Ads.

  4. Defina a Ordenação como Score.

  5. Em Novo Ads Commerce, preencha:

  • Nome do placement: Ex: app_banner_pdp.

  • Contexto: Utilize search, category ou product_page.

    • Obs: Para PDP e Busca, não é necessário preencher o campo ID do Contexto. *

  • Tipo de anúncio: Selecione banner.

  • Tamanho: Insira o identificador de mídia da VTEX Ads (Ex: buscaepdp_app). *

3. Finalização e Publicação

Após preencher tudo, clique em Publicar. As alterações serão aplicadas e ficarão visíveis para os usuários no aplicativo.

Respondeu à sua pergunta?