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

Use este archivo de muestra 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, 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,
    }
  }
]

Entonces puede generar el siguiente HTML:

<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>

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 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;

Combinar ganadores y resultados orgánicos Carruseles y Swimlanes

⌘I

​Configuraciones de Banner

​Landing Pages: Homepage o Páginas Personalizadas

​Categoría y Búsqueda

​Solicitudes de Subasta para Banners

​Campos de Solicitud

​Campos de Respuesta

​Renderizar Banners

​Aplicaciones Web

​Native iOS (Swift)

​En Android (Java)

Configuraciones de Banner

Landing Pages: Homepage o Páginas Personalizadas

Categoría y Búsqueda

Solicitudes de Subasta para Banners

Campos de Solicitud

Campos de Respuesta

Renderizar Banners

Aplicaciones Web

Native iOS (Swift)

En Android (Java)