Carlosmdh

Cómo inyectar distintos contenedores de Tag Manager en un WordPress Multisite

En un tutorial anterior, Cómo añadir el código de Google Tag Manager a WordPress os dejaba un snippet para añadir el código que nos facilita Google Tag Manager a vuestra Web en WordPress, pero, ¿qué ocurre si lo que tenemos es un multisite con diferentes Webs y dominios?

En este caso, lo interesante es poder asignar a cada Web un contenedor único de Google Tag Manager, ya que cada uno tendrá una configuración diferente. Asi que vamos a ver como hacerlo.

Crea en Google Tag Manager un contenedor para cada sitio Web

Lo primero es lo primero, y es tener una cuenta en Google Tag Manager. Si no sabes cómo crearla, pasa por la ayuda de Google Tag Manager y sigue las instrucciones.

Una vez creada la cuenta, deberás añadir los distintos contenedores para cada sitio Web, uno por cada sitio de tu multisite. En el mismo artículo de la ayuda de Tag Manager puedes ver cómo hacerlo.

Copia los identificadores de cada contenedor de Google Tag Manager

Una vez creados los contenedores, tendrás un identificador único para cada uno de ellos, del estilo GTM-XXXXXXX. Copialos para usarlos después.

Contenedores Google Tag Manager

Localiza los identificadores de cada uno de los sitios de tu WordPress Multisite

El siguiente paso es averiguar los identificadores de cada sitio Web de tu WordPress Multisite.

Para ello desde tu administrador de WordPress, accede a «Todos los sitios» que se encuentra en el menú lateral. Una vez ahí,tendrás una vista de todos los sitios que tienes dentro de tu WordPress Multisite. Pinchando sobre cada uno de ellos verás un resumen de cada sitio y, en la url verás algo del estilo https://mi-sitio-web.com/wp-admin/network/site-settings.php?id=2

Identificador sitio web mutisite

Lo importante para nosotros es el final de esa url «?id=2» que es lo que nos muestra lo que buscamos, el identificador de cada sitio Web dentro del multisite.

Hacemos lo mismo, copiamos el id de cada sitio Web.

Crea un snippet para inyectar los contenedores de Google Tag Manager a cada sitio del multisite

Una vez identificados los id de los diferentes sites y los identificadores de Google Tag Manager correspondientes, llega la hora de crear un snippet para poder inyectar cada contenedor a cada sitio Web y solo para esa Web. Este snippet lo tendremos que añadir a un mu-plugin o a nuestro plugin de funcionalidades.

<?php
/*
Plugin Name: Inyectar Google Tag Manager en WordPress
Plugin URI: https://carlosmdh.es, https://www.juanmacivico87.com/
Description: Plugin para insertar los Contenedores de Google Tag Manager en un multisite
Version: 2.0.0
Authors: carlosmdh, Juanma Civico
License: GPL 2+
License URI:
*/

// Inyectar el código de Google Tag Manager en el <head>
add_action( 'wp_head', 'carlosmdh_google_tag_manager1' );
function carlosmdh_google_tag_manager1() {
	
    $blog_id = get_current_blog_id();
	$tag_manager = array(
	    '1' 	=> 'GTM-XXXXXX1', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 1
	    '2' 	=> 'GTM-XXXXXX2', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 2
	    '3' 	=> 'GTM-XXXXXX3', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 3
	    '4' 	=> 'GTM-XXXXXX4', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 4
	    '6' 	=> 'GTM-XXXXXX5', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 5
	    '13' 	=> 'GTM-XXXXXX6', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 13
	    '14' 	=> 'GTM-XXXXXX7', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 14
    );
    
    if(!isset($tag_manager[$blog_id]))
    	return;
    	
    $gtm_code = "<!-- 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', '" . $tag_manager[$blog_id] . "' );</script>
	<!-- End Google Tag Manager -->";
    if ( !is_admin() && $gtm_code ) {
        echo $gtm_code;
    }
}
/* Inyectar el código noscript de Google Tag Manager justo  debajo de la apertura de la etiqueta <body> */
add_action( 'wp_footer', 'carlosmdh_google_tag_manager2' );
function carlosmdh_google_tag_manager2() {
 $blog_id = get_current_blog_id();
	$tag_manager = array(
	    '1' 	=> 'GTM-XXXXXX1', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 1
	    '2' 	=> 'GTM-XXXXXX2', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 2
	    '3' 	=> 'GTM-XXXXXX3', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 3
	    '4' 	=> 'GTM-XXXXXX4', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 4
	    '6' 	=> 'GTM-XXXXXX5', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 5
	    '13' 	=> 'GTM-XXXXX13', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 13
	    '14' 	=> 'GTM-XXXXX14', // El primer valor define el ID en el multisite y el segundo el Contenedor de  Google Tag Manager de la  Web 14
    );
    
    if(!isset($tag_manager[$blog_id]))
    	return;
    	
	echo '<!-- Google Tag Manager (noscript) -->
	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=' . $tag_manager[$blog_id] . '"
	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
	<!-- End Google Tag Manager (noscript) -->';
	
}

Como podrás ver, hemos añadido un array que relaciona cada sitio web (id) con su contenedor de Google Tag Manager. En este punto quiero dar las gracias a Juanma Civico por su ayuda.

Evidentemente, tienes que cambiar los ids de cada site del array para adaptarlo a los de tu WordPress Multisite, asi como los identificadores de los contenedores de Google Tag Manager que deberán ser los que hayas guardado en el primer paso.

Conclusión

Esto es todo por ahora, como habréis podido observar, es muy sencillo es tener este código agregado a vuestro sitio Web sin necesidad de instalar ningún plugin ni agregar el código al archivo functions.php o a la plantilla del head de vuestro theme, cosa por otro lado nada recomendable.

Cualquier duda que os pueda surgir, podéis enviármela a través del formulario de contacto.

Sin categoría