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, necesitas incluir un script o código de seguimiento que rastree y recopile información de estos mientras navegan por él; por ejemplo, para la herramienta de analítica web Google Analytics en WordPress.

Durante todo este mes, contrata tu plan de hosting al -70% de descuento.

Llévatelo

Saber instalar y configurar Google Tag Manager en WordPress te va a permitir obtener métricas de visitas y acciones de los usuarios en tu sitio web, que luego podrás utilizar para mejorar los contenidos de la web y potenciar tus campañas en la dirección adecuada

Además de añadir scripts para el rastreo de acciones de visitantes, también puedes necesitar insertar píxeles de seguimiento, para plataformas publicitarias como Facebook Ads o Google Ads, y otros tipos de códigos para que puedas utilizar diversas herramientas de marketing.

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

Ahora bien, aunque la inserción de scripts en WordPress es sencilla (un simple 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.

Estos y otros problemas son los que hacen necesaria una herramienta que te facilite la gestión de los scripts o píxeles de seguimiento de forma centralizada y sencilla.

Para ello, Google te ofrece Tag Manager, una aplicación web gratuita que verás 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 tus páginas web, sin una localización ni documentación claras, se concentran en un único script, que te permitirá gestionarlos y configurarlos desde un único panel de control.

Utilizar varios códigos o píxeles de seguimiento puede generar algunos problemas, de los que ya he 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 utilizas 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 vayas a utilizar, sino activar su etiqueta dentro de tu cuenta de Google Tag Manager, en cualquier momento y sin interferencia con el resto de scripts o etiquetas que estés utilizando.

  ¿Para qué sirve Google Tag Manager?

A primera vista, Google Tag Manager es una herramienta de gestión de etiquetas para que los usuarios puedan añadir o actualizar fragmentos de código de seguimiento y análisis en su sitio web sin tener que editar el código fuente del tema en uso, lo que ahorra tiempo y evita errores.

Además de simplificar el proceso de seguimiento y análisis, Google Tag Manager también ofrece una amplia gama de características útiles, como implementar etiquetas personalizadas, establecer reglas para activar etiquetas en función de eventos específicos y realizar pruebas A/B en WordPress para optimizar tu sitio web.

Si no tienes mucha experiencia con los scripts de seguimiento, puede parecer que la gestión centralizada que permite Google Tag Manager 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.

  Hacer despliegue rápido de códigos de seguimiento

Te explico 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.

  Administrar todas las etiquetas desde un mismo panel

Como ya has 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.

  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 en el sitio web.

Todo este conjunto forma parte de un contenedor, que se puede exportar en un solo fichero, para ser reutilizado en 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 visitas 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 tus sitios web.

  Realizar seguimiento de eventos

El seguimiento de eventos en el sitio web, como clics, envíos de formularios, tiempo en la 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 es necesaria la escritura de código y no hace falta un desarrollador para llevarlo a cabo.

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 te permitirán obtener más información sobre las acciones que los visitantes realizan en tu sitio web; por ejemplo, si interactúan con el contenido o rellenan los formularios.

  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 necesitas volver a una versión anterior de ese contenedor, solo tienes que seleccionarlo; por ejemplo, cuando hayas 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.

  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.

  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 sabes qué es Google Tag Manager y para qué sirve, estarás anhelando instalarlo en tu sitio web en WordPress. Tienes dos formas de 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 debes insertar ninguno de ellos. Para evitar que la actualización del tema «machaque» este código, debes crear un tema hijo e insertar ahí estos scripts.
• A través de un plugin, como Google Tag Manager for WordPress, en el que debes copiar estos códigos en la configuración del plugin, y este se encarga de colocarlos donde corresponde en las páginas web.

NOTA Además, con el plugin GTM4WP puedes configurar DataLayer para el seguimiento del comercio electrónico en WooCommerce.

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

  Cómo configurar Google Tag Manager

Una vez instalado el código de Tag Manager en tu sitio web en WordPress, puedes proceder a quitar todos los scripts o píxeles de seguimiento que tuvieras e ir añadiéndolos a etiquetas del contenedor de tu 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 en WordPress, podrás añadirlas muy fácilmente en tu cuenta de Tag Manager, pues hay soporte directo.

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

A continuación, vamos a ver cómo configurar Google Tag Manager en ambos casos; es decir, cuando ya tienes una etiqueta predefinida (como con Google Analytics) o cuando tengas 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 te muestro 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, debes utilizar la opción de HTML personalizado para crear la etiqueta correspondiente.

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

• En primer lugar, debes tener a mano el código del píxel de Facebook Ads. Para ello, tienes que entrar en tu cuenta de Business Facebook y dentro del Administrador de Anuncios, seleccionar Píxeles:

• Haz clic en el botón de Configuración para ver el siguiente cuadro, en el que debes seleccionar la opción Instalar el código tú mismo de forma manual.
  Sin Google Tag Manager, este código deberías insertarlo en los ficheros de tu WordPress, pero, en este caso, lo insertas en una etiqueta de Tag Manager:

• Copia el código que te muestra en pantalla, que será el que debes pegar dentro de la etiqueta de Tag Manager.
• Entra en tu cuenta de Google Tag Manager y haz clic en el cuadro Nueva etiqueta:

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

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

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

• El siguiente paso es añadir un activador para esta etiqueta; para ello, haz clic en el cuadro de Activación y selecciona la opción All Pages, de tipo Página vista en el desplegable que se abre. En este mismo cuadro, puedes hacer clic en el signo + si quieres que el activador sea de otro tipo:

• Pon un nombre a la etiqueta (relacionado con su contenido, como Facebook Ads). Haz clic en el botón Guardar y la etiqueta que acabas de crear aparece dentro de tu espacio de trabajo:

• Por último, solo te queda comprobar que la etiqueta que acabas de crear funciona correctamente.
  Para ello, accede al 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 el navegador de tu navegador (para Firefox y Chrome).
  Después de instalarlo, accede al frontal de tu nuestro sitio web y la extensión te indicará si el píxel de Facebook Ads se ha cargado correctamente:

  Enviar y publicar los cambios del espacio de trabajo

Cuando estás trabajando en un contenedor, añadiendo y configurando las distintas etiquetas para los respectivos 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 los publiques.

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 has 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):

En esta imagen, puedes 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.

En este vídeo te explico qué tienes que hacer para publicar en tu sitio web los cambios que has realizado en el contenedor:

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

Como los cambios del espacio de trabajo ya han sido publicados, este se muestra vacío ahora, y podrías 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 has instalado Google Tag Manager en tu sitio web en WordPress y lo tienes configurado, debes asegurarte que está operativo cuando se navega por sus páginas web.

En la sección anterior viste cómo hacerlo en algunos casos, pero a continuación te muestro varios métodos para comprobarlo.

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

  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 tu sitio web y visualizar el código fuente (opción Ver código fuente de la página en el menú contextual del navegador. Recomendado: Google Chrome).

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

  Utilizar la extensión Tag Assistant de 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 visita en ese momento en el navegador.

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

En el caso de la imagen anterior, la página web que has 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).

Debes revisar por qué falla el script correspondiente al color rojo.

  Utilizar Screaming Frog SEO Spyder

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 On Page 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, puedes usar Screaming Frog SEO Spyder 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 deberás 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 Configuración ➜ Personalizar ➜ Buscar:

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

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

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

  Revisar el tiempo real de Google Analytics

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

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

Como es posible que en ese momento no estés recibiendo ninguna visita, puedes generarla tú visitando varias páginas de la web y comprobando que aparece reflejada en esta gráfica.

  Opciones de Google Tag Manager en WordPress

En WordPress, existen varias formas de integrar Google Tag Manager en un sitio web, pero una de las más sencillas es mediante el uso de un plugin.

Estos son algunos de los plugins disponibles en WordPress para integrar Google Tag Manager a tu sitio web:

• Google Tag Manager for WordPress: se trata de un plugin gratuito que te ayuda a integrar Google Tag Manager en tu web. Ofrece una configuración fácil e integración rápida de la cuenta de Google Tag Manager.
• DuracellTomi’s Google Tag Manager for WordPress: otro plugin gratuito que te permite añadir Google Tag Manager en tu sitio web. Es bastante sencillo integrar GTM en tu web con este plugin.
• WP Google Tag Manager: también es gratuito y te sirve para poder incorporar el script de seguimiento de Google Tag Manager en la web. Fácil de configurar.

Una vez que hayas instalado el plugin de tu elección, deberás añadir el ID de seguimiento de Google Tag Manager en la configuración del plugin. Desde allí, podrás crear etiquetas y eventos de seguimiento para tu sitio web.

Algunos ejemplos de etiquetas comunes que se pueden añadir a través de Google Tag Manager son la medición de conversiones de Google Ads, el seguimiento de eventos de Google Analytics y el seguimiento de conversiones de Facebook.

  Conclusiones

La inserción de scripts de seguimiento en las páginas de tu sitio web se ha convertido hoy en día en una necesidad para poder analizar el comportamiento de los usuarios mientras navegan por la web y así optimizar tus 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 las 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 consideres oportuno, sin tener que editar el código HTML de tus 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 utilices, 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.

También te puede interesar:

• ¿Cómo añadir Google AdSense en WordPress?
• Insertar el código de seguimiento de Google Analytics
• Insertar google analytics con SEO by Yoast
• Habilitar acceso a bots de rastreo SemRush y ScreamingFrog