Google Tag Manager (GTM) - Topsort Documentation

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

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.

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

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

Inicia sesión en GTM

Abre tu panel de Google Tag Manager.

Selecciona un Workspace

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

Crea una Nueva Etiqueta

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

Elige el Tipo de Etiqueta

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

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>

Configura el Activador

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

Guarda y Vista Previa

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

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.

Publica

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

​Prerrequisitos

​En Google Tag Manager

Prerrequisitos

En Google Tag Manager