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

> Apprenez à intégrer les événements Topsort avec Twilio Segment

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 vous utilisez Twilio Segment pour suivre les événements sur votre site, vous pouvez envoyer des événements à Topsort directement en ajoutant la destination Topsort dans votre compte Segment. Veuillez consulter la [documentation Topsort](https://segment.com/docs/connections/destinations/catalog/actions-topsort/) sur la base de connaissances de Twilio Segments.

Comme prérequis pour cette intégration, vous devez avoir un compte Segment et une Source (site web ou application) fonctionnelle.

<Steps>
  <Step title="Comprendre les événements requis">
    Topsort utilise trois événements principaux, tous mappés depuis la spécification eCommerce de Segment :

    | Événement Topsort | Mappage Segment par défaut |  Mappage alternatif |
    | :---------------: | :------------------------: | :-----------------: |
    |   `impressions`   |       Product Viewed       | Product List Viewed |
    |      `clicks`     |       Product Clicked      |    Product Added    |
    |    `purchases`    |       Order Completed      |          —          |

    * Évitez d'envoyer des clics en double. Si Product Clicked et Product Added sont déclenchés par la même action utilisateur, choisissez-en un seul.
    * Si vous utilisez des événements personnalisés, contactez [support@topsort.com](mailto:support@topsort.com) pour les mapper correctement.
  </Step>

  <Step title="Ajouter la destination Topsort dans Segment">
    1. Dans Segment, allez dans Connexions > Catalogue > Destinations
    2. Recherchez Topsort, puis cliquez sur Ajouter une destination
    3. Sélectionnez la Source pertinente (votre site ou application)

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

  <Step title="Configurer les paramètres de destination">
    1. Dans la plateforme Topsort Manager, allez dans Paramètres > Intégration API
    2. Copiez ou créez votre clé API Marketplace
    3. De retour dans Segment, ouvrez l'onglet Paramètres de la destination Topsort et collez votre clé API

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

    La clé API permet à Segment d'envoyer des événements à votre compte Topsort.
  </Step>

  <Step title="Activer les événements Track et ajouter des métadonnées">
    1. Activez uniquement les événements Track que vous envoyez activement depuis votre site

    <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="Mappages Segment" width="2940" height="1534" data-path="images/ad-server/events/segment-mappings.png" />
    </Frame>

    Évitez le double comptage en révisant votre logique de déclenchement d'événements.

    2. Ajoutez le champ `resolvedBidId` à :

    * Événements Product Viewed
    * Événements Product Clicked

    Le `resolvedBidId` identifie de manière unique le gagnant promu de l'enchère. Vous pouvez le récupérer depuis la réponse de l'Auctions API ou du Proxy.

    Exemple d'appel :

    ```javascript theme={null}
    analytics.track('Product Clicked', {
      productId: '12345',
      resolvedBidId: '67890' // requis pour l'attribution Topsort
    });
    ```
  </Step>

  <Step title="Identifier les utilisateurs">
    Topsort recommande d'identifier les utilisateurs connectés avec la méthode identify de Segment. Exemple :

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

    Les utilisateurs déconnectés sont suivis avec un `anonymousId`. Si vous utilisez des sources côté serveur, incluez au moins userId ou anonymousId. Une fois qu'un utilisateur est identifié, chaque appel à la méthode Track de Segment enregistre automatiquement l'ID utilisateur. Les utilisateurs qui ne sont pas connectés peuvent être suivis en utilisant un anonymousId.
  </Step>
</Steps>

<IntegrationsCard1AFr />