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

> Como integrar o Topsort com o Google Tag Manager (GTM) usando nosso script banners.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <h2>Precisa de ajuda com sua integração Topsort?</h2>

        <p className="integrations-card-1a-pt-subtitle">
          Fale conosco, a equipe de engenharia de integrações.
        </p>

        <p>
          Entre em contato através do <strong>seu canal de mensagens dedicado</strong> ou em{" "}
          <a href="mailto:support@topsort.com">support@topsort.com</a>.
        </p>

        <p>
          Se você ainda não é cliente,{" "}
          <a href="https://www.topsort.com/book-a-demo">agende uma demo</a> com nossa
          equipe de vendas.
        </p>
      </div>
    </>;
};

Você pode usar o Google Tag Manager para injetar nosso script de banners na sua plataforma. Consulte a documentação do Banner JS para mais detalhes.

## Pré-requisitos

<Steps>
  <Step title="Acesso ao Google Tag Manager">
    Você precisa ter uma conta do Google Tag Manager e acesso ao contêiner GTM para o site onde deseja adicionar o HTML.
  </Step>

  <Step title="Google Tag Manager instalado no seu site">
    Copie o código abaixo e cole em todas as páginas do seu site.

    Cole este código o mais alto possível no `<head>` da página (configurando sua chave 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 -->
    ```

    Cole este código imediatamente após a tag de abertura `<body>` (configurando sua chave 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="Crie uma div com a dimensão desejada no seu site">
    Você precisa ter uma tag `<topsort-banner>` no HTML com a altura e largura do slot que deseja exibir.

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

## No Google Tag Manager

<Steps>
  <Step title="Faça login no GTM">
    Abra seu painel do Google Tag Manager.
  </Step>

  <Step title="Selecione um Workspace">
    Clique em 'Current Workspace' na barra lateral e então selecione outro se necessário.
  </Step>

  <Step title="Crie uma Nova Tag">
    Clique em 'Tags' na barra lateral e depois em 'New'.
  </Step>

  <Step title="Escolha o Tipo de Tag">
    Selecione 'Custom HTML Tag' da lista de tipos de tag.
  </Step>

  <Step title="Adicione seu HTML">
    Insira seu código HTML personalizado na caixa de texto HTML. O código deve incluir sua Chave de API do Marketplace do Topsort. Para obter um novo token, vá para app.topsort.com → Configurações → Integração de API.

    ```html theme={null}
    <script>
      // Define a chave de API para leilões e eventos
      window.TS = {
        token: "seu token topsort",
      };
      // Comportamento personalizado pode ser configurado para cada site.
      window.TS_BANNERS = {
        // manipular o link de destino
        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="Defina o Acionamento">
    Escolha um gatilho para determinar quando o HTML deve ser executado (ex: Page View, Click, etc.).
  </Step>

  <Step title="Salvar e Visualizar">
    Salve sua tag e use o modo 'Preview' para testar a funcionalidade do seu HTML no seu site.
  </Step>

  <Step title="Verificar">
    Verifique se o site está exibindo os banners, se os eventos estão sendo reportados corretamente e se o opaqueUserId muda ao usar navegadores diferentes.
  </Step>

  <Step title="Publicar">
    Uma vez verificado, publique as alterações para tornar o HTML ativo no seu site.
  </Step>
</Steps>

<IntegrationsCard1APt />