Añadir código de Google Tag Manager sin plugins en WordPress

[ 22 diciembre 2020 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

En un artículo anterior habíamos visto cómo añadir el código de Google Analytics sin plugins, en este artículo vamos a realizar algo similar con Google Tag Manager, lo haremos directamente a través de código.

Generalidades

Luego de configurar tu sitio en Google Tag Manager, obtendrás un código que puedes insertar como parte de tu sitio.

Dentro de la administración de Google Tag Manager, ubica el ID generado para tu sitio, se abrirá un popup en donde aparecerán dos porciones de código, tal como se muestra en la siguiente imagen.

El código de Google Tag Manager tiene dos partes, la segunda porción de código es opcional y sólo funcionará en el caso de que el navegador del cliente no tenga habilitado javascript.

Código PHP para insertar el código de Google Tag Manager

Puedes agregar el siguiente código al final de tu archivo functions.php de tu tema hijo.

<?php // No copiar esta línea

// Código GTM en head
function dcms_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-XXXXXX');</script>
	<!-- End Google Tag Manager -->

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


// Código GTM en body - noscript
function dcms_add_google_tag_manager_body() { ?>

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

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

En el código anterior:

En la primera parte del código usamos el hook wp_head
En la función que hace referencia cortamos la ejecución del código PHP para insertar el código javascript.
En la segunda parte del código, usamos el hook wp_body_open
En la función que hace referencia, cortamos igualmente el código PHP para insertar el código javascript.

Si vas a usar directamente este código no olvides reemplazar GTM-XXXXXX por el ID que te brinda Google Tag Manager

Conclusión

Como has podido comprobar, puedes agregar el código de verificación de Google Tag Manager a WordPress directamente a través de código y evitar el uso de plugins adicionales.

¿Aún con dudas?, en el siguiente video se detalla cómo agregar este código en un sitio de ejemplo.