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

# End-to-End API-Beispiel

> Beispiel für eine End-to-End-Integration mit unseren APIs

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>
    </>;
};

Dieses Beispiel demonstriert einen vollständigen Workflow unter Verwendung der APIs von Topsort für eine gesponserte Produktkampagne mit Kategorie-Targeting. Ersetzen Sie API-Schlüssel und IDs durch Ihre tatsächlichen Anmeldedaten und Werte.

**Schritte:**

<Steps>
  <Step title="Katalog synchronisieren">Synchronisieren Sie Ihren Produktkatalog mit Topsort</Step>
  <Step title="Kampagne erstellen">Richten Sie eine gesponserte Produktkampagne ein</Step>
  <Step title="Auktionsanfragen senden">Fordern Sie Auktionsgewinner an</Step>
  <Step title="Ereignisse verfolgen">Melden Sie Impressionen, Klicks und Käufe</Step>
  <Step title="Bericht abrufen">Rufen Sie Kampagnen-Leistungsdaten ab</Step>
</Steps>

<Note>
  * Verwenden Sie für die Verwaltung von Produkten, Kampagnen und Berichten einen Advanced API-Schlüssel
    (TSC\_...). - Verwenden Sie für Auktionen und Ereignisse einen Marketplace API-Schlüssel (TSE\_...).
</Note>

## 1. Katalog synchronisieren

Ein Beispielprodukt example-product-coca-cola aus der Kategorie soft-drinks wird in diesem Beispiel verwendet. Denken Sie daran, Ihren Advanced API-Schlüssel zu verwenden.

```javascript theme={null}
const apikey = "TSC_...";

const body = {
  products: [
    {
      active: true,
      categories: ["soft-drinks"],
      id: "example-product-coca-cola",
      imageURL:
        "https://intl.cokestore.com/media/catalog/product/1/6/16181_squeeze-ko-can-maria-2.png",
      name: "Coca Cola Dose",
      price: "9.99",
      vendors: ["coca-cola"],
    },
  ],
};

try {
  const response = await fetch(
    "https://api.topsort.com/public/v1/catalog-search-service/catalogs/products",
    {
      method: "PUT",
      mode: "cors",
      headers: {
        Authorization: `Bearer ${apikey}`,
        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify(body),
    }
  );
  if (!response.ok) {
    console.error("unerwarteter Status: " + response.status);
  } else {
    console.log("Erfolgsstatus: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

## 2. Kampagne erstellen

In diesem Beispiel wird eine Kampagne erstellt, um das Produkt example-product-coca-cola zu bewerben, mit einem Keyword-Trigger (soft drink). Denken Sie daran, Ihren Advanced API-Schlüssel zu verwenden.

```javascript theme={null}
const apikey = "TSC_...";

const body = {
  bids: [
    {
      target: {
        type: "product",
        id: "example-product-coca-cola",
      },
      triggers: [
        {
          type: "keyword",
          value: {
            matchType: "exact",
            words: ["soft drink"],
          },
        },
      ],
    },
  ],
  budget: {
    type: "daily",
    amount: 10000,
  },
  campaignType: "autobidding",
  isActive: true,
  status: "approved",
  adFormat: "listing",
  name: "Eine Beispielkampagne",
};

try {
  const response = await fetch(
    "https://api.topsort.com/public/v1/campaign-service/campaigns?vendor_id=demo-vendor",
    {
      method: "POST",
      mode: "cors",
      headers: {
        Authorization: `Bearer ${apikey}`,
        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify(body),
    }
  );
  if (!response.ok) {
    console.error("unerwarteter Status: " + response.status);
  } else {
    console.log("Erfolgsstatus: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

## 3. Auktionsanfrage senden

In diesem Beispiel wird eine Auktionsanfrage erstellt, um Gewinner zurückzugeben, die durch den Suchbegriff "soft drink" ausgelöst wurden. Denken Sie daran, Ihren Marketplace API-Schlüssel zu verwenden.

```javascript theme={null}
const apikey = "TSE_...";

const body = {
  auctions: [
    {
      searchQuery: "soft drink",
      slots: 1,
      type: "listings",
    },
  ],
};

try {
  const response = await fetch("https://api.topsort.com/v2/auctions", {
    method: "POST",
    mode: "cors",
    headers: {
      Authorization: `Bearer ${apikey}`,
      "Content-Type": "application/json; charset=utf-8",
    },
    body: JSON.stringify(body),
  });
  if (!response.ok) {
    console.error("unerwarteter Status: " + response.status);
  } else {
    console.log("Erfolgsstatus: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

## 4. Ereignisverfolgung

In diesem Beispiel wird ein Klick auf ein beworbenes Produkt mit unserer API verfolgt. Die resolvedBidId des vom Auktionsaufruf zurückgegebenen Gewinners muss im Anfragekörper gesendet werden, um eine korrekte Verkaufszuordnung sicherzustellen. Denken Sie daran, Ihren Marketplace API-Schlüssel zu verwenden.

```javascript theme={null}
const apikey = "TSE_...";

const body = {
  clicks: [
    {
      id: "d0cf3f56-a719-4e02-9c88-625f965ae6e7",
      occurredAt: "2024-07-23T11:49:04+00:00",
      opaqueUserId: "71303ce0-de89-496d-8270-6434589615e2",
      resolvedBidId:
        "ChAGafmNzX5wy4sEaDnXi4iWEhABjxq1RG513IkbvRgIVcd6GhABjmiyW3t2Ur066CLC3jWVIgoKBjExMjYzNRABMPuVDw",
    },
  ],
};

try {
  const response = await fetch("https://api.topsort.com/v2/events", {
    method: "POST",
    mode: "cors",
    headers: {
      Authorization: `Bearer ${apikey}`,
      "Content-Type": "application/json; charset=utf-8",
    },
    body: JSON.stringify(body),
  });

  if (!response.ok) {
    console.error("unerwarteter Status: " + response.status);
  } else {
    console.log("Erfolgsstatus: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

<IntegrationsCard1ADe />