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.
Google Analytics 4 está reemplazando Universal Analytics. El 1 de julio de 2023, todas las propiedades estándar de Universal Analytics dejarán de procesar nuevos éxitos. Las propiedades de Universal Analytics 360 dejarán de procesar nuevos accesos el 1 de julio de 2024. Para saber cómo migrar, consulte Cambiar a Google Analytics 4.
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. - Nota
Recomendamos colocar el código en el
<body-end>porque aunque Google Tag Manager carga async, el problema de cargarlo async es que seguirá descargando recursos y ejecutando código. Esta actividad compite con otros recursos en el teléfono/computadora por el ancho de banda, el uso del procesador y más. Si coloca el código en<head>, todavía le da prioridad sobre otros recursos que el navegador podría querer descargar, como: estilo y diseño del sitio, contenido principal, imágenes que están en la mitad superior de la página y más.Website Builder ha descubierto constantemente que los sitios web que colocan el código GTM en el
<head>tienen un desempeño peor que los que no. Hemos optimizado nuestro sitio para priorizar el contenido visible, en línea con Core Web Vitals, y las métricas relacionadas de FCP y LCP. - 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.
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
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:
- 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.
Si ya está aplicado el activador Todas las páginas, elimínelo. Solo necesitamos el activador personalizado para ejecutar.
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.htmldel 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.