Google Tag Manager es una poderosa herramienta que puede ayudarte a controlar y ejecutar determinadas tareas (como el seguimiento de Google Analytics entre otras). Si ya lo conoces sabes que GTM puede agregar códigos de seguimiento y monitorear las tasas de clics, así como otras estadísticas importantes. Si deseas aprovechar todas las ventajas de GTM en tu página web con WordPress lo primero que debes de hacer es implementar el código.
En este artículo, te mostrareé cómo agregar Google Tag Manager a WordPress mediante distintos métodos.
¿Dónde encuentro el código de vinculación de GTM?
Partimos de la base de que ya tienes creado una cuenta de Google Tag Manager y el contenedor que quieres vincular a tu web con WordPress. En ese caso el primer paso será ver dónde puedes encontrar el código para vincular tu web con GTM.
Para ello dirígete a la vista general de tu contenedor. Allí encontrarás el código identificador que comienza por GTM.
Si hacemos click sobre el identificador se mostrará el código a implementar en nuestra web.
Este código consta de dos partes. La primera parte se instala dentro de la etiqueta <head>. Mientras que la segunda parte deberíamos instalarla dentro de la etiqueta <body>, pero más adelante veremos exactamente cómo hacerlo.
La parte principal será la que instalemos dentro de la etiqueta <head>, ya que el segundo código es el código “noscript” que se ejecuta únicamente si el usuario tiene deshabilitada la ejecución de JavaScript.
Después de localizar el código a insertar en nuestra web llega el momento de pasar manos a la obra e implementar el mismo dentro de nuestro WordPress. Para ello podemos emplear muchas formas, pero vamos a ver principalmente 2, la primera mediante el script que acabamos de ver y la segunda mediante un plugin de WordPress.
Instalar Google Tag Manager en WordPress mediante el script
Esta primera opción consiste básicamente en instalar el script dentro del código aprovechando los hooks de WordPress. En concreto se trata de los hooks siguientes:
wp_head : Imprime scripts o datos en la etiqueta head del front end.
wp_footer : Imprime scripts o datos antes de la etiqueta de cierre del cuerpo en el front end.
En concreto deberíamos instalar el código siguiente:
/**
* Añade el código principal de GTM dentro de las etiquetas head
* Sustituir GTM-XXXXXXX por el ID del contenedor de GTM
*/
add_action( 'wp_head', 'dmkt_google_tag_manager_script' );
function dmkt_google_tag_manager_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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
<?php }
/**
* Añade el código no script antes del cierre del body
* Sustituir GTM-XXXXXXX por el ID del contenedor de GTM
*/
add_action( 'wp_footer', 'dmkt_google_tag_manager_noscript' );
function dmkt_google_tag_manager_noscript() { ?>
<!-- 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 }En este código habría que sustituir los identificadores de Google Tag Manager (GTM-XXXXXXX) por el que hayamos obtenido de nuestro contenedor.
La siguiente pregunta sería, ¿dónde meto este código?. En este caso, como de costumbre, tenemos muchas opciones:
Introducir el código en el archivo functions.php del tema activo
la primera opción que te propongo seguro que la habrás oído en más de una ocasión. Podemos meter este código en el archivo functions.php del tema que tengas activo. En este caso irías a la parte final del archivo, copiarías y pegarías el código. Esta sería una primera opción válida, pero personalmente no es la que más me atrae por diversas razones:
- Por un lado, conceptualmente los temas deben limitarse al estilo y no añadir funcionalidades.
- Por otro lado se plantea el problema de qué pasaría si, en algún momento, por la razón que sea, se deshabilita el tema, o se desinstala o simplemente se sustituye por otro para cambiar el diseño de la web. En ese caso el código de implementación dejaría de estar activo y todas las funcionalidades que pueda añadir GTM dejarían de estar operativas. Si se trata de nuestra web podríamos tenerlo en cuenta y trasladar el código al nuevo tema (si no se nos olvida…), pero si se trata de la web de un cliente es posible que no sepa ni qué le estamos diciendo.
Usar los campos “encabezado” y “pie de página” de algunos temas
Algunos temas como Genesis o GeneratePress ofrecen la posibilidad de insertar scripts directamente desde unos campos en el personalizador de WordPress.
En el caso de Genesis acudimos al personalizador/pie de pagina-scripts del encabezado. Ahí encontraremos los dos campos que situarán cada código antes del cierre de la etiqueta <head> y <body> .
En este caso no deberíamos meter el código que añadirmos a functions.php (con las funciones y las llamadas a los hooks), sino que, simplemente, tenemos que añadir los scripts que nos da directamente GTM.
El inconveniente es que estaríamos en la misma situación que en el caso anterior. Por un lado estamos añadiendo una funcionalidad al tema y por otro, en el momento que desactivemos el tema perderemos dicha funcionalidad.
Crear un plugin propio con el código de GTM
Esta tercera alternativa es, personalmente, la que prefiero y la que intento priorizar en mis instalaciones. Se trata de insertar el mismo código que vimos en la opción de functions.php, pero dentro de un plugin creado por nosotros.
Para la instalación de este plugin podemos elegír 2 vías. Instalarlo como un plugin normal con la posibilidad de activarlo desde la página de plugins o la que vamos a ver aquí que es la de instalarlo como un mu-plugin. Si no sabes lo que es un mu-plugin puedes ver este otro artículo en el que te lo explico.
Lo que vamos a usar para crear este mu-plugin es, básicamente, el mismo código que vimos en un apartado anterior para añadir al functions.php, pero ahora lo insertamos en un archivo nuevo que vamos a crear. Esto lo podemos hacer con nuestro editor de código directamente y luego subirlo por FTP a la carpeta wp-content/mu-plugins.
El código que suelo emplear yo en mis instalaciones es el siguiente:
<?php
/**
* Plugin Name: DMKT GTM Script Installation
* Plugin URI: https://diegomedina.pro
* Description: This code installs the GTM script inside the web.
* Version: 1.0.0
* Author: Diego Medina
* Author URI: https://diegomedina.pro
* License: GPL v2 or later
*
*/
/**
* Añade el código principal de GTM dentro de las etiquetas head
* Sustituir GTM-XXXXXXX por el ID del contenedor de GTM
*/
add_action( 'wp_head', 'dmkt_google_tag_manager_script' );
function dmkt_google_tag_manager_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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
<?php }
/**
* Añade el código no script antes del cierre del body
* Sustituir GTM-XXXXXXX por el ID del contenedor de GTM
*/
add_action( 'wp_footer', 'dmkt_google_tag_manager_noscript' );
function dmkt_google_tag_manager_noscript() { ?>
<!-- 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 }En este código tenemos que remplazar el id del contenedor (GTM-XXXXXXX) por el que nos de Google Tag Manager.
Como veréis, en mi caso añado la cabecera típica de los plugins aunque no sea necesaria. Esto me ayuda a identificar el archivo y saber que es lo que hace exactamente.
Instalar Google Tag Manager en WordPress mediante un plugin
La otra opción posible que vamos a ver en este artículo es la instalación mediante un plugin. Esta opción puede ser válida si no queremos complicarnos con código, carpetas y FTP o si se trata de una implementación sencillita que no va a necesitar un alto grado de personalización.
Como comentaba antes, yo prefiero implementarlo yo mismo a través de un mu-plugin por el control y flexibilidad que me da a la hora de modificar y personalizar las opciones de GTM.
El plugin que recomiendo para la vinculación con GTM es Google Tag Manager for WordPress:
Para instalar el plugin procedemos como lo hacemos normalmente para cualquier plugin de WordPress. Vamos a la pestaña de “Añadir Plugin” y ahí buscamos en el buscador del repositorio “Google Tag Manager”.
Clicamos sobre el botón de “Instalar” y cuando lo haya instalado hacemos lo mismo sobre el botón de “Activar”.
El siguiente paso es configurar la herramienta e introducir le ID de Google Tag Manager para vincularla con nuestro contenedor. El menú de configuración lo podemos encontrar dentro de la ruta “Ajustes/Google Tag Manager”:
En la pantalla de configuración sólo tienes que insertar el ID del contenedor que vimos anteriormente dentro del campo “Google Tag Manager ID”.
No olvides hacer clic sobre el botón de “Guardar cambios” y ya tendrás tu código GTM insertado dentro de tu web.
Si te interesa la configuración de GTM a través del plugin en breve haré un artículo en el que explico mejor cómo configurar esta herramienta para WordPress con más detalle.
¿Cómo comprobar si la instalación de GTM es correcta?
Cuando ya tenemos el código de GTM instalado en nuestra web el último paso sería comprobar que esta vinculación se ha realizado correctamente. Para ello nos vamos a apoyar en una extensión de Chrome llamada Tag Assistant de Google.
Buscamos e instalamos la extensión dentro de la Chrome Web Store. Podemos anclarla en el menú de extensiones de nuestro navegador para tenerla más al alcance:
Esta extensión se encarga, entre otras cosas, de analizar en cada web si encuentra instalada la etiqueta de GTM. Además es capaz de dar otros datos muy interesantes como los datos recogidos por el dataLayer o el snippet de código insertado. Para obtener toda esta información únicamente tenemos que hacer clic sobre el icono de la extensión:
En el caso de mi web observamos cómo nos indica que el código está bien instalado y funcionando.
De esta forma podemos saber si hemos instalado correctamente el código de GTM, pero ojo!! no confundamos este código con la implementación del código de Analytics o cualquier otra herramienta de seguimiento. El hecho de haber instalado GTM no quiere decir que estemos recogiendo ningún tipo de datos. Lo siguiente que tendríamos que hacer es instalar las etiquetas correspondientes dentro de nuestro contenedor de GTM. Y ahí está la gracia de trabajar con GTM, cualquier código de trackeo que queramos instalar ya no tendremos que hacerlo dentro del código de nuestra web sino que lo haremos dentro del contenedor de GTM.
Deja una respuesta