Nota: Esta herramienta solo está apta para servir anuncios de tipo Banner y Video.
La integración transparente tiene como objetivo reducir la fricción al máximo para iniciar la configuración de la integración de VTEX Ads de la forma más sencilla posible.
Para que esta Prueba de Concepto funcione, los siguientes requisitos son esenciales:
Integración de Catálogo: Es necesario que una integración de catálogo esté en funcionamiento.
Instalación del Script: Nuestro script debe ser añadido al sitio web.
Disparo del Evento de Conversión: El evento de conversión debe ser disparado desde el lado del cliente.
La sincronización del catálogo sigue el formato ya definido para todas las integraciones.
Añada el siguiente script lo antes posible en la etiqueta <head> de la página o en su sitio web/msite:
<script src="https://cdn.newtail.com.br/retail-media/scripts/vtexads-magic-1.0.0.js"></script>
Para que el script funcione correctamente, el cliente debe informarnos el origen de dos parámetros importantes: session_id y user_id. Estos parámetros generalmente se almacenan en cookies, sessionStorage o localStorage.
El evento de conversión debe enviarse después de la creación del pedido, sin necesidad de confirmación de pago.
El siguiente script demuestra cómo enviar datos a un endpoint de API utilizando la interfaz navigator.sendBeacon. El método sendBeacon es ideal para enviar pequeñas cantidades de datos de forma asíncrona sin afectar el rendimiento de la página. Es particularmente útil para enviar datos de análisis antes de que el usuario abandone la página.
/**
* Este script demuestra cómo enviar datos a un endpoint de API
* utilizando la interfaz `navigator.sendBeacon`.
*
* El método `sendBeacon` está diseñado para enviar pequeñas cantidades de datos
* de forma asíncrona sin afectar el rendimiento de la página actual
* o el tiempo de carga de la siguiente.
*
* Es particularmente útil para enviar datos de análisis antes de que
* un usuario abandone una página.
*/
// 1. Defina los datos que desea 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. Convierta el objeto de datos en una cadena JSON.
const rawData = JSON.stringify(data);
// 3. Cree un Blob a partir de la cadena JSON.
// Esto nos permite definir explícitamente el Content-Type para la solicitud.
const blob = new Blob([rawData], { type: 'application/json' });
// 4. Defina la URL del endpoint.
const url = "https://newtail-media.newtail.com.br/v1/beacon/conversion";
// 5. Use `navigator.sendBeacon` para enviar los datos.
// El método devuelve `true` si el navegador pone en cola la solicitud
// para su entrega y `false` en caso contrario.
// Tenga en cuenta que `sendBeacon` no devuelve una Promesa, por lo que no hay
// `.then()` o `.catch()`. La entrega no está garantizada, pero es
// muy probable.
const success = navigator.sendBeacon(url, blob);
if (success) {
console.log("¡Solicitud de beacon encolada con éxito!");
} else {
console.error("Error al encolar la solicitud de beacon.");
}