Banners.js

Die öffentliche banner.js-Bibliothek von Topsort ermöglicht es Marktplätzen, Werbebanner durch eine Low-Code-Integration anzuzeigen. Mit einem einfachen HTML-Tag kann sich der Marktplatz mit dem Werbeserver von Topsort verbinden und Banner aus aktiven Kampagnen ohne komplexe Integrationen anzeigen.

Installation

Sie können die Bibliothek mit npm oder yarn installieren oder das SDK direkt in Ihre HTML-Datei laden, indem Sie ein <script>-Tag einfügen:

<script
  async
  type="module"
  src="https://unpkg.com/@topsort/banners@latest/dist/banners.mjs"
></script>
<script>
  // Globale Konfiguration für Topsort
  window.TS = {
    token: "TSE_XXXXXXXXXXXX", // Ersetzen Sie dies durch Ihren Topsort API-Schlüssel
  };
</script>

Verwendung

Dieses Beispiel zeigt die minimal erforderliche Konfiguration. Die Integration funktioniert mit Standard-HTML und Javascript und ist daher mit den meisten Frontend-Stacks kompatibel. Um es zu testen, müssen Sie einfach Ihren Marketplace-API-Schlüssel und die Banner-Slot-ID hinzufügen, die in der Kampagne konfiguriert ist.

<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>
  // API-Schlüssel für Auktionen und Ereignisse festlegen
  window.TS = {
    token: "TSE_XXXXXXXXXXXX",
  };
  // Benutzerdefiniertes Verhalten kann für jede Website konfiguriert werden.
  window.TS_BANNERS = {
    // Ziel-Link verwalten
    getLink(banner) {
      return `https://example.com/${banner.id}`;
    },
    // Ladezustand verwalten
    getLoadingElement() {
      const el = document.createElement("div");
      el.innerText = "Wird geladen...";
      return el;
    },
    // Fehler verwalten
    getErrorElement() {
      const el = document.createElement("div");
      el.innerText = "Fehler beim Laden des Banners";
      return el;
    },
  };
</script>
<body>
  <topsort-banner width="600" height="400" id="<Ihre Slot-ID>"></topsort-banner>
</body>

Hier sind die verfügbaren Attribute für die Komponente <topsort-banner>. Sie dienen als Eingabe für die Auktionsanfrage, um die richtigen Gewinner für diesen Kontext abzurufen.

Name	Typ	Beschreibung
width	number	Breite des Banners
height	number	Höhe des Banners
id	string	Die Slot-ID für dieses Banner, in der Kampagne konfiguriert
Category-id (optional)	string	Kontextkategorie für das Targeting
Search-query (optional)	string	Kontext-Schlüsselwort für das Targeting

Hier sind die verfügbaren Attribute für die Komponente <topsort-banner>. Sie dienen als Eingabe für die Auktionsanfrage, um die richtigen Gewinner für diesen Kontext abzurufen.

Name	Typ	Beschreibung
getLink(banner)	string	Ziel-URL des Banners, in der Kampagne konfiguriert.
getLoadingElement	HTMLElement	Ein benutzerdefiniertes Element, das während des Ladens des Banners angezeigt wird.
getErrorElement	HTMLElement	Ein benutzerdefiniertes Element, das angezeigt wird, wenn ein Fehler auftritt.

Die Banner-Schnittstelle ist die Struktur eines Banner-Objekts. Jedes Banner enthält Metadaten über die Kampagne und die resolvedBidId, den Parameter, der zum Verfolgen von Benutzerinteraktionen (Klicks und Impressionen) erforderlich ist.

Name	Typ	Beschreibung
type	”product” \| “vendor” \| “brand” \| “url”	Der Typ der gewinnenden Entität, dargestellt durch das Banner, in der Kampagne konfiguriert.
id	string	Die ID der gewinnenden Entität. Wenn die Entität vom Typ URL ist, ist dies die URL.
resolvedBidId	string	Die entsprechende Gebots-ID der gewinnenden Entität, erforderlich zum Verfolgen der Benutzerinteraktion (Klicks, Impressionen) mit der Anzeige.
asset	[{ url: string }]	Ein Array von URLs, die auf die Banner-Ressourcen verweisen.

Installation

Verwendung

Banner-Attribute

Banner-Verhalten

Banner-Schnittstelle

​Installation

​Verwendung

​Banner-Attribute

​Banner-Verhalten

​Banner-Schnittstelle

Installation

Verwendung

Banner-Attribute

Banner-Verhalten

Banner-Schnittstelle