Este artículo le muestra cómo implementar Google Tag Manager en su sitio. Para saber cómo crear etiquetas GA4 en Google Tag Manager, consulte la documentación de Google.
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:
- Google le pide que instale el código en el
<head>
del sitio. No es algo recomendable para la velocidad de la página, ya que lentificará la carga del sitio. Por ese motivo, lo colocamos en la parte inferior de<body-end>
, para que cargue último. - Es más fácil copiar el código en una sola ubicación.
Agregar Google Tag Manager
Google le dará códigos de incrustación que se verán como los de los ejemplos de abajo. Ambos deberán instalarse en el <body-end>
del sitio. Para encontrar el <body-end>
del sitio, en el panel lateral del editor, haga clic en Configuración y luego, en HTML del título.
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
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:
- Vaya a Google Tag Manager e inicie sesión.
- A la izquierda, haga clic en Activadores.
- A la derecha, haga clic en el botón Nuevo.
- 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.
- Haga clic en el cuadro de configuración del activador personalizado y seleccione Evento personalizado.
- En el cuadro de nombre del evento, escriba dPageView.
- Haga clic en Guardar en el Tag Manager.
Después de crear el activador, debemos aplicarlo a las etiquetas que queramos. Esto debe hacerse para cada etiqueta que use en el sitio para activar los eventos de vista de página. En este ejemplo, lo aplicamos para Google Analytics Universal; sin embargo, Google Analytics 4 es la versión más reciente que recomendamos usar. Para obtener información sobre cómo crear y aplicar activadores a las etiquetas GA4 en Google Tag Manager, consulte la documentación de Google.
- En Tag Manager, vaya a Tags.
- Cree un nuevo tag.
- Escriba un nombre fácil de recordar.
- Haga clic en el cuadro Configuración de Tag y seleccione el tag que quiera usar. En este caso, Google Analytics Universal.
- 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.
- Seleccione una nueva variable.
- Seleccione Configuración de Google Analytics.
- Escriba su ID de seguimiento de GA y, luego, un nombre para su variable en la parte superior.
- Seleccione la variable y 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.
- Hemos 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.