Saltar al contenido principal
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>

​
Atributos del Banner

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.
NombreTipoDescripción
widthnumberAncho del banner
heightnumberAlto del banner
idstringEl ID del slot para este banner, configurado en la campaña
Category-id (opcional)stringCategoría contextual para segmentación
Search-query (opcional)stringPalabra clave contextual para segmentación

​
Comportamientos del Banner

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.
NombreTipoDescripción
getLink(banner)stringURL de destino del banner, configurada en la campaña.
getLoadingElementHTMLElementUn elemento personalizado que se muestra cuando el banner está cargando.
getErrorElementHTMLElementUn elemento personalizado que se muestra cuando ocurre un error.

​
Interfaz del Banner

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).
NombreTipoDescripción
type”product” | “vendor” | “brand” | “url”El tipo de la entidad ganadora, representada por el banner, configurado en la campaña.
idstringEl ID de la entidad ganadora. Si la entidad es de tipo URL, esta es la URL.
resolvedBidIdstringEl 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.

¿Necesitas ayuda con tu integración de Topsort?

Habla con nosotros, el equipo de ingeniería de integraciones.Contáctanos a través de tu canal de mensajería dedicado o en support@topsort.com.Si aún no eres cliente, agenda una demo con nuestro equipo de ventas.