Atenção: Esta ferramenta está apta apenas a servir anúncios do tipo Banner e Vídeo.
A integração transparente tem o objetivo de reduzir a fricção ao máximo para iniciar a configuração da integração do VTEX Ads de forma mais simples possível.
Para que esta Prova de Conceito funcione, os seguintes requisitos são essenciais:
Integração de Catálogo: Uma integração de catálogo precisa estar em funcionamento.
Instalação do Script: O nosso script deve ser adicionado ao site.
Disparo de Evento de Conversão: O evento de conversão precisa ser disparado pelo lado do cliente.
A sincronização do catálogo segue o formato já definido para todas as integrações.
Adicione o seguinte script o mais cedo possível na tag <head> da página ou em seu site/msite:
<script src="https://cdn.newtail.com.br/retail-media/scripts/vtexads-magic-1.0.0.js"></script>
Para que o script funcione corretamente, o cliente deve nos informar a origem de dois parâmetros importantes: session_id e user_id. Esses parâmetros geralmente são armazenados em cookies, sessionStorage ou localStorage.
O evento de conversão deve ser enviado após a criação do pedido, sem a necessidade de confirmação de pagamento.
O script a seguir demonstra como enviar dados para um endpoint de API usando a interface navigator.sendBeacon. O método sendBeacon é ideal para enviar pequenas quantidades de dados de forma assíncrona, sem impactar o desempenho da página. É particularmente útil para enviar dados de analytics antes que o usuário saia da página.
/**
* Este script demonstra como enviar dados para um endpoint de API
* usando a interface `navigator.sendBeacon`.
*
* O método `sendBeacon` é projetado para enviar pequenas quantidades de dados
* de forma assíncrona, sem afetar o desempenho da página atual
* ou o tempo de carregamento da próxima.
*
* É particularmente útil para enviar dados de analytics antes que
* um usuário saia de uma página.
*/
// 1. Defina os dados que você deseja enviar.
const data = {
"publisher_id": "d4dff0cb-1f21-4a96-9acf-d9426a5ed08c",
"user_id": "26119121",
"order_id": "1758035060",
"channel": "site|msite|app",
"created_at": "2025-09-16T15:04:19.794Z",
"items": [
{
"price": 12,
"promotional_price": 10,
"quantity": 1,
"sku": "sku1"
},
{
"price": 15,
"promotional_price": 13,
"quantity": 1,
"sku": "sku2",
"seller_id": "seller1"
},
{
"price": 19,
"promotional_price": 17,
"quantity": 1,
"sku": "sku3",
"product_id": "prod3"
},
{
"price": 30,
"promotional_price": 25,
"quantity": 2,
"sku": "sku4",
"product_id": "prod4",
"seller_id": "seller2"
}
]
};
// 2. Converta o objeto de dados em uma string JSON.
const rawData = JSON.stringify(data);
// 3. Crie um Blob a partir da string JSON.
// Isso nos permite definir explicitamente o Content-Type para a requisição.
const blob = new Blob([rawData], { type: 'application/json' });
// 4. Defina a URL do endpoint.
const url = "https://newtail-media.newtail.com.br/v1/beacon/conversion";
// 5. Use `navigator.sendBeacon` para enviar os dados.
// O método retorna `true` se o navegador enfileirar a solicitação
// para entrega e `false` caso contrário.
// Note que `sendBeacon` não retorna uma promessa (Promise), então não há
// `.then()` ou `.catch()`. A entrega não é garantida, mas é
// altamente provável.
const success = navigator.sendBeacon(url, blob);
if (success) {
console.log("Solicitação de beacon enfileirada com sucesso!");
} else {
console.error("Falha ao enfileirar a solicitação de beacon.");
}