Saltar al contenido principal
Puedes usar Google Tag Manager para inyectar nuestro script de anuncios de banner en tu plataforma. Consulta la documentación de Banner JS para más detalles.

​
Prerrequisitos

1

Acceso a Google Tag Manager

Necesitas tener una cuenta de Google Tag Manager y acceso al contenedor GTM para el sitio web donde deseas agregar el HTML.
2

Google Tag Manager instalado en tu sitio web

Copia el código a continuación y pégalo en cada página de tu sitio web.Pega este código lo más alto posible en el <head> de la página (configurando tu clave 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 -->
Pega este código inmediatamente después de la etiqueta de apertura <body> (configurando tu clave 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) -->
3

Crea un div con la dimensión deseada en tu sitio

Necesitas tener una etiqueta <topsort-banner> en el HTML con la altura y el ancho del slot que deseas mostrar.
<body>
  <topsort-banner
    width="600"
    height="400"
    id="<your slot id>"
    category-id="<category id>"
  ></topsort-banner>
</body>

​
En Google Tag Manager

1

Inicia sesión en GTM

Abre tu panel de Google Tag Manager.
2

Selecciona un Workspace

Haz clic en ‘Current Workspace’ desde la barra lateral y luego selecciona otro si es necesario.
3

Crea una Nueva Etiqueta

Haz clic en ‘Tags’ desde la barra lateral y luego en ‘New’.
4

Elige el Tipo de Etiqueta

Selecciona ‘Custom HTML Tag’ de la lista de tipos de etiquetas.
5

Agrega tu HTML

Ingresa tu código HTML personalizado en el cuadro de texto HTML. El código debe incluir tu Marketplace API Key de Topsort. Para obtener un nuevo token ve a app.topsort.com → Settings → API Integration.
<script>
  // Set API key for auctions and events
  window.TS = {
    token: "your topsort token",
  };
  // Custom behavior can be configured for each site.
  window.TS_BANNERS = {
    // handle the destination link
    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>
6

Configura el Activador

Elige un activador para determinar cuándo se debe ejecutar el HTML (por ejemplo, Page View, Click, etc.).
7

Guarda y Vista Previa

Guarda tu etiqueta y usa el modo ‘Preview’ para probar la funcionalidad de tu HTML en tu sitio.
8

Verifica

Verifica que el sitio esté mostrando los banners, que los eventos se estén reportando correctamente y que el opaqueUserId cambie al usar diferentes navegadores.
9

Publica

Una vez verificado, publica los cambios para hacer que el HTML esté activo en tu sitio web.