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

# Google Tag Manager (GTM)

> Comment intégrer Topsort avec Google Tag Manager (GTM) en utilisant notre script banners.js

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

Vous pouvez utiliser Google Tag Manager pour injecter notre script de bannières publicitaires dans votre plateforme. Consultez la documentation Banner JS pour plus de détails.

## Prérequis

<Steps>
  <Step title="Accès à Google Tag Manager">
    Vous devez avoir un compte Google Tag Manager et accès au conteneur GTM pour le site web où vous souhaitez ajouter le HTML.
  </Step>

  <Step title="Google Tag Manager installé sur votre site web">
    Copiez le code ci-dessous et collez-le sur chaque page de votre site web.

    Collez ce code aussi haut que possible dans le `<head>` de la page (en définissant votre clé GTM) :

    ```html theme={null}
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->
    ```

    Collez ce code immédiatement après la balise d'ouverture `<body>` (en définissant votre clé GTM) :

    ```html theme={null}
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    ```
  </Step>

  <Step title="Créez un div avec la dimension souhaitée sur votre site">
    Vous devez avoir une balise `<topsort-banner>` dans le HTML avec la hauteur et la largeur du slot que vous souhaitez afficher.

    ```html theme={null}
    <body>
      <topsort-banner
        width="600"
        height="400"
        id="<votre slot id>"
        category-id="<category id>"
      ></topsort-banner>
    </body>
    ```
  </Step>
</Steps>

## Sur Google Tag Manager

<Steps>
  <Step title="Connectez-vous à GTM">
    Ouvrez votre tableau de bord Google Tag Manager.
  </Step>

  <Step title="Sélectionnez un espace de travail">
    Cliquez sur 'Espace de travail actuel' dans la barre latérale, puis sélectionnez-en un autre si nécessaire.
  </Step>

  <Step title="Créez une nouvelle balise">
    Cliquez sur 'Balises' dans la barre latérale, puis sur 'Nouveau'.
  </Step>

  <Step title="Choisissez le type de balise">
    Sélectionnez 'Balise HTML personnalisée' dans la liste des types de balises.
  </Step>

  <Step title="Ajoutez votre HTML">
    Entrez votre code HTML personnalisé dans la zone de texte HTML. Le code doit inclure votre clé API Marketplace Topsort. Pour obtenir un nouveau token, allez sur app.topsort.com → Paramètres → Intégration API.

    ```html theme={null}
    <script>
      // Définir la clé API pour les enchères et les événements
      window.TS = {
        token: "votre token topsort",
      };
      // Un comportement personnalisé peut être configuré pour chaque site.
      window.TS_BANNERS = {
        // gérer le lien de destination
        getLink: function(banner) {
          switch (banner.type) {
            case "url":
              return banner.id;
            default:
              return `https://example.com/${banner.id}`;
          }
        },
      };
    </script>
    <script>
    (function() {
        var bannersScript = document.createElement('script');
        bannersScript.src = 'https://unpkg.com/@topsort/banners@0.2.0/dist/banners.mjs';
        bannersScript.type = 'module';
        bannersScript.async = true;

        bannersScript.addEventListener('load', function() {
          window.dataLayer.push({
            event: 'topsort-banners-loaded'
          });
        });

        var analyticsScript = document.createElement('script');
        analyticsScript.src = 'https://unpkg.com/@topsort/analytics.js';
        analyticsScript.type = 'module';
        analyticsScript.async = true;

        analyticsScript.addEventListener('load', function() {
          window.dataLayer.push({
            event: 'topsort-analytics-loaded'
          });
        });

        document.head.appendChild(bannersScript);
        document.head.appendChild(analyticsScript);
      })()
    </script>
    ```
  </Step>

  <Step title="Définir le déclencheur">
    Choisissez un déclencheur pour déterminer quand le HTML doit être exécuté (par ex., Vue de page, Clic, etc.).
  </Step>

  <Step title="Enregistrer et prévisualiser">
    Enregistrez votre balise et utilisez le mode 'Aperçu' pour tester la fonctionnalité de votre HTML sur votre site.
  </Step>

  <Step title="Vérifier">
    Vérifiez que le site affiche les bannières, que les événements sont correctement signalés et que l'opaqueUserId change lors de l'utilisation de différents navigateurs.
  </Step>

  <Step title="Publier">
    Une fois vérifié, publiez les modifications pour rendre le HTML actif sur votre site web.
  </Step>
</Steps>

<IntegrationsCard1AFr />