Zum Hauptinhalt springen
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.
NameTypBeschreibung
widthnumberBreite des Banners
heightnumberHöhe des Banners
idstringDie Slot-ID für dieses Banner, in der Kampagne konfiguriert
Category-id (optional)stringKontextkategorie für das Targeting
Search-query (optional)stringKontext-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.
NameTypBeschreibung
getLink(banner)stringZiel-URL des Banners, in der Kampagne konfiguriert.
getLoadingElementHTMLElementEin benutzerdefiniertes Element, das während des Ladens des Banners angezeigt wird.
getErrorElementHTMLElementEin 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.
NameTypBeschreibung
type”product” | “vendor” | “brand” | “url”Der Typ der gewinnenden Entität, dargestellt durch das Banner, in der Kampagne konfiguriert.
idstringDie ID der gewinnenden Entität. Wenn die Entität vom Typ URL ist, ist dies die URL.
resolvedBidIdstringDie 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.
Agustin - Integrations Team MemberAmelia - Integrations Team MemberBernardita - Integrations Team MemberBorumy - Integrations Team MemberFelipe - Integrations Team MemberGui - Integrations Team MemberJaviera - Integrations Team MemberLinn - Integrations Team MemberMarcio - Integrations Team MemberMateus - Integrations Team MemberMax - Integrations Team MemberRodrigo - Integrations Team Member

Brauchen Sie Hilfe bei Ihrer Topsort-Integration?

Sprechen Sie mit uns, dem Integrations-Engineering-Team.Erreichen Sie uns über Ihren dedizierten Nachrichtenkanal oder unter support@topsort.com.Falls Sie noch kein Kunde sind, buchen Sie eine Demo mit unserem Vertriebsteam.