Banners.js

La biblioteca pública banner.js de Topsort permite a los marketplaces mostrar anuncios de banner a través de una integración de bajo código. Al usar una simple etiqueta HTML, el marketplace puede conectarse al servidor de anuncios de Topsort y renderizar banners de campañas activas sin integraciones complejas.

Instalación

Puedes instalar la biblioteca usando npm o yarn, o cargar el SDK directamente en tu archivo HTML incluyendo una etiqueta <script>:

<script
  async
  type="module"
  src="https://unpkg.com/@topsort/banners@latest/dist/banners.mjs"
></script>
<script>
  // Global configuration for Topsort
  window.TS = {
    token: "TSE_XXXXXXXXXXXX", // Replace with your Topsort API key
  };
</script>

Uso

Este ejemplo muestra la configuración mínima requerida para hacerlo. La integración funciona con HTML y Javascript estándar, haciéndola compatible con la mayoría de los stacks frontend. Para probarlo, solo necesitas agregar tu Marketplace API Key y el banner slot id, configurado en la campaña.

<script
  async
  type="module"
  src="https://unpkg.com/@topsort/banners@latest/dist/banners.mjs"
></script>
<script
  async
  type="module"
  src="https://unpkg.com/@topsort/analytics.js/dist/ts.js"
></script>
<script>
  // Set API key for auctions and events
  window.TS = {
    token: "TSE_XXXXXXXXXXXX",
  };
  // Custom behavior can be configured for each site.
  window.TS_BANNERS = {
    // handle the destination link
    getLink(banner) {
      return `https://example.com/${banner.id}`;
    },
    // handle loading/fetching state
    getLoadingElement() {
      const el = document.createElement("div");
      el.innerText = "Loading...";
      return el;
    },
    // handle errors
    getErrorElement() {
      const el = document.createElement("div");
      el.innerText = "Error loading banner";
      return el;
    },
  };
</script>
<body>
  <topsort-banner width="600" height="400" id="<your slot id>"></topsort-banner>
</body>

Estos son los atributos disponibles para el componente <topsort-banner>. Sirven como entrada para la solicitud de subasta, para obtener los ganadores correctos para ese contexto.

Nombre	Tipo	Descripción
width	number	Ancho del banner
height	number	Alto del banner
id	string	El ID del slot para este banner, configurado en la campaña
Category-id (opcional)	string	Categoría contextual para segmentación
Search-query (opcional)	string	Palabra clave contextual para segmentación

Estos son los atributos disponibles para el componente <topsort-banner>. Sirven como entrada para la solicitud de subasta, para obtener los ganadores correctos para ese contexto.

Nombre	Tipo	Descripción
getLink(banner)	string	URL de destino del banner, configurada en la campaña.
getLoadingElement	HTMLElement	Un elemento personalizado que se muestra cuando el banner está cargando.
getErrorElement	HTMLElement	Un elemento personalizado que se muestra cuando ocurre un error.

La interfaz del banner es la estructura de un objeto banner. Cada banner contiene metadatos sobre la campaña, y el resolvedBidId, el parámetro necesario para rastrear las interacciones del usuario (clics e impresiones).

Nombre	Tipo	Descripción
type	”product” \| “vendor” \| “brand” \| “url”	El tipo de la entidad ganadora, representada por el banner, configurado en la campaña.
id	string	El ID de la entidad ganadora. Si la entidad es de tipo URL, esta es la URL.
resolvedBidId	string	El ID de oferta correspondiente de la entidad ganadora, necesario para rastrear la interacción del usuario (clics, impresiones) con el anuncio.
asset	[{ url: string }]	Un array de urls que enlazan a los assets del banner.

Instalación

Uso

Atributos del Banner

Comportamientos del Banner

Interfaz del Banner

​Instalación

​Uso

​Atributos del Banner

​Comportamientos del Banner

​Interfaz del Banner

Instalación

Uso

Atributos del Banner

Comportamientos del Banner

Interfaz del Banner