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

# Fallback et tests A/B

> Exécutez Topsort aux côtés de serveurs publicitaires existants avec une logique de secours

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

Si le détaillant utilise déjà des publicités en utilisant un serveur publicitaire, il est possible de l'exécuter aux côtés de Topsort en utilisant une logique de secours. Cela permet aux détaillants de comparer les performances des serveurs publicitaires et d'augmenter les taux de remplissage.

## Cas d'usage

<CardGroup cols={2}>
  <Card title="Logique de secours" icon="arrow-down">
    Utilisez un serveur publicitaire secondaire lorsque Topsort ne renvoie aucun gagnant, garantissant un taux de
    remplissage maximum
  </Card>

  <Card title="Tests A/B" icon="vials">
    Comparez les performances des serveurs publicitaires en utilisant des segments d'audience ou des divisions de trafic
  </Card>
</CardGroup>

## Comment ça fonctionne

Par exemple, si le détaillant utilise des bannières publicitaires via GAM (Google Ad Manager), il peut définir Topsort comme serveur publicitaire principal pour s'assurer que ses campagnes vendues directement ont la priorité sur la demande de GAM.

Les requêtes publicitaires et les interactions provenant de publicités non servies par Topsort peuvent être signalées à Topsort pour voir et comparer les métriques en un seul endroit.

<Steps>
  <Step title="Intégrer avec Topsort">
    Configurez Topsort comme votre serveur publicitaire principal en utilisant l'une des méthodes d'intégration
    (API, SDK ou low-code).
  </Step>

  <Step title="Demander d'abord une publicité Topsort">
    Demandez toujours une publicité à Topsort en premier dans votre logique de diffusion publicitaire.
  </Step>

  <Step title="Vérifier les gagnants">
    Si Topsort renvoie des gagnants, affichez la publicité Topsort.
  </Step>

  <Step title="Basculer vers le secondaire">
    Si aucun gagnant n'est renvoyé, demandez une publicité à votre serveur publicitaire secondaire.
  </Step>
</Steps>

## Exemple d'implémentation

```javascript theme={null}
async function displayAd() {
  try {
    const response = await fetch("https://api.topsort.com/v2/auctions", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        // Vos paramètres de requête d'enchères
      }),
    });
    const auctionData = await response.json();

    if (auctionData?.results?.winners) {
      console.log("Publicité Topsort affichée.");
      return; // Sortie anticipée - la publicité Topsort est affichée
    } else {
      console.log("Aucune publicité Topsort disponible.");
    }
  } catch (error) {
    console.error("Erreur lors de la récupération de la publicité Topsort:", error);
  }

  // Basculer vers le réseau secondaire
  if (secondaryNetwork) {
    // Afficher la publicité du réseau secondaire
    console.log("Affichage de la publicité secondaire.");
  } else {
    console.warn("Aucun réseau publicitaire secondaire configuré.");
  }
}

displayAd();
```

## Approche de test A/B

Pour les tests A/B, modifiez la logique de sélection en utilisant :

* **Segments d'audience** - Routez des segments d'utilisateurs spécifiques vers différents serveurs publicitaires
* **Division du trafic** - Assignez aléatoirement un pourcentage de trafic à chaque serveur publicitaire

<Note>
  Signalez toutes les interactions publicitaires (y compris depuis les serveurs publicitaires secondaires) à Topsort pour
  comparer les métriques dans un tableau de bord unifié.
</Note>

<IntegrationsCard1AFr />