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

# Exemple d'API de bout en bout

> Exemple d'intégration de bout en bout avec nos API

export const IntegrationsCard1AFr = () => {
  return <>
      <style>{`
        .integrations-card-1a-fr {
          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-fr:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
          border-color: rgba(0, 0, 0, 0.12);
        }

        .dark .integrations-card-1a-fr {
          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-fr:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          border-color: rgba(255, 255, 255, 0.12);
        }

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

        .integrations-card-1a-fr-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-fr-avatar {
          border-color: #25253b;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .integrations-card-1a-fr 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-fr h2 {
          color: #f9fafb;
        }

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

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

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

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

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

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

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

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

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

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

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

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

          .integrations-card-1a-fr-subtitle {
            font-size: 0.75rem;
          }
        }
      `}</style>
      <div className="integrations-card-1a-fr">
        <div className="integrations-card-1a-fr-avatar-row">
          <img src="/images/integration-team/agustin.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/amelia.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/bernardita.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/borumy.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/felipe.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/gui.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/javiera.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/linn.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/marcio.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/mateus.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/max.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
          <img src="/images/integration-team/rodrigo.webp" alt="" loading="lazy" className="integrations-card-1a-fr-avatar" />
        </div>

        <h2>Besoin d'aide avec votre intégration Topsort ?</h2>

        <p className="integrations-card-1a-fr-subtitle">
          Parlez-nous, l'équipe d'ingénierie des intégrations.
        </p>

        <p>
          Contactez-nous via <strong>votre canal de messagerie dédié</strong> ou à{" "}
          <a href="mailto:support@topsort.com">support@topsort.com</a>.
        </p>

        <p>
          Si vous n'êtes pas encore client,{" "}
          <a href="https://www.topsort.com/book-a-demo">planifiez une démo</a> avec notre
          équipe de vente.
        </p>
      </div>
    </>;
};

Cet exemple démontre un flux complet utilisant les API de Topsort pour une campagne de produits sponsorisés avec ciblage de catégorie. Remplacez les clés API et les ID par vos identifiants et valeurs réels.

**Étapes :**

<Steps>
  <Step title="Synchroniser le catalogue">Synchronisez votre catalogue de produits avec Topsort</Step>
  <Step title="Créer une campagne">Configurez une campagne de produits sponsorisés</Step>
  <Step title="Envoyer des requêtes d'enchères">Demandez les gagnants d'enchères</Step>
  <Step title="Suivre les événements">Signalez les impressions, les clics et les achats</Step>
  <Step title="Obtenir le rapport">Récupérez les données de performance de la campagne</Step>
</Steps>

<Note>
  * Pour gérer les produits, les campagnes et les rapports, utilisez une clé API Advanced
    (TSC\_...). - Pour les enchères et les événements, utilisez une clé API Marketplace (TSE\_...).
</Note>

## 1. Synchroniser le catalogue

Un exemple de produit example-product-coca-cola, de la catégorie soft-drinks est utilisé dans cet exemple. N'oubliez pas d'utiliser votre clé API Advanced.

```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: "Canette de Coca Cola",
      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("statut inattendu: " + response.status);
  } else {
    console.log("statut de succès: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

## 2. Créer une campagne

Dans cet exemple, une campagne est créée pour promouvoir le produit example-product-coca-cola, avec un déclencheur par mot-clé (soft drink). N'oubliez pas d'utiliser votre clé API Advanced.

```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: "Une campagne d'exemple",
};

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("statut inattendu: " + response.status);
  } else {
    console.log("statut de succès: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

## 3. Envoyer une requête d'enchères

Dans cet exemple, une requête d'enchères est créée pour retourner les gagnants déclenchés par le terme de recherche "soft drink". N'oubliez pas d'utiliser votre clé API Marketplace.

```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("statut inattendu: " + response.status);
  } else {
    console.log("statut de succès: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

## 4. Suivi des événements

Dans cet exemple, un clic sur un produit promu est suivi en utilisant notre API. Le resolvedBidId du gagnant renvoyé par l'appel d'enchères doit être envoyé dans le corps de la requête, pour garantir une attribution correcte des ventes. N'oubliez pas d'utiliser votre clé API Marketplace.

```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("statut inattendu: " + response.status);
  } else {
    console.log("statut de succès: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

<IntegrationsCard1AFr />