> ## 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 y Pruebas A/B

> Ejecuta Topsort junto con servidores de anuncios existentes con lógica de fallback

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <h2>¿Necesitas ayuda con tu integración de Topsort?</h2>

        <p className="integrations-card-1a-es-subtitle">
          Habla con nosotros, el equipo de ingeniería de integraciones.
        </p>

        <p>
          Contáctanos a través de <strong>tu canal de mensajería dedicado</strong> o en{" "}
          <a href="mailto:support@topsort.com">support@topsort.com</a>.
        </p>

        <p>
          Si aún no eres cliente,{" "}
          <a href="https://www.topsort.com/book-a-demo">agenda una demo</a> con nuestro
          equipo de ventas.
        </p>
      </div>
    </>;
};

Si el retailer ya está ejecutando anuncios usando un servidor de anuncios, es posible ejecutarlo junto con Topsort usando una lógica de fallback. Esto permite a los retailers comparar el rendimiento de los servidores de anuncios y aumentar las tasas de llenado.

## Casos de Uso

<CardGroup cols={2}>
  <Card title="Lógica de Fallback" icon="arrow-down">
    Usa un servidor de anuncios secundario cuando Topsort no devuelva ganadores, asegurando la máxima
    tasa de llenado
  </Card>

  <Card title="Pruebas A/B" icon="vials">
    Compara el rendimiento de servidores de anuncios usando segmentos de audiencia o divisiones de tráfico
  </Card>
</CardGroup>

## Cómo Funciona

Por ejemplo, si el retailer está ejecutando anuncios de banner usando GAM (Google Ad Manager), puede configurar Topsort como el servidor de anuncios principal para asegurarse de que sus campañas vendidas directamente tengan prioridad sobre la demanda de GAM.

Las solicitudes de anuncios e interacciones provenientes de anuncios no servidos por Topsort pueden ser reportadas a Topsort para ver y comparar métricas en un solo lugar.

<Steps>
  <Step title="Integra con Topsort">
    Configura Topsort como tu servidor de anuncios principal usando cualquiera de los
    métodos de integración (API, SDK o low-code).
  </Step>

  <Step title="Solicita Primero un Anuncio de Topsort">
    Siempre solicita primero un anuncio de Topsort en tu lógica de servicio de anuncios.
  </Step>

  <Step title="Verifica Ganadores">
    Si Topsort devuelve ganadores, muestra el anuncio de Topsort.
  </Step>

  <Step title="Fallback al Secundario">
    Si no se devuelven ganadores, solicita un anuncio de tu servidor de anuncios secundario.
  </Step>
</Steps>

## Ejemplo de Implementación

```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({
        // Your auction request parameters
      }),
    });
    const auctionData = await response.json();

    if (auctionData?.results?.winners) {
      console.log("Topsort ad displayed.");
      return; // Exit early - Topsort ad is displayed
    } else {
      console.log("No Topsort ad available.");
    }
  } catch (error) {
    console.error("Error fetching Topsort ad:", error);
  }

  // Fallback to secondary network
  if (secondaryNetwork) {
    // Render ad from secondary network
    console.log("Displaying secondary ad.");
  } else {
    console.warn("No secondary ad network configured.");
  }
}

displayAd();
```

## Enfoque de Pruebas A/B

Para pruebas A/B, modifica la lógica de selección usando:

* **Segmentos de Audiencia** - Dirige segmentos específicos de usuarios a diferentes servidores de anuncios
* **División de Tráfico** - Asigna aleatoriamente un porcentaje de tráfico a cada servidor de anuncios

<Note>
  Reporta todas las interacciones de anuncios (incluyendo las de servidores de anuncios secundarios) a Topsort para
  comparar métricas en un panel unificado.
</Note>

<IntegrationsCard1AEs />