Cómo instalar y configurar Google Tag Manager en WordPress
¡Buenos días! En este vídeo-tutorial vamos a ver cómo implementar la herramienta Google Tag Manager en nuestra web hecha con WordPress. ¡Vamos allá!
Como algunos ya sabréis, Google Tag Manager es una herramienta nos permite hacer infinidad de cosas.
De manera resumida, Tag Manager nos sirve para gestionar desde un solo lugar todos los scripts, píxeles o códigos seguimiento de diferentes herramientas, como pueden ser Google Analytics, Facebook, GoogleAds, etc.
En este artículo veremos cómo podemos instalar y configurar esta maravilla en nuestra web hecha en WordPress. Veamos pues los pasos que hemos seguido en el vídeo y el código que hemos utilizado.
Creamos la cuenta y el contenedor del Tag Manager
El primer paso es crear una cuenta y un contenedor (una especie de mesa de trabajo) en el Tag Manager. Para ello nos dirigimos a Google Tag Manager, iniciamos la sesión con nuestra cuenta de Google. El proceso de creación es muy simple:
- Le damos un nombre a nuestra cuenta y elegimos nuestro país
- Le damos un nombre al contenedor (por ejemplo, la URL de nuestro WordPress) y elegimos que se trata de un sitio web.
Una vez que lo hagamos, vamos a por la parte más tricky, que es la de insertar correctamente el código del Tag Manager en nuestro WordPress.
Instalamos el script del Tag Manager en WordPress
A diferencia de etiquetas que ya hemos visto en este blog, como Google Analytics o Facebook Pixel, Tag Manager nos ofrece dos partes de código en lugar de uno. Uno de ellos lo tendremos que insertar dentro de la etiqueta <head> de nuestro WordPress, tan alto como se pueda, y otra justo después de la apertura de la etiqueta <body>:
Como la localización del HTML en WordPress viene asignada por los archivos del theme, el cómo podemos pegar el código del Tag Manager a estas partes de la web depende del theme que estemos utilizando.
Veamos pues por partes dónde podemos encontrar estas etiquetas y cómo podemos insertar el código en diferentes tipos de themes.
Insertamos el código del Tag Manager en el <head>
La parte superior del código, por suerte, es muy simple de implementar ya que es universal para cualquier tipo de theme (a no ser que tu theme haga cosas raras en su código… si tienes uno de ThemeForest puede ser tu caso).
Para implementarlo accedemos por FTP a nuestra web y abrimos nuestro archivo functions.php que está en wp-content/themes/carpeta-del-tema. Aquí podemos insertar nuestro código, al final del todo.
Vamos a utilizar un hook nativo de WordPress, el wp_head, para insertar el código del Tag Manager en el <head>, así que el código quedaría así:
//Tag Manager
add_action('wp_head','bps_tag_manager');
function bps_tag_manager () { ?>
//Aquí código del head
<?php }
Simplemente sustituye la parte de //Aquí código del head por el código de seguimiento de la parte superior que te ofrece el Tag Manager:
Para que nadie se pierda, debería quedar algo así:
//Tag Manager
add_action('wp_head','bps_tag_manager');
function bps_tag_manager () { ?>
<!-- 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-MWT6FMF');</script>
<!-- End Google Tag Manager -->
<?php }Una vez hecho esto, guardamos los cambios y nos vamos a por la segunda parte del código, la de <body>.
Insertamos el código del Tag Manager en el <body>
Para insertar el código en el body sí que dependemos del theme que estemos utilizando.
Yo os traigo dos ejemplos, para que veáis cómo se puede hacer de distintas formas dependiendo del theme, pero hay una pequeña posibilidad de que en vuestro theme justo no se pueda hacer de ninguna de las dos formas (de nuevo, tiembla si tienes algo de ThemeForest 😀 ).
Veamos para empezar cómo lo podemos hacer con un theme hecho para Genesis Framework
Tag Manager en <body> con Genesis Framework
Si ya has trabajado con Genesis Framework sabrás cómo funciona y lo fácil que será este paso. Para los que no lo sepáis, Genesis trae consigo una serie de hooks propios que nos permiten insertar código en diferentes lugares de la web, como hemos hecho antes con el wp_head.
Así que, si eres un feliz propietario de Genesis, aquí está la solución. En el mismo archivo functions.php, debajo del código de <head>, añade la siguente función:
add_action('genesis_before','bps_end_tag_manager');
function bps_end_tag_manager () { ?>
//Aquí código del body
<?php }Igual que antes, acuérdate de cambiar la parte de //Aquí código del body por la segunda parte del código que nos ofrece Tag Manager:
Quedaría tal que así:
add_action('genesis_before','bps_end_tag_manager');
function bps_end_tag_manager () { ?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MWT6FMF"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php }Y ya lo tenemos 🙂
Genesis no es el único framework de themes que tiene hooks propios. Es posible que tu theme tambíen los tenga así que si tu theme es un framework, deberías investigar si hay algún hook que te permita hacer este paso de la misma manera.
Si no tienes la suerte de trabajar con Genesis (o con otro framework), veamos una solución que nos serviría para otros themes (o para la mayoría de ellos).
Tag Manager en <body> con otros themes
En la mayoría de los themes podemos encontrar la etiqueta de apertura del <body> en el archivo header.php. Así que hacemos lo siguientes:
- Nos dirigimos a header.php dentro de la carpeta de nuestro theme
- Buscamos la etiqueta <body>
- Insertamos la segunda parte del código justo después de esta etiqueta, sin cambiar nada.
En el caso de Generate Press, por ejemplo, queda algo así:
Cuidado con la sintaxis de PHP/HTML. Como estamos insertando un <script>, tenemos que asegurarnos de que la etiqueta de PHP esté cerrada. Tendremos que insertar nuestro código después de los símbolos de ?> pero antes de <?php, es decir antes de que se abra el PHP de nuevo.
¡Y ya lo tenemos! Ahora ya hemos insertado las dos partes del código de manera correcta en nuestro WordPress. Comprobemos ahora que lo hemos hecho bien.
Comprobamos el funcionamiento del Tag Manager en WordPress
Para comprobar que el código está en su sitio podemos usar diferentes métodos.
Ver el código fuente de la página
Para ello volvemos vamos a nuestra página, la recargamos y accedemos al código fuente, ya sea con la combinación de teclas Ctrl + U o en la opción correspondiente al hacer click con el botón derecho sobre la web (todo esto en el caso de Chrome).
Una vez ahí, si buscamos con el Ctrl +F por “Google Tag Manager”, vemos que debería aparecer cada parte de código en su lugar.
Usar la extensión Tag Assistant
Con Tag Assistant podemos comprobar el funcionamiento de diferentes etiquetas, entre ellas el Tag Manager. Para usarla, simplemente:
- Instalamos la extensión del Tag Assistant
- La abrimos en el navegador, estando en nuestra web, y le damos al botón Enable
- Recargamos la web y volvemos a mirar el Tag Assistant
Nos debería aparecer algo así:
Si la etiqueta aparece en rojo, es posible que tengamos que volver a la web del Tag Manager y publicar nuestro contenedor, dándole al botón Enviar, en la esquina superior derecha:
¡Y ya estamos! En el el vídeo vemos un par de pasos más que podemos dar para
