> ## 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.

# Analytics.js

> Integrieren und senden Sie Interaktionsereignisse mit der analytics.js-Bibliothek

export const IntegrationsCard1ADe = () => {
  return <>
      <style>{`
        .integrations-card-1a-de {
          display: flex;
          flex-direction: column;
          background-color: #f0f2f4;
          border: 1px solid rgba(0, 0, 0, 0.08);
          border-radius: 12px;
          padding: 1.25rem 1.5rem;
          gap: 0.25rem;
          color: #25253b;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
          transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
          margin-top: 2rem;
        }

        .integrations-card-1a-de:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
          border-color: rgba(0, 0, 0, 0.12);
        }

        .dark .integrations-card-1a-de {
          background-color: #25253b;
          color: #f6f8fa;
          border-color: rgba(255, 255, 255, 0.08);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .dark .integrations-card-1a-de:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          border-color: rgba(255, 255, 255, 0.12);
        }

        .integrations-card-1a-de-avatar-row {
          display: flex;
          margin-left: 14px;
          flex-wrap: wrap;
        }

        .integrations-card-1a-de-avatar {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: 2px solid #f0f2f4;
          margin-left: -14px;
          object-fit: cover;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
          pointer-events: none;
          cursor: default;
        }

        .dark .integrations-card-1a-de-avatar {
          border-color: #25253b;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .integrations-card-1a-de h2 {
          margin: 0;
          line-height: 1.25;
          font-size: clamp(1.25rem, calc(0.875rem + 1.25vw), 1.75rem);
          font-weight: 700;
          letter-spacing: -0.025em;
          color: #111827;
        }

        .dark .integrations-card-1a-de h2 {
          color: #f9fafb;
        }

        .integrations-card-1a-de-subtitle {
          font-size: 0.9375rem;
          font-weight: 500;
          line-height: 1.5;
          color: #4b5563;
          margin: 0;
        }

        .dark .integrations-card-1a-de-subtitle {
          color: #d1d5db;
        }

        .integrations-card-1a-de p {
          margin: 0;
          line-height: 1.5;
          font-size: 0.875rem;
          color: #374151;
        }

        .dark .integrations-card-1a-de p {
          color: #d1d5db;
        }

        .integrations-card-1a-de a {
          color: #0500ff;
          text-decoration: none;
          font-weight: 500;
          transition: color 0.15s ease;
        }

        .integrations-card-1a-de a:hover {
          color: #0400cc;
        }

        .dark .integrations-card-1a-de a {
          color: #8280ff;
        }

        .dark .integrations-card-1a-de a:hover {
          color: #a19fff;
        }

        @media (max-width: 640px) {
          .integrations-card-1a-de-avatar {
            width: 38px;
            height: 38px;
            margin-left: -12px;
          }

          .integrations-card-1a-de-avatar-row {
            margin-left: 12px;
          }
        }

        @media (min-width: 1280px) {
          .integrations-card-1a-de p {
            font-size: 0.6875rem;
            line-height: 1.4;
            letter-spacing: -0.01em;
          }

          .integrations-card-1a-de h2 {
            font-size: clamp(1rem, calc(0.75rem + 1vw), 1.25rem);
          }

          .integrations-card-1a-de-subtitle {
            font-size: 0.75rem;
          }
        }
      `}</style>
      <div className="integrations-card-1a-de">
        <div className="integrations-card-1a-de-avatar-row">
          <img src="/images/integration-team/agustin.webp" alt="Agustin - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/amelia.webp" alt="Amelia - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/bernardita.webp" alt="Bernardita - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/borumy.webp" alt="Borumy - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/felipe.webp" alt="Felipe - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/gui.webp" alt="Gui - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/javiera.webp" alt="Javiera - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/linn.webp" alt="Linn - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/marcio.webp" alt="Marcio - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/mateus.webp" alt="Mateus - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/max.webp" alt="Max - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
          <img src="/images/integration-team/rodrigo.webp" alt="Rodrigo - Integrations Team Member" loading="lazy" className="integrations-card-1a-de-avatar" />
        </div>

        <h2>Brauchen Sie Hilfe bei Ihrer Topsort-Integration?</h2>

        <p className="integrations-card-1a-de-subtitle">
          Sprechen Sie mit uns, dem Integrations-Engineering-Team.
        </p>

        <p>
          Erreichen Sie uns über <strong>Ihren dedizierten Nachrichtenkanal</strong> oder unter{" "}
          <a href="mailto:support@topsort.com">support@topsort.com</a>.
        </p>

        <p>
          Falls Sie noch kein Kunde sind,{" "}
          <a href="https://www.topsort.com/book-a-demo">buchen Sie eine Demo</a> mit unserem
          Vertriebsteam.
        </p>
      </div>
    </>;
};

Die [öffentliche analytics.js-Bibliothek von Topsort](https://github.com/Topsort/banners.js/) 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:

```html theme={null}
<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)

```html theme={null}
<div class="product" data-ts-product="<productId>">...</div>
```

### Beworbene Elemente

```html theme={null}
<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:

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

### Banner-Attribution

Für Werbebanner mit Produktattribution:

```html theme={null}
<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:

```html theme={null}
<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

```html theme={null}
<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>
```

<IntegrationsCard1ADe />