> ## Documentation Index
> Fetch the complete documentation index at: https://docs.topsort.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Banners Patrocinados
> Aprenda cómo usar la API de subastas para crear subastas de listings y banners.
Integración de Anuncios de Banner: 3 etapas
1. **Configuraciones de Banner**: Crear y compartir espacios publicitarios.
2. **Subastas para Banners**: Trabajar con variables de subasta, solicitudes y respuestas
3. **Renderizar Banners**: renderizar y mostrar los assets de banner ganadores
Los anuncios de banner se pueden usar como sliders de página de inicio, marcas destacadas y carruseles.
# **Configuraciones de Banner**
Proporcione una lista de páginas con identificadores únicos para cada espacio de banner.
## **Landing Pages**: Homepage o Páginas Personalizadas
Cree espacios para páginas de inicio de alto tráfico u otras páginas de destino.
Un espacio incluye:
* **SlotID**: Un identificador **único** que puede contener caracteres alfanuméricos y los siguientes símbolos: `!"#$%&'()*+,-._/:;<>?@[]^{}~=`
* **Name**: Un nombre descriptivo (por ejemplo, Homepage Slide 1, Above Trending Products).
* **URL or Deeplink**: La URL donde se encuentra el espacio.
* **Landing Page name**: La página de destino correspondiente al espacio.
* **Ancho** y **Alto** de imagen, si requiere diferentes tamaños en diferentes dispositivos, admitimos 1 conjunto más de tamaños de imagen
| SlotID | Landing Page Name | URL or Deeplinks | Width | Height | Additional Width (optional) | Additional Height (optional) |
| :----------- | :----------------- | :------------------------------------------------- | :---- | :----- | :-------------------------- | :--------------------------- |
| top-slot-1 | Homepage Christmas | [http://example.com/home](http://example.com/home) | 100 | 50 | 40 | 40 |
| right-slot-2 | Homepage Christmas | [http://example.com/home](http://example.com/home) | 50 | 200 | | |
Use [este archivo de
muestra](https://docs.google.com/spreadsheets/d/1KMnGnYp6D3u4kwwofm3nZ97Jgwtvys5fqEfGRmO3aVQ/edit#gid=0)
para cargar configuraciones de banner de forma masiva.
## **Categoría y Búsqueda**
Permita que los vendedores se dirijan a categorías y palabras clave específicas. Defina espacios de banner y compártalos.
Ejemplo:
| SlotID | Width | Height | Alternative Width (optional) | Alternative Height (optional) |
| :-------------- | :---- | :----- | :--------------------------- | :---------------------------- |
| category-bottom | 100 | 50 | 40 | 40 |
# **Solicitudes de Subasta para Banners**
Almacenar el resolvedBidId.
El **resolvedbidId** simplifica la atribución de eventos y el registro para usted y sus vendedores, similar a **auctionID** en listings patrocinados. Necesita ser almacenado para que los eventos puedan ser reportados más tarde, ya sea como una cookie o variable de sesión para aplicaciones web, o almacenado como una variable interna para aplicaciones móviles.
### Campos de Solicitud
| Variable | Type | Definition | Required/optional | Notes |
| :---------- | :------ | :------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
| type | string | Tipo de subasta | required | Debe establecerse como "banners" |
| slots | integer | Número máximo de ganadores de subasta | required | número de ganadores que le gustaría que devuelva la subasta |
| slotId | string | ID de espacio externo proporcionado por el marketplace. | required | Formato: `^[\w!\"#$%&'()_+,\-._/:;<>?@\[\]^\{\}~=\\]\_$` |
| categoryId | string | ID de categoría del marketplace para la subasta. | required solo si son banners de categoría | Por defecto es subasta de homepage si no se proporciona ID de categoría. |
| searchQuery | string | | required solo si son banners de búsqueda \*puede pasar tanto categoryID como searchQuery en la misma llamada | Ejemplo "blue running shoes" |
| device | string | Dispositivo objetivo: desktop o mobile. | optional | Enum: "desktop" o "mobile." Por defecto es "desktop." |
### Campos de Respuesta
| Variable | Type | Definition |
| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| resultType | string | "banners" |
| winners.resolvedBidId | string | Un ID de Topsort que se usará cuando se interactúe con este artículo (para reportar impresiones o clics) |
| winners.type | string | Tipo de la oferta ganadora. Enum: "product", "vendor", "brand", "url". |
| winners.rank | integer | El rango de subasta del producto indica su posición, siendo 1 el ganador. En la respuesta de subasta, el array de ganadores está ordenado, y el rango corresponde al índice de la entrada. |
| winners.id | string | El ID único del marketplace para la entidad ganadora. |
| winners.asset | array | |
| winners.asset.url | string | Fuente URL para un asset de banner. El asset es servido por el CDN de Topsort, contenido en el array de assets |
# **Renderizar Banners**
Configure las configuraciones de banner dentro del panel de administración de Topsort. Inserte el banner en el DOM de su aplicación web o agregue un componente al código de su aplicación móvil.
### **Aplicaciones Web**
Para aplicaciones web, use el [elemento `picture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture), que le permitirá proporcionar múltiples fuentes al navegador del cliente. Por ejemplo, si el asset tiene 2 fuentes:
```json theme={null}
"asset": [
{
"url": "https://topsort.cdnprovider.com/lhs-banner-image-for-p_PJbnN-1x.png",
"mimeType": "image/png",
"dimensions": {
"width": 400,
"height": 100,
}
},
{
"url": "https://topsort.cdnprovider.com/lhs-banner-image-for-p_PJbnN-2x.png",
"mimeType": "image/png",
"dimensions": {
"width": 800,
"height": 200,
}
}
]
```
Entonces puede generar el siguiente HTML:
```html theme={null}
```
El navegador del cliente elegirá entonces el tamaño más adecuado dependiendo de las capacidades del dispositivo del usuario y solo obtendrá el tamaño que mejor se ajuste al dispositivo del usuario.
### Native iOS (Swift)
Recomendamos usar **[AlamofireImage](https://github.com/Alamofire/AlamofireImage)** para manejar opciones de descarga y renderizado. Puede obtener el factor de escala del dispositivo de su cliente llamando y eligiendo el tamaño correcto.
```swift theme={null}
[UIScreen mainScreen].scale;
```
### En Android (Java)
Use la biblioteca Glide para renderizar y almacenar en caché imágenes. Al igual que con iOS, necesitará verificar el factor de escala del dispositivo para determinar qué imagen descargar:
```java theme={null}
// Get the screen's density scale
final float scale = getResources().getDisplayMetrics().density;
```
