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

# Twilio Segment

> Aprende cómo integrar Topsort Events con Twilio Segment

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 estás usando Twilio Segment para rastrear eventos en tu sitio, puedes enviar eventos a Topsort directamente agregando el Destino Topsort en tu cuenta de Segment. Por favor consulta la [documentación de Topsort](https://segment.com/docs/connections/destinations/catalog/actions-topsort/) en la base de conocimiento de Twilio Segments.

Como prerrequisito para esta integración, debes tener una cuenta de Segment y una Fuente (sitio web o app) funcionando.

<Steps>
  <Step title="Entender los Eventos Requeridos">
    Topsort usa tres eventos principales, todos mapeados desde la Especificación de eCommerce de Segment:

    | Evento de Topsort | Mapeo por Defecto de Segment |  Mapeo Alternativo  |
    | :---------------: | :--------------------------: | :-----------------: |
    |   `impressions`   |        Product Viewed        | Product List Viewed |
    |      `clicks`     |        Product Clicked       |    Product Added    |
    |    `purchases`    |        Order Completed       |          —          |

    * Evita enviar clics duplicados. Si tanto Product Clicked como Product Added se disparan desde la misma acción del usuario, elige solo uno.
    * Si estás usando eventos personalizados, contacta a [support@topsort.com](mailto:support@topsort.com) para mapearlos correctamente.
  </Step>

  <Step title="Agregar el Destino Topsort en Segment">
    1. En Segment, ve a Connections > Catalog > Destinations
    2. Busca Topsort, luego haz clic en Add Destination
    3. Selecciona la Fuente relevante (tu sitio o app)

    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/topsort/images/ad-server/events/segment-app.png" alt="Segment App" />
    </Frame>
  </Step>

  <Step title="Configurar Ajustes de Destino">
    1. En la Plataforma de Gestión de Topsort, ve a Settings > API Integration
    2. Copia o crea tu Marketplace API Key
    3. De vuelta en Segment, abre la pestaña Settings del destino Topsort y pega tu API Key

    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/topsort/images/ad-server/events/segment-settings.png" alt="Segment Settings" />
    </Frame>

    La API Key permite a Segment enviar eventos a tu cuenta de Topsort.
  </Step>

  <Step title="Habilitar Eventos de Track y Agregar Metadatos">
    1. Solo habilita los eventos de Track que estás enviando activamente desde tu sitio

    <Frame>
      <img src="https://mintcdn.com/topsort/1RZV69Uhic79Ylqv/images/ad-server/events/segment-mappings.png?fit=max&auto=format&n=1RZV69Uhic79Ylqv&q=85&s=3bfab807dbddbe24a12b650ee6933f80" alt="Segment Mappings" width="2940" height="1534" data-path="images/ad-server/events/segment-mappings.png" />
    </Frame>

    Prevén el doble conteo revisando tu lógica de disparo de eventos.

    2. Agrega el campo `resolvedBidId` a:

    * Eventos de Product Viewed
    * Eventos de Product Clicked

    El `resolvedBidId` identifica únicamente al ganador promovido de la subasta. Puedes recuperarlo desde la respuesta de la Auctions API o Proxy.

    Ejemplo de llamada:

    ```javascript theme={null}
    analytics.track('Product Clicked', {
      productId: '12345',
      resolvedBidId: '67890' // requerido para atribución de Topsort
    });
    ```
  </Step>

  <Step title="Identificar Usuarios">
    Topsort recomienda identificar usuarios logueados con el método identify de Segment. Ejemplo:

    ```javascript theme={null}
    analytics.identify('361b1fdfbeaa9d64a13c033eb9f970dc6740f6bc', {
      email: 'john.doe@example.com'
    });
    ```

    Los usuarios sin sesión iniciada se rastrean con un `anonymousId`. Si usas fuentes del lado del servidor, incluye al menos userId o anonymousId. Una vez que se identifica un usuario, cada llamada al método Track de Segment registra automáticamente el ID del usuario. Los usuarios que no han iniciado sesión pueden rastrearse usando un anonymousId.
  </Step>
</Steps>

<IntegrationsCard1AEs />