Note: This tool is only able to serve Banner and Video ads.
The goal of transparent integration is to reduce friction as much as possible to start the VTEX Ads integration setup in the simplest way possible.
For this Proof of Concept to work, the following requirements are essential:
Catalog Integration: A catalog integration needs to be up and running.
Script Installation: Our script must be added to the website.
Conversion Event Trigger: The conversion event needs to be triggered on the client side.
The catalog synchronization follows the format already defined for all integrations.
Add the following script as early as possible in the page’s <head> tag or on your website/msite:
<script src="https://cdn.newtail.com.br/retail-media/scripts/vtexads-magic-1.0.0.js"></script>
For the script to work correctly, the client must inform us of the origin of two important parameters: session_id and user_id. These parameters are usually stored in cookies, sessionStorage, or localStorage.
The conversion event must be sent after the order is created, without the need for payment confirmation.
The following script demonstrates how to send data to an API endpoint using the navigator.sendBeacon interface. The sendBeacon method is ideal for sending small amounts of data asynchronously without impacting the page’s performance. It is particularly useful for sending analytics data before the user navigates away from the page.
/**
* This script demonstrates how to send data to an API endpoint
* using the `navigator.sendBeacon` interface.
*
* The `sendBeacon` method is designed to send small amounts of data
* asynchronously without affecting the performance of the current page
* or the load time of the next one.
*
* It is particularly useful for sending analytics data before
* a user navigates away from a page.
*/
// 1. Define the data you want to send.
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. Convert the data object into a JSON string.
const rawData = JSON.stringify(data);
// 3. Create a Blob from the JSON string.
// This allows us to explicitly set the Content-Type for the request.
const blob = new Blob([rawData], { type: 'application/json' });
// 4. Define the endpoint URL.
const url = "https://newtail-media.newtail.com.br/v1/beacon/conversion";
// 5. Use `navigator.sendBeacon` to send the data.
// The method returns `true` if the browser queues the request
// for delivery and `false` otherwise.
// Note that `sendBeacon` does not return a Promise, so there is no
// `.then()` or `.catch()`. Delivery is not guaranteed, but it is
// highly likely.
const success = navigator.sendBeacon(url, blob);
if (success) {
console.log("Beacon request successfully queued!");
} else {
console.error("Failed to queue beacon request.");
}