Instalar y configurar Google Tag Manager en WordPress

por | Jul 6, 2020 | Aprender WordPress, SEO WordPress

Instalar y configurar Google Tag Manager en WordPress

En el panorama actual del Marketing Digital, para analizar el comportamiento de los visitantes a un sitio web, necesitamos incluir un script o código de seguimiento que rastree y recopile información de éstos mientras navegan por él; por ejemplo, para la herramienta de analítica web Google Analytics en WordPress.

Además de estos scripts, también podemos necesitar insertar píxeles de seguimiento, para plataformas publicitarias como Facebook Ads o Google Ads; además de muchos otros tipos de códigos para que podamos utilizar diversas herramientas de marketing.

Gracias a estos scripts o píxeles de seguimiento, las correspondientes herramientas pueden realizar su labor y facilitarnos la analítica que necesitamos para evaluar y valorar la evolución de nuestras estrategias de marketing. Sin ellos, no hay analítica web que valga.

Ahora bien, aunque la inserción de esos scripts es sencilla (un mero “copia-y-pega”), la utilización de uno o varios scripts o píxeles de seguimiento puede provocar algunos problemas, no solo para identificar o localizar el correspondiente a cada herramienta o plataforma, sino por posibles conflictos entre ellos.

Éstos y otros problemas son los que hacen necesaria una herramienta que nos facilite la gestión de los scripts o píxeles de seguimiento de forma centralizada y sencilla. Para ello, Google nos ofrece Tag Manager, una aplicación web gratuita que veremos cómo instalar y configurar en este artículo.

 

¿Qué es Google Tag Manager?

Gracias a Google Tag Manager, los scripts y etiquetas de seguimiento, diseminados entre el código de nuestras páginas web, sin una localización ni documentación claras, se concentran en un único script, que nos permitirá gestionarlos y configurarlos desde un único panel de control.

Utilizar varios códigos o píxeles de seguimiento puede generar varios problemas, de los que ya hemos adelantado uno en la introducción, pero aún hay más:

  • Cada script de seguimiento es un código JavaScript que debe ejecutarse durante la carga de la página web.
    Esto supone que necesita un tiempo para cargarse y ejecutarse, lo que añade un retardo al tiempo de carga de esa página.
    Un script no supone mucho detrimento pero ¿y si utilizamos cuatro o cinco? El tiempo acumulado de ejecución podría llegar a afectar al SEO de esa página.
  • Combinar varios scripts dentro de una misma página web puede provocar problemas de funcionamiento entre ellos; por ejemplo, que uno de los scripts interrumpa la ejecución de otro o impida su correcta carga y ejecución.
    Resolver estos casos puede requerir un profesional cualificado y a veces la resolución puede ser costosa.
  • Aunque fáciles de insertar en las etiquetas que correspondan de una página web, editar el código HTML de una página para insertar los scripts siempre conlleva algún riesgo.
    Localizar uno o varios scripts para realizar cambios, pruebas o comprobaciones puede resultar aparatoso y confuso, sobre todo si quien lo realiza no está técnicamente cualificado para ello (por ejemplo, un analista web).
  • Según los requerimientos de cada script de seguimiento, su ubicación puede estar dispersa a lo largo de diferentes etiquetas HTML de la página web, lo que dificulta su buena gestión y organización, resultando muy enrevesada a medida que se vayan añadiendo.

Google Tag Manager solventa todos estos problemas proporcionando un único código script, que se inserta en la cabecera de las páginas web, y el resto de scripts de seguimiento se configuran de forma centralizada a través de su panel de control, de forma que no hay que volver a tocar el código de la página web.

De esta forma, no es necesario editar ni insertar los scripts de seguimiento de cada herramienta que vayamos a utilizar, sino activar su etiqueta dentro de nuestra cuenta de Google Tag Manager, en cualquier momento y sin interferencia con el resto de scripts o etiquetas que estemos utilizando:

Etiquetas Tag Manager

 

¿Para qué sirve Google Tag Manager?

A primera vista, sobre todo si no tenemos mucha experiencia con los scripts de seguimiento, puede parecer que la gestión centralizada que permite Google Tag Manager para los scripts de seguimiento no es suficiente para tener que aprender esta nueva herramienta.

Sin embargo, Google Tag Manager sirve para bastantes más cosas, gracias precisamente a esta gestión centralizada. Veamos cuáles.

 

1. Hacer despliegue rápido de códigos de seguimiento

Veamos cómo era la forma habitual para gestionar los scripts de seguimiento:

  1. Un “marketero” (por ejemplo, un analista web) decide que se debe utilizar una nueva plataforma de marketing para rastrear el comportamiento del usuario.
  2. Para ello, obtiene su script de seguimiento y lo envía a un desarrollador.
  3. El desarrollador lo pone en su lista de tareas y, cuando tenga disponibilidad, inserta el código.
  4. ¿Qué sucede si necesita rastrear nuevos eventos para ese script? De nuevo, debe pedirlo al desarrollador, probablemente con intercambio de varios correos electrónicos hasta que se complete este nuevo cambio.

Con Google Tag Manager, ya no es necesario todo este proceso: el marketero lo puede hacer por sí mismo la mayoría de los casos, asignando una etiqueta a cada script de seguimiento y administrándolo a través de su panel de control.

De esta forma, se pueden agregar rápidamente nuevas etiquetas y la mayoría no requieren cambios de código en las páginas web.

Por tanto, es una magnífica herramienta para los especialistas en marketing, porque puede acelerar el tiempo de lanzamiento al probar cada cambio por sí mismos e implementarlo cuando esté listo, sin tener que depender de la disponibilidad de los desarrolladores o diseñadores.

 

2. Administrar todas las etiquetas desde un mismo panel

Como ya hemos visto anteriormente, todos los scripts de seguimiento se codificaban directamente en el código HTML del sitio web.

Como consecuencia, lo habitual era que estos fragmentos de código JavaScript se dispersaran en diferentes archivos, haciendo muy difícil su gestión y administración.

Cualquier cambio suponía, primero, localizar donde se encontraba el código correspondiente (y no siempre la documentación estaba fielmente actualizada); y, segundo, disponer de un desarrollador que realizara los cambios (aunque en ocasiones el propio marketero podía hacer si solo era un copia-y-pega).

Ahora, con Google Tag Manager, los scripts de seguimiento se configuran a través de la administración de etiquetas, que se asocian a cada uno de ellos.

 

3. Disponer de plantillas de contenedores reutilizables (recetas)

En Google Tag Manager, los scripts se asocian a etiquetas, junto con disparadores (“triggers”) y variables que permiten analizar distintos comportamientos de los visitantes al sitio web.

Todo este conjunto forma parte de un contenedor, que se puede exportar en un solo fichero, que puede ser reutilizado para otros sitios web.

Así, un analista web puede crear sus propias plantillas con configuraciones de seguimiento de análisis habituales en, por ejemplo, Google Analytics, con información sobre vistas de página, clics de enlaces salientes, etc., e importarlos en otros sitios web sin tener que crearlos y configurarlos de nuevo.

De hecho, esta característica es tan útil, que hay muchos sitios web donde se pueden descargar estos ficheros “receta” e importarlos en nuestros sitios web.

 

4. Realizar seguimiento de eventos

El seguimiento de eventos en el sitio web, como clics, envíos de formularios, tiempo en el página, etc., implica añadir códigos JavaScript personalizados para cada uno de ellos. Para facilitar este seguimiento, Google Tag Manager dispone de una función para el seguimiento de eventos automáticos.

Para ello, se pueden habilitar disparadores (“triggers”) en Google Tag Manager, que empezarán a detectar automáticamente qué interacciones se producen en una página web.

Aunque, todavía requiere algunas tareas de configuración, no requiere escritura de código y no hace falta un desarrollador.

Además, gracias a la enorme comunidad de usuarios de esta herramienta, se pueden añadir nuevas características a estas funciones de eventos automáticos, que nos permitirá obtener más información sobre las acciones que los visitantes realizan en nuestro sitio web; por ejemplo, si interactúan con el contenido o rellenan los formularios.

 

5. Disponer de versiones, espacios de trabajo y entornos

Google Tag Manager crea una versión cada vez que se publica un cambio en un contenedor (donde se almacenan los scripts de seguimiento).

De esta forma, si en algún momento necesitamos volver a una versión anterior de ese contenedor, sólo tenemos que seleccionarlo; por ejemplo, cuando hayamos realizado un cambio que no produce el efecto esperado.

Con respecto a las otras dos características (espacios de trabajo y entornos), son muy útiles para agencias que dispongan de varios equipos de trabajo que pueden realizar cambios sobre el sitio web, que trabajen con proveedores externos o para proyectos que pueden durar meses.

Los entornos permiten controlar la instalación de Google Tag Manager en producción (es decir, visible al público), y mantenerlo sincronizado con su contraparte en el entorno de desarrollo (donde trabajan los desarrolladores y no abierto al exterior).

Esta función permite publicar las etiquetas en los diferentes entornos, sin que ello afecte a la versión publicada.

Por último, los espacios de trabajo permiten que varios componentes de un equipo trabajen en el mismo contenedor sin sobrescribir los cambios de los demás. Una vez hecho su trabajo, los cambios de ambos espacios de trabajo se fusionan en una sola entidad.

 

6. Aumentar la seguridad del sitio web

Google escanea automáticamente todos los scripts de seguimiento con etiquetas HTML que se añaden a las cuentas de Google Tag Manager e impide su ejecución cuando coinciden con un dominio de malware conocido, dirección IP o URL.

De esta forma, se evita la ejecución de código malicioso.

También se pueden configurar listas blancas o listas negras añadiendo comandos al sitio web, controlados por el servidor, para determinar si los scripts de seguimiento se pueden ejecutar con seguridad.

 

7. Asignar permisos de usuario

Google Tag Manager permite dar acceso a la cuenta de administración a varias personas, cada una con diferentes niveles de privilegios de visualización, edición y publicación.

Esta característica permite, por ejemplo, que las agencias puedan dar acceso a sus empleados según su cualificación o compartir el acceso con los clientes, al tiempo que se garantiza que solo los técnicos cualificados tengan el control principal.

Los niveles de permiso de usuario disponibles son: Sin acceso, Leer, Editar, Publicar y Aprobar.

 

Cómo instalar Google Tag Manager en WordPress

Ahora que ya sabemos qué es Google Tag Manager y para qué sirve, estaremos anhelando instalarlo en nuestro sitio web en WordPress. Disponemos de dos formas para instalarlo:

  • Insertando manualmente los códigos (scripts) de Google Tag Manager en las etiquetas HEAD y BODY, respectivamente, de forma similar a cualquier otro script de seguimiento, con la diferencia que, al utilizar Tag Manager, no debemos insertar ninguno de ellos. Para evitar que la actualización del tema “machaque” este código, deberemos crear un tema hijo e insertar ahí estos scripts.
  • A través de un plugin, como Google Tag Manager for WordPress, en el que debemos copiar estos códigos en la configuración del plugin, y éste se encarga de colocarlos donde corresponde en las páginas web.

El siguiente vídeo muestra estas dos formas de instalación de Google Tag Manager en WordPress y un servidor de hosting con cPanel:

 

 

Cómo configurar Google Tag Manager

Una vez instalado el código de Tag Manager en nuestro sitio web en WordPress, podemos proceder a quitar todos los scripts o píxeles de seguimiento que tuviéramos e ir añadiéndolos a etiquetas del contenedor de nuestra cuenta en Tag Manager.

Google Tag Manager tiene soporte para más de 50 servicios o plataformas de analítica o seguimiento, con sus correspondientes scripts de seguimiento, pero también incluye la posibilidad de incluir etiquetas para scripts que no estén predefinidos en Tag Manager.

Así, plataformas como Google Analytics o Google Ads, podremos añadirlos muy fácilmente en nuestra cuenta de Tag Manager, pues hay soporte directo.

En cambio, para otras herramientas publicitarias, como Facebook Ads, tendremos que utilizar la opción personalizada de Tag Manager para incluir el código de su píxel (en vez de añadir el pixel de Facebook en WordPress).

A continuación, vamos a ver cómo configurar Google Tag Manager en ambos casos; es decir, cuando ya tenemos una etiqueta predefinida (como con Google Analytics) o cuando tengamos que copiar el script de seguimiento como HTML personalizado (como con Facebook Ads).

 

Google Analytics

Como Tag Manager y Analytics son dos herramientas de Google, la integración de Analytics dentro de un contenedor de Tag Manager resulta muy fácil y rápida, gracias a que Tag Manager dispone de una etiqueta predefinida para Analytics y una total integración entre ambos.

En el siguiente vídeo vamos a ver cómo se crea la etiqueta y se integra Analytics:

 

 

Facebook Ads

El caso con Facebook Ads es diferente. Como Google Tag Manager no dispone de una etiqueta predefinida para este píxel, deberemos utilizar la opción de HTML personalizado para crear la etiqueta correspondiente.

Veamos paso a paso cómo debemos proceder para integrar el píxel de Facebook Ads en Google Tag Manager:

  • En primer lugar, debemos tener a mano el código del píxel de Facebook Ads. Para ello, deberemos entrar en nuestra cuenta de Business Facebook y dentro del Administrador de Anuncios, seleccionar “Píxeles”:

Pixel Facebook Ads

  • Pulsamos el botón de Configuración y se nos muestra el siguiente cuadro, en el que debemos seleccionar la opción “Instalar el código tú mismo de forma manual”.
    Sin Google Tag Manager, este código deberíamos insertarlo en los ficheros de nuestro WordPress pero, en este caso, lo insertaremos en una etiqueta de Tag Manager:

Código Pixel Facebook Ads

  • Copiamos el código que nos muestra en pantalla, que será el que debamos pegar dentro de la etiqueta de Tag Manager.
  • Entramos en nuestra cuenta de Google Tag Manager y pulsamos el cuadro “Nueva etiqueta”:

Añadir nueva etiqueta Google Tag Manager

  • Como no hay una etiqueta predefinida para Facebook Ads, seleccionamos HTML personalizado:

Google Tag Manager Html Personalizado

  • Se abre el siguiente cuadro de texto, en donde debemos introducir el código que hemos copiado anteriormente en el Administrador de Anuncios de Facebook:

Configurar Google Tag Manager Html Personalizado

  • Dentro de la configuración avanzada de esta etiqueta, podemos indicar cómo se activará. Por defecto, se activa “Una vez por evento”, pero también podemos seleccionar “Una vez por página”:

Activación etiqueta Facebook Ads

  • El siguiente es añadir un activador para esta etiqueta; para ello, pulsamos en el cuadro de “Activación” y seleccionar “All Pages”, de tipo “Página vista” en el desplegable que se abre. En este mismo cuadro, podemos pulsar el signo “+” si queremos que el activador sea de otro tipo:

Elegir activador Google Tag Manager

  • Le damos un nombre a la etiqueta (relacionado con su contenido, como “Facebook Ads”). Pulsamos el botón “Guardar” y la etiqueta que acabamos de crear aparece dentro de nuestro espacio de trabajo:

Espacio de trabajo Google Tag Manager

  • Por último, solo nos queda comprobar que la etiqueta que acabamos de crear funciona correctamente.
    Para ello, podemos entrar dentro del Administrador de Facebook y, en “Píxeles”, mirar si aparece activo (es decir, con una marca verde).
    Sin embargo, este método puede tardar hasta 24 horas en aparecer, por lo que otra opción es instalar la extensión “Facebook Pixel Helper” en nuestro navegador (para Firefox y Chrome).
    Después de instalarlo, navegamos a nuestro sitio web y la extensión nos indicará si el píxel de Facebook Ads se ha cargado correctamente:

Pixel Google Tag Manager

 

Enviar y publicar los cambios del espacio de trabajo

Cuando estamos trabajando en un contenedor, añadiendo y configurando las distintas etiquetas para los respectos scripts de seguimiento, los cambios no se observan todavía en el sitio web, sino que quedan reflejados en un espacio de trabajo de ese contenedor, pero no están operativos hasta que lo publiquemos.

Esto permite, por ejemplo, que un usuario o equipo puede crear y configurar sus etiquetas en un espacio de trabajo, al ritmo que necesiten, mientras otro usuario o equipo puede trabajar con sus propias etiquetas en otro espacio de trabajo.

Una vez que un usuario o equipo ha terminado su tarea con las etiquetas en su espacio de trabajo, puede ponerlos en marcha sin afectar al trabajo de otros usuarios en sus respectivos espacios de trabajo.

Así, las etiquetas anteriores que hemos añadido y configurado en los ejemplos anteriores para Google Analytics y Facebook Ads se muestran en el espacio de trabajo por defecto del contenedor (solo hay un usuario en este caso, por lo que habría más espacios de trabajo):

Contenedor no publicado Google Tag Manager

En esta imagen, podemos ver que estamos en el espacio de trabajo por defecto (“default workspace”) y que los cambios del contenedor no están publicados; es decir, todavía no son visibles en el sitio web ni, por tanto, están operativos.

Veamos en el siguiente vídeo qué tenemos que hacer para publicar en nuestro sitio web los cambios que hemos realizado en el contenedor:

 

 

Después de haber enviado y publicado el espacio de trabajo, Google Tag Manager nos muestra ahora en pantalla que el contenedor está publicado y su versión:

Contenedor publicado Google Tag Manager

Como los cambios del espacio de trabajo ya han sido publicados, éste se muestra vacío ahora, y podríamos seguir añadiendo y configurando otras etiquetas o variables en él, mientras que el contenedor publicado seguirá operativo en el sitio web.

 

Comprobar Tag Manager

Una vez que hemos instalado Google Tag Manager en nuestro sitio web en WordPress y lo tenemos configurado, debemos asegurarnos que está operativo cuando se navega por sus páginas web.

En la sección anterior vimos cómo hacerlo en algunos casos, pero a continuación vamos a ver varios métodos para comprobarlo.

Cualquiera de ellos es válido, pero para asegurarnos que no se nos escapa nada, conviene utilizar varios de estos métodos. Como veremos, son muy sencillos y nos ocuparán poco tiempo.

 

1. Revisar el código fuente de las páginas web en el navegador

El método más directo consiste en visitar una página de nuestro sitio web y visualizar su código fuente (opción “Ver código fuente de la página” en el menú contextual del navegador Chrome).

El navegador muestra el código HTML de esa página web y, si hacemos una búsqueda (con Control-F) de la cadena “googletagmanager“, deberíamos encontrar los dos scripts de Google Tag Manager:

Script Google Tag Manager

 

2. Utilizar la extensión Tag Assistant (by Google)

El navegador Chrome tiene una extensión, Tag Assistant (by Google), que detecta y muestra qué scripts de seguimiento hay en la página web que se muestra en ese momento en el navegador.

Por tanto, tan solo debemos instalar esta extensión, visitar una página de nuestro sitio web y comprobar que aparece el script de Google Tag Manager al desplegar el cuadro de Google Tag Assistant y su estado:

Google Tag Assistant

En el caso de la imagen anterior, la página web que hemos visitado tiene cuatro scripts de seguimiento (dos de Analytics, una de Publisher Tag y una de Tag Manager), de los cuales tres son correctos (color verde) y uno presenta un error (color rojo).

Debemos, por tanto, revisar porqué falla el script correspondiente al color rojo.

 

3. Utilizar Screaming Frog

Los dos métodos anteriores solo sirven para comprobar una única página web. Pueden servirnos para scripts que afecten a una o dos páginas web, pero no son prácticos cuando sean scripts que afecten a todo o gran parte del sitio web.

La aplicación Screaming Frog es una herramienta utilizada para comprobar fundamentalmente el SEO OnPage de un sitio web y que no presente errores de funcionamiento o configuración. Una de las utilidades que tiene es realizar la búsqueda de una cadena de caracteres en todas las páginas del sitio web y mostrar un listado de las páginas que cumplen la condición de búsqueda.

Para este caso, utilizaremos Screaming Frog para que nos muestre las páginas donde NO aparece la cadena “https://www.googletagmanager.com/gtm.js, que forma parte del script de Google Tag Manager. De esta forma, Screaming Frog sacará un listado de las páginas donde NO aparece y deberemos comprobar qué está pasando para que el script no esté en esas páginas.

1. Abrir el cuadro de configuración de la búsqueda personalizada en Configuration -> Custom -> Search:

Buscar en Screaming Frog

2. Añadir un nuevo filtro para encontrar aquellas páginas que NO contengan la cadena https://www.googletagmanager.com/gtm.js“:

Buscar en Screaming Frog

3. Ejecutar la búsqueda para nuestro sitio web:

Buscar en Screaming Frog

4. Una vez terminada la búsqueda, tendremos un listado con las páginas web que no tengan esa cadena y que, por tanto, deberemos revisar para añadir el script de Tag Manager.

 

4. Revisar el tiempo real de Google Analytics

Para utilizar este método, primero debemos configurar Google Tag Manager para incorporar una etiqueta de Google Analytics en nuestro sitio web y entonces entrar dentro de la gráfica de tiempo real en nuestra cuenta de Google Analytics.

Si Google Tag Manager funciona correctamente, deberíamos ver cuántos usuarios están accediendo y qué páginas han estado viendo en los últimos minutos:

Visión tiempo real Google Analytics

Como es posible que en ese momento no estemos recibiendo ninguna visita, podemos generarla nosotros mismos visitando varias páginas de nuestro sitio web y comprobando que aparece reflejado en esta gráfica.

 

Conclusiones

La inserción de scripts de seguimiento en las páginas de nuestro sitio web se ha convertido hoy en día en una necesidad para poder analizar el comportamiento de los usuarios mientras navegan por nuestras páginas web y optimizar nuestras estrategias.

Lo que en principio resulta una tarea relativamente sencilla (añadir el script en la cabecera de las páginas web) puede complicarse a medida que se añaden scripts para distintas herramientas o plataformas, como Google Analytics, Facebook Ads o Google Ads, dificultando su administración y, en algunos, incluso interfiriendo entre ellos.

Mediante la utilización de la herramientas Google Tag Manager, solo será necesario insertar el código de seguimiento de esta herramienta (en la cabecera y cuerpo de cada página web), para que, desde un panel de control centralizado, se puedan añadir todos los scripts de seguimiento que consideremos oportuno, sin tener que editar el código HTML de nuestras páginas web para cada uno de ellos.

Además de esta gestión centralizada, que también mejora el tiempo de respuesta del sitio web (pues ya no es necesario cargar y ejecutar cada script), Google Tag Manager proporciona utilidades adicionales que mejoran la organización y administración de los scripts, acelerando la puesta en marcha de nuevas funciones de seguimiento, la coordinación de distintos equipos de trabajo o la exportación/importación de configuraciones de seguimiento que se pueden reutilizar en distintos sitios web, además de mejorar la seguridad del propio sitio web.

La instalación de Google Tag Manager en WordPress se puede hacer de dos formas: editando los ficheros del theme para insertar el código de seguimiento en la cabecera y cuerpo de todas las páginas del sitio web o mediante un plugin (Google Tag Manager for WordPress).

Sea cual sea el método que se utilice, será necesario configurar Google Tag Manager, para indicar qué scripts de seguimiento tendrá el sitio web (por ejemplo, Google Analytics) y, a continuación, comprobar que está funcionando correctamente, a través de varios métodos, como ver el código fuente de una página web en el navegador o utilizando el plugin Google Tag Assistant.