Analytics.js - Topsort Documentation

Die öffentliche analytics.js-Bibliothek von Topsort ermöglicht es Marktplätzen, Topsort-Interaktionsereignisse wie Klicks, Impressionen und Käufe mit einer Low-Code-Integration einfach zu senden. Mit einem einfachen HTML-Tag kann sich der Marktplatz mit dem Werbeserver von Topsort verbinden und alle Tracking-Ereignisse im Zusammenhang mit einer Anzeige senden.

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/analytics.js@latest/dist/ts.js"
></script>
<script>
  // Globale Konfiguration für Topsort
  window.TS = {
    token: "TSE_XXXXXXXXXXXX", // Ersetzen Sie dies durch Ihren Topsort API-Schlüssel
  };
</script>

Kennzeichnung beworbener Elemente

Um Topsort die automatische Verfolgung von Klicks, Impressionen und Käufen zu ermöglichen, verwenden Sie das HTML-Element data-ts-*, um beworbene Elemente auf der Seite zu kennzeichnen.

Organische Elemente (nicht beworben)

<div class="product" data-ts-product="<productId>">...</div>

Beworbene Elemente

<div class="product" data-ts-resolved-bid="<resolvedBidId>">...</div>

Klickbare Bereiche

Verwenden Sie data-ts-clickable, um anzugeben, welche Bereiche ein Klick-Ereignis auslösen sollen:

<div class="product" ...>
  <div data-ts-clickable>
    <img src="https://cdn.marketplace.com/product.png" />
    <span>Produkttitel</span>
  </div>
  <span>Hilfe</span>
</div>

Für Werbebanner mit Produktattribution:

<div
  class="product"
  data-ts-product="<productId>"
  data-ts-resolved-bid="inherit"
>
  ...
</div>

Kaufverfolgung

Verwenden Sie das JSON-Array data-ts-items, um Käufe zu verfolgen:

<div
  data-ts-action="purchase"
  data-ts-items='[{"product": "product-id-1", "quantity":1, "price": 2399}, {"product": "product-id-2", "quantity": 2, "price": 399}]'
>
  Mein Kauf
</div>

Vollständiges Beispiel

<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@latest/dist/ts.js"
></script>
<script>
  window.TS = {
    token: "<Ihr Topsort API-Schlüssel>",
  };
  window.TS_BANNERS = {
    getLink(banner) {
      return `https://example.com/${banner.id}`;
    },
    getLoadingElement() {
      const el = document.createElement("div");
      el.innerText = "Wird geladen...";
      return el;
    },
    getErrorElement() {
      const el = document.createElement("div");
      el.innerText = "Fehler beim Laden des Banners";
      return el;
    },
  };
</script>

<body>
  <div class="product" data-ts-product="24-MB03" data-ts-resolved-bid="inherit">
    <topsort-banner
      width="600"
      height="400"
      id="<Ihre Slot-ID>"
    ></topsort-banner>
  </div>

  <div class="product" data-ts-resolved-bid="...">
    <div data-ts-clickable>
      <span>Klickbarer Inhalt</span>
    </div>
    <span>Nicht klickbarer Inhalt</span>
  </div>

  <div
    data-ts-action="purchase"
    data-ts-items='[{"product": "product-id-1", "quantity":1, "price": 2399}]'
  >
    Mein Kauf
  </div>
</body>

​Installation

​Kennzeichnung beworbener Elemente

​Organische Elemente (nicht beworben)

​Beworbene Elemente

​Klickbare Bereiche

​Banner-Attribution

​Kaufverfolgung

​Vollständiges Beispiel