Google Tag Manager (GTM) - Topsort Documentation

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

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.

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

<!-- 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):

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

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.

<body>
  <topsort-banner
    width="600"
    height="400"
    id="<your slot id>"
    category-id="<category id>"
  ></topsort-banner>
</body>

No Google Tag Manager

Faça login no GTM

Abra seu painel do Google Tag Manager.

Selecione um Workspace

Clique em ‘Current Workspace’ na barra lateral e então selecione outro se necessário.

Crie uma Nova Tag

Clique em ‘Tags’ na barra lateral e depois em ‘New’.

Escolha o Tipo de Tag

Selecione ‘Custom HTML Tag’ da lista de tipos de tag.

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.

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

Defina o Acionamento

Escolha um gatilho para determinar quando o HTML deve ser executado (ex: Page View, Click, etc.).

Salvar e Visualizar

Salve sua tag e use o modo ‘Preview’ para testar a funcionalidade do seu HTML no seu site.

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.

Publicar

Uma vez verificado, publique as alterações para tornar o HTML ativo no seu site.

​Pré-requisitos

​No Google Tag Manager

Pré-requisitos

No Google Tag Manager