Seguimiento a través de Google Tag Manager

Este artículo le muestra cómo implementar Google Tag Manager en su sitio.

Nota

Se incluyen instrucciones muy específicas para que el tag manager funcione de manera correcta con sus sitios. Esto es necesario debido a que Duda implementa cambios de página AJAX, lo que significa que, de forma predeterminada, no hay ningún evento de visualización de página que pueda usar el tag manager después de que la persona que visita el sitio cambia de página.

Este artículo no sigue con exactitud las instrucciones de Google, pero ha sido probado y funciona correctamente. Se modificaron las instrucciones de Google por las siguientes razones:

  1. Google le pide que instale el código en el <head> del sitio. Esta es una mala práctica para la velocidad de la página porque ralentizará la carga del sitio. Por ese motivo, lo colocamos en la parte inferior de <body-end>, para que se cargue al final.
  2. Es más fácil copiar el código en una sola ubicación.

Agregar Google Tag Manager

Google le dará códigos incrustados que se parecen a los ejemplos de abajo. Ambos deben ser instalados en el <body-end> del sitio.

Nota

El código siguiente es solo un ejemplo, no lo copie directamente en su sitio. Asegúrese de obtener el código correcto de Google.

Sección de script

<!-- 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-XXXX');</script>
<!-- End Google Tag Manager -->

Sección de no script

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

Configurar Google Tag Manager

Advertencia

Este paso es crítico para permitir el rastreo de Google Tag Manager dentro de su sitio.

A continuación, tenemos que reemplazar el activador predeterminado de visualización de la página Todas las páginas por nuestro evento personalizado. Dentro del tag manager, primero debemos crear el activador de eventos personalizados:

  1. Vaya a Google Tag Manager e inicie sesión.
  2. A la izquierda, haga clic en Activadores.
  3. A la derecha, haga clic en el botón Nuevo.
  4. Escriba un nombre para el activador en la parte superior izquierda. Recomendamos utilizar algo que resulte práctico y fácil de recordar, como: Activador de visualización de página personalizado.
  5. Haga clic en el cuadro de configuración del activador personalizado y seleccione Evento personalizado.
    tag_manager_trigger_1.png
  6. En el cuadro de nombre del evento, escriba dPageView.
    tag_manager_trigger_2.png
  7. Haga clic en Guardar en el Tag Manager.

Después de crear el activador, tenemos que aplicarlo a los tags que queremos. Esto debe hacerse para cada tag que se use en el sitio para activar los eventos de visualización de página. En este ejemplo, lo aplicamos para Google Analytics Universal.

    1. En Tag Manager, vaya a Tags.
    2. Cree un nuevo tag.
    3. Escriba un nombre fácil de recordar.
    4. Haga clic en el cuadro Configuración de Tag y seleccione el tag que quiera usar. En este caso, Google Analytics Universal.
    5. Después de configurar el tag, haga clic en el cuadro Activador. Elija el activador personalizado que creamos, Activador de visualización de página personalizado.
      tag_manager_triggering.png
Nota

Si ya está aplicado el activador Todas las páginas, elimínelo. Solo necesitamos el activador personalizado para ejecutar.

  1. Haga clic en Guardar.

Después de implementar estos cambios a Tag Manager, haga clic en Enviar y después en Publicar los cambios a la configuración activada.

Consideraciones para Google Tag Manager

  • Este código solo se ejecutará en el sitio publicado activo. Asegúrese de probarlo en la versión activa.
  • Duda ha completado extensas pruebas y la sección body-end.html del Modo para desarrolladores funciona para agregar el código no script y el código predeterminado.
  • No modifique la configuración de ‘dataLayer’ en Google Tag Manager, ya que esto podría afectar nuestro código de integración personalizado.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 1 de 1

Comentarios sobre este artículo

0 comentarios

Inicie sesión para dejar un comentario.

×

Inicie sesión como profesional

El soporte telefónico prioritario está disponible exclusivamente para profesionales. Inicie sesión en su cuenta Pro ahora para ver nuestros números de soporte internacional.

Entrar
¿No es un profesional? ¡Compre un plan Pro!