Integración de Anuncios de Banner: 3 etapas
- Configuraciones de Banner: Crear y compartir espacios publicitarios.
- Subastas para Banners: Trabajar con variables de subasta, solicitudes y respuestas
- 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 | 100 | 50 | 40 | 40 |
| right-slot-2 | Homepage Christmas | http://example.com/home | 50 | 200 | | |
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, que le permitirá proporcionar múltiples fuentes al navegador del cliente. Por ejemplo, si el asset tiene 2 fuentes:
"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,
}
}
]
<picture>
<source
width="400"
srcset="
https://topsort.cdnprovider.com/lhs-banner-image-for-p_PJbnN-1x.png 400w,
https://topsort.cdnprovider.com/lhs-banner-image-for-p_PJbnN-2x.png 800w
"
/>
<img
src="https://topsort.cdnprovider.com/lhs-banner-image-for-p_PJbnN-1x.png"
alt="banner"
/>
</picture>
Native iOS (Swift)
Recomendamos usar 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.
[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:
// Get the screen's density scale
final float scale = getResources().getDisplayMetrics().density;
