Zum Hauptinhalt springen

Documentation Index

Fetch the complete documentation index at: https://docs.topsort.com/llms.txt

Use this file to discover all available pages before exploring further.

Sie können Google Tag Manager verwenden, um unser Werbebanner-Skript in Ihre Plattform zu injizieren. Weitere Einzelheiten finden Sie in der Banner-JS-Dokumentation.

​
Voraussetzungen

1

Zugang zu Google Tag Manager

Sie benötigen ein Google Tag Manager-Konto und Zugriff auf den GTM-Container für die Website, auf der Sie das HTML hinzufügen möchten.
2

Google Tag Manager auf Ihrer Website installiert

Kopieren Sie den folgenden Code und fügen Sie ihn auf jeder Seite Ihrer Website ein.Fügen Sie diesen Code so weit oben wie möglich im <head> der Seite ein (mit Ihrem GTM-Schlüssel):
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
Fügen Sie diesen Code unmittelbar nach dem öffnenden <body>-Tag ein (mit Ihrem GTM-Schlüssel):
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
3

Erstellen Sie ein div mit der gewünschten Dimension auf Ihrer Website

Sie benötigen ein <topsort-banner>-Tag im HTML mit der Höhe und Breite des Slots, den Sie anzeigen möchten.
<body>
  <topsort-banner
    width="600"
    height="400"
    id="<Ihre Slot-ID>"
    category-id="<Kategorie-ID>"
  ></topsort-banner>
</body>

​
In Google Tag Manager

1

Bei GTM anmelden

Öffnen Sie Ihr Google Tag Manager-Dashboard.
2

Wählen Sie einen Arbeitsbereich

Klicken Sie in der Seitenleiste auf ‘Aktueller Arbeitsbereich’ und wählen Sie bei Bedarf einen anderen aus.
3

Erstellen Sie ein neues Tag

Klicken Sie in der Seitenleiste auf ‘Tags’ und dann auf ‘Neu’.
4

Wählen Sie den Tag-Typ

Wählen Sie ‘Benutzerdefiniertes HTML-Tag’ aus der Liste der Tag-Typen aus.
5

Fügen Sie Ihr HTML hinzu

Geben Sie Ihren benutzerdefinierten HTML-Code in das HTML-Textfeld ein. Der Code muss Ihren Topsort Marketplace API-Schlüssel enthalten. Um ein neues Token zu erhalten, gehen Sie zu app.topsort.com → Einstellungen → API-Integration.
<script>
  // API-Schlüssel für Auktionen und Ereignisse festlegen
  window.TS = {
    token: "Ihr Topsort-Token",
  };
  // Benutzerdefiniertes Verhalten kann für jede Website konfiguriert werden.
  window.TS_BANNERS = {
    // Ziel-Link verwalten
    getLink: function(banner) {
      switch (banner.type) {
        case "url":
          return banner.id;
        default:
          return `https://example.com/${banner.id}`;
      }
    },
  };
</script>
<script>
(function() {
    var bannersScript = document.createElement('script');
    bannersScript.src = 'https://unpkg.com/@topsort/banners@0.2.0/dist/banners.mjs';
    bannersScript.type = 'module';
    bannersScript.async = true;

    bannersScript.addEventListener('load', function() {
      window.dataLayer.push({
        event: 'topsort-banners-loaded'
      });
    });

    var analyticsScript = document.createElement('script');
    analyticsScript.src = 'https://unpkg.com/@topsort/analytics.js';
    analyticsScript.type = 'module';
    analyticsScript.async = true;

    analyticsScript.addEventListener('load', function() {
      window.dataLayer.push({
        event: 'topsort-analytics-loaded'
      });
    });

    document.head.appendChild(bannersScript);
    document.head.appendChild(analyticsScript);
  })()
</script>
6

Trigger festlegen

Wählen Sie einen Trigger, um zu bestimmen, wann das HTML ausgeführt werden soll (z.B. Seitenaufruf, Klick usw.).
7

Speichern und Vorschau

Speichern Sie Ihr Tag und verwenden Sie den ‘Vorschau’-Modus, um die Funktionalität Ihres HTML auf Ihrer Website zu testen.
8

Überprüfen

Überprüfen Sie, dass die Website die Banner anzeigt, dass Ereignisse korrekt gemeldet werden und dass sich die opaqueUserId bei Verwendung verschiedener Browser ändert.
9

Veröffentlichen

Sobald überprüft, veröffentlichen Sie die Änderungen, um das HTML auf Ihrer Website aktiv zu machen.