Cómo instalar Google Tag Manager en WordPress

Posted on 10 septiembre, 2021 By Jose Lazo

¿Necesitas añadir Google Tag manager en tu WordPress?

Últimamente estoy colaborando mucho con una agencia de marketing y una de las incidencias más recurrentes es esta: revisar o añadir Google Tag Manager a las instalaciones de los clientes finales.

Debo decir que desconocía la potencia de GTM hasta que he tenido que revisar algunas instalaciones. Es algo parecido a programar sin código. Desde GTM puedes crear eventos y listeners sin tener que saber programar. Eso, a los buenos consultores les encanta porque ellos tienen el poder sin necesitar del servicio de un programador 😉

Por ello, Google Tag Manager es tan interesante. Por eso y por algunas razones más.

6 Razones para instalar Google Tag Manager

Fácil gestión de las etiquetas.
Unificar scripts (Facebook, Analytics, Google Ads, LinkedIn, etc.) en un solo lugar
Copias de seguridad.
Es posible crear versiones del contenedor.
Asignar administradores de cuenta.
Funciones avanzadas y programación.

Cómo instalar Google Tag Manager en WordPress

Visita el sitio web de Google Tag Manager y regístrate usando tu cuenta de Google, La misma que usas para Gmail, YouTube y Google Analytics.

Haz clic en Comenzar Gratis y luego rellena los datos que te pide la plataforma. Haz clic en crear y se abrirá una nueva pantalla donde deberás aceptar los términos y condiciones.

Ahí aparecerá una pantalla con los dos códigos que deberás añadir a tu WordPress:

Añadir los códigos de GTM a WordPress

La documentación de Google Tag Manager dice que el primer código lo tienes que pegar dentro de la etiqueta <head> de la página y el segundo código que lo pegues inmediatamente después de la etiqueta de apertura del <body>:

Para eso vamos a abrir el archivo functions.php de tu childtheme y le vamos a añadir estas dos funciones unidas a

sendos hooks:

<?php //Do not copy/paste this first line
 
// GTM code in head
function jjlazo_add_google_tag_manager_head() { ?>

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

<?php }
add_action('wp_head', 'jjlazo_add_google_tag_manager_head');


// GTM code in body - noscript
function jjlazo_add_google_tag_manager_body() { ?>

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

<?php }
add_action( 'wp_body_open', 'jjlazo_add_google_tag_manager_body' );

Con la primera función añadimos el primer código de GTM en el hook wp_head, que lo que hace es mostrarlo dentro de la etiqueta <head> de nuestra web.

Con la segunda función añadimos el segundo código de GTM en el hook wp_body_open, que lo añade justo después de la apertura de la etiqueta <body>.

Una vez añadido podemos comprobar si está correcto con la extensión Tag Assistant Legacy (by Google) para Google Chrome: