Pular para o conteúdo principal

Vitrine e Banner VTEX Ads

Atualizado

O Banner e a vitrine de produtos patrocinados permite a monetização de espaços do aplicativo de forma ágil e segura, fortalecendo a estratégia de mídia própria e potencializando receitas.

Como funcionam os componentes patrocinados?

A vitrine deixa de ter uma fonte de dados do catálogo tradicional (coleção/categoria/lista de SKUs) e o banner de subir imagens fixas no CMS, e passam a ter uma configuração dinâmica baseada na resposta API de Ads da NewTail, orientada por placement_id e publisher_id. 

O formato visual das vitrines e do banner é o mesmo, incluindo apenas o selo “Patrocinado”. Quando a página que contém essa vitrine ou banner são acessada, o aplicativo identifica que se trata de componentes patrocinados  e em vez de buscar o conteúdo de forma padrão no CMS, faz a chamada para a API da NewTail, enviando o placement_id e o publisher_id.

 

 Configuração da Vitrines via CMS (VTEX)

1. Exibição na Home

  • Acesse a configuração da página Home no CMS VTEX.

  • Adicione um componente do tipo Carrossel de Produto, que será utilizado para exibir as vitrines na Home.

  • Configure o Título do carrossel para a identificação

  • Marque como a opção de Ativo, para definição se o componente estará ativo ou não no app.
  • No campo Tipo de listagem do carrossel, selecione a opção ads-commerce

  • Os demais campos não devem ser preenchidos

  • Role até o fim da página e clique em Novo Ads Commerce e preencha os campos:

  • Fonte de anúncios com opção de Vtex_ Ads

    • ID de publisher: Identificador único do anunciante dentro da VTEX Ads. Esse ID é gerado e fornecido pela VTEX Ads.
    • Nome do placement: Determina em qual página o anúncio aparece.

          Exemplo: app_home_product →home

    • Quantidade de anúncios: Número máximo de produtos que serão exibidos nesta vitrine.

    • Contexto: Onde a vitrine será exibida home- Deve ser escrita com letra minúscula

    • ContextId: É opcional no contexto home.

    • Tipo de anúncio: Deve selecionar a opção poduct
       


     

    2. Exibição em outras parte do app

    • Realize o login no painel administrativo da VTEX e vá no módulo "Storefront" e clique na função "Headless CMS"

    • Clique em "Criar Documento" e selecione a opção do componente "Content Container".

    • Configure o Título do componente 

    • Marque como a opção de Ativo, para definição se o componente estará ativo ou não no app.
    • No campo Tipo de listagem selecione a opção ads-commerce

    • Selecione a ordenação como Score

    • Role até o fim da página e clique em Novo Ads Commerce e preencha os campos:

    • Fonte de anúncios com opção de Vtex_ Ads

    • ID de publisher: Identificador único do anunciante dentro da VTEX Ads. Esse ID é gerado e fornecido pela VTEX Ads.
    • Nome do placement: Determina qual a página o anúncio aparece. (Precisa existir e estar ativo na VTEX Ads)

        Exemplo: app_category_product → Categoria 

                        app_search_product → busca         

                       app_productpage_product→ PDP

    • Quantidade de anúncios: Número máximo de produtos que serão exibidos nesta vitrine.

  • Contexto: Indica em qual tela do app a vitrine será carregada.Deve ser preenchido de acordo com os padrões da própria VTEX, que são:[\"home\",\"search\",\"category\",\"product_page\"]"
  • ID do Contexto: Identifica qual item específico dentro do contexto. Para a PDP e na busca não é necessário preencher esse campo.
  • Para outros contextos como por exemplo categoria é obrigatório. 

     Contexto: category →  ID do Contexto: É o nome de categoria.

  • Tipo de anúncio: Deve selecionar a opção poduct

  

Configuração do Banner via CMS (VTEX)

1. Exibição na Home

  • Realize o login no painel administrativo da VTEX e vá no módulo "Storefront" e clique na função "Headless CMS" 
  • Entre no componente "Home" e clique no conteúdo de banner que você deseja configurar (Carrossel l Banner ou Mosaico l Banner).
  • Ao abrir um card de banner para edição, preencha os campos indicados conforme as instruções abaixo:
  • Título:  Nome para identificação do componente, não será exibido para os usuários.
  • Ativo: Determina se o componente estará ativo ou não no app.
  • Tamanho: Define se o banner terá tamanho P, M, G ou FULL/GG. Banners M só podem ser adicionados em pares.
    Tamanhos padrões esperados das imagens (Largura x Altura) - P: 360L x 53A, M: 176L x 155A, G: 360L x 155A, FULL: 360L x 587A.
    Resolução padrão esperada das imagens - P: 1080x159 px, M: 528x465 px, G: 1080x465 px, FULL: 1080x1500 px.
  • Os demais campos não devem ser preenchidos

  • Role até o fim da página e clique em Novo Ads Commerce e preencha os campos:

  • Fonte de anúncios com opção de Vtex_ Ads

  •  ID de publisher: Identificador único do anunciante dentro da VTEX Ads. Esse ID é gerado e fornecido pela VTEX Ads.

  • Nome do placement: Determina em qual página o anúncio aparece.

    Exemplo: app_home_banner →  home

  • Quantidade de anúncios: quantos banners patrocinados podem ser retornados nesse placement.

               Exemplo: 1 se for apenas um banner ou 3 se for um carrossel de banners

    • Contexto: Define em qual tipo de página o banner será exibido home- Deve ser escrita com letra minúscula

    • ContextId: não é necessário preencher, para home

    • Tipo de anúncio: Selecionar a opção banner
    • Tamanho: É cadastrado no tamanhos de mídia na plataforma do VTEX Ads.                   Exemplo: Tamanho cadastrado para P é 1280x280.

2. Exibição em outras parte do app

    • Realize o login no painel administrativo da VTEX e vá no módulo "Storefront" e clique na função "Headless CMS"

    • Clique em "Criar Documento" e selecione a opção do componente "Content Container".

    • Configure o Título do componente 

    • Marque como a opção de Ativo, para definição se o componente estará ativo ou não no app.
    • Tamanho: Define se o banner terá tamanho P, M, G ou FULL/GG. (Deve está cadastrado no painel da VTEX Ads).
    • No campo Ads- Provedor do anúncio  selecione a opção de Vtex_ Ads
  •  

  • Selecione a ordenação como Score.

  • Role até o fim da página e clique em Novo Ads Commerce e preencha os campos:

  • Fonte de anúncios com opção de Vtex_ Ads

  •  ID de publisher: Identificador único do anunciante dentro da VTEX Ads. Esse ID é gerado e fornecido pela VTEX Ads.
  • Nome do placement: Determina em qual página o anúncio aparece- semelhante ao cadastrado painel do VTEX Ads.                                                                                                                       Exemplo: app_banner_pdp
  • Quantidade de anúncios: quantos banners patrocinados podem ser retornados nesse placement.
  • Contexto: Define em qual tipo de página o banner será exibido- Deve ser escrita com letra minúscula e conforme ao corresponde cadastrado no painel do VTEX Ads que são:[\"home\",\"search\",\"category\",\"product_page\"]
  • OBS: Para a PDP e na busca não é necessário preencher esse campo e nem o campo de ID do contexto.

 

  • Tipo de anúncio: Selecionar a opção banner
  • Tamanho: É cadastrado no tamanhos de mídia na plataforma do VTEX Ads.                    Exemplo: Tamanho cadastrado para P é 1280x280.  

Caso fique com alguma dúvida, você pode enviar um e-mail para suporte@kobe.io.

 

 

Artigos relacionados

Powered by Zendesk