▷ Google Tag Manager 2020: Tutorial de iniciación
Este tutorial está diseñado para usuarios que quieren conocer el funcionamiento de Google Tag Mánager (GTM) y no son programadores. Si sigues leyendo aprenderás los fundamentos de esta herramienta, cómo instalarla en WP y cómo emplearla para cumplir el Reglamento General de Protección de Datos (RGPD) en Google Analytics.
Índice del artículo
¿Qué es y para qué sirve Google Tag Mánager?
El
administrador de etiquetas de
Google. Está en desarrollo desde dos mil doce y es gratis.
Y por si te lo estás preguntando, un tag o etiqueta es un
fragmento de códigoque se inserta en el código fuente de una página. Algo como esto.
Las etiquetas dejan conectar un sitio con diferentes tecnologías(analítica, publicidad, mapas de calor, seguimiento de conversiones…). ¿Notas ese sutil aroma a marketing?
¿Y para qué sirve Google Tag Manager? Pues para editar todas las etiquetas de un sitio web
de una forma segura y desde un único sitio.
Si tienes una web personal, la única etiqueta que utilizarás será la de Analytics. Pero los ecommerces y las webs corporativas hacen uso de tecnologías y etiquetas más complejas (píxeles de redes sociales, remarketing, tests A/B, mapas de calor…).
Lo “tradicional” es introducir cada etiqueta en el código fuente de la página, normalmente en el <head> o del <body>. El inconveniente de este procedimiento estándar es que terminas con muchos bloques de código ostentosos y difíciles de administrar.
Lo que GTM nos propone es
insertar una sola etiqueta en nuestra web. Esta etiqueta es un “contenedor flexible” que albergará las etiquetas de todos los servicios que precisemos. Igual esto se entiende mejor con un caso.
Imagina que tu web es un cucurucho de barquillo, como el de los helados. Las bolas de helado son las etiquetas de los servicios que utilizas: Analytics es de chocolate, el píxel de Fb es de fresa… Cuantos más servicios usas, más pisos tiene tu helado y más se semeja a un rascacielos.
Cuando utilizas GTM, tu cucurucho pasa a tener una sola bola. Esa bola no tiene sabor, pero cuando a ti se te antoje, se convertirá en la bola de chocolate de Analytics, en la de fresa del píxel de Facebook… El helado tendrá todos y cada uno de los sabores que quieras concentrados en una única bola, y así no tendrás que subirte a una escalera para comértelo.
Menos mal que nadie ha inventado un helado así, por el hecho de que
tendríamos todos el azúcar por las nubes.
Ventajas de utilizar GTM
Termínate el helado, pues de ahora en adelante volvemos a charlar de páginas web. ¿Por qué se habla tanto de GTM? ¿Cuáles son las ventajas de Google Tag Mánager? Aquí te dejo 5.
- Mejora el
rendimientode los sitios, ya que deja limitar el código que se ejecuta en cada instante. - Aumenta la
seguridadal programar. La vista previa permite advertir fallos y conflictos. - Aporta
agilidadal trabajo de gestión merced a que todas las etiquetas están en un único sitio. - Otorga un
controlabsoluto y detallado sobre todas las etiquetas de un sitio web. - Ofrece
comodidada la hora incorporar otros productos de Google (Ads, Analytics, Optimize…).
En terminante, GTM es una herramienta tan práctica y extendida que
yo la considero una competencia digital.
Muchos de tus clientes ya la usan, así que no estaría de más que supieses manejarla a un nivel básico. Y para eso, nada mejor que implementarla en tu sitio personal. ¡Vamos con ello!
Cómo instalar Google Tag Manager en WordPress
Empieza yendo a lay, en la parte superior derecha, haz clic en
Iniciar sesión. Entra con tu cuenta de Google.
Ahora estás en el área de trabajo. Una cuenta de GTM funciona con una jerarquía similar a la de Analytics: tienes una cuenta y un contenedor. Pulsa arriba a la derecha en
Crear Cuentae introduce un nombre y un país.
Después asigna un nombre al contenedor y elige utilizarlo en Sitio web.
Si tienes una versión AMP, tendrás que crear otro contenedor y gestionarlo por separado.
A continuación aparecen las instrucciones para instalar GTM en tu sitio.
Hay que insertar dos etiquetasen el código fuente.
Si cierras accidentariamente esta ventana, podrás regresar a ella haciendo click en la parte superior del área de trabajo, en Administrador > Nombre del contenedor > Instalar Google Tag Manager.
Puedes insertar el código de GTM de forma manual o a través de un plugin. Toda vez que puedas, hazlo a mano.
Instalación manual
Antes de tocar nada, haz una copia del archivo que vas a editar. Lo normal es que solo debas tocar header.php, pero tu tema puede cambiar esto. Tienes 2 formas de llegar a este archivo.
- Desde el
panel de administración de WordPress. En el menú lateral ve a Apariencia > Editor . A continuación, en el menú lateral derecho elige header.php. Copia el contenido en una aplicación de texto como el bloc de notas.
Vía FTP. Emplea un cliente como FileZilla o bien la aplicación web que incluya tu alojamiento. La senda del archivo acostumbra a ser /wp-content/themes/nombre-del-tema/header.php. Si usas un tema child (hijo), edita su header.php y no toques el tema padre.
En este punto
borra las etiquetas o bien desactiva los plugins de los servicios que ahora vas a gestionar mediante GTM, como Analytics.
Ahora sí, edita header.php y pega una etiqueta tan cerca de <head> como puedas y otra después de <body>.
Puede producirse algún fallo si las etiquetas de GTM interfieren con el código que incluye tu tema. En un caso así, restaura y prueba a poner las etiquetas más arriba o abajo.
Para esta opción utiliza. Puedes instalarlo desde tu WordPress, en Plugins > Añadir nuevo.
Una vez activado, en el menú lateral de WP ve a Ajustes > Google Tag Manager. En la pestaña General
solo debes introducir tu ID de Google Tag Manager.
Este ID tiene una estructura GTM-XXXXXXX. Lo encontrarás yendo a Administrador > Nombre del contenedor > Instalar Tag Mánager.
El plugin ofrece diferentes opciones para introducir el código. Si no deseas tocar nada más, deja marcada la primera opción.
Recuerda borrar las etiquetas o bien desactivar los complementos de los servicios que ahora vas a administrar a través de Tag Manager, como por poner un ejemplo Analytics.
Comprobar si la instalación se ha efectuado correctamente
Para esta labor utiliza la extensión de Google Chrome, que sirve para detectar etiquetas de productos de Google.
Tras instalarla, ve a tu sitio web y pulsa en el icono de la extensión. En la ventana, pulsa Enable y después recarga tu página. Vuelve a pulsar en el icono de Tag Assistant y verás nueva información.
Tag Assistant usa un código de colores para indicar el estado de las etiquetas que ha encontrado:
- Verde para las etiquetas que funcionan.
- Azul para las etiquetas que funcionan, pero cuya implementación se puede mejorar.
- Amarillo para las etiquetas que tienen errores leves de implementación.
- Rojo para las etiquetas con errores graves de implementación.
En este punto de la instalación
nos vale con que Tag Assistant advierta la etiqueta de GTM. No importa si sale roja, por el hecho de que cambiará cuando configuremos la herramienta. Si Tag Assistant no detecta ningún contenedor de GTM, repasa la instalación.
¿Está todo bien? Pues es el instante de pasar al siguiente capítulo de esta guía de Google Tag Mánager.
Conceptos básicos y también interfaz
Antes de trastear con la herramienta es necesario revisar la terminología básica.
Contenedor:cuando instalamos GTM insertamos un contenedor en nuestra web y lo personalizamos con una serie de etiquetas, activadores y variables. Podemos mudar el contenido cuantas veces queramos, mas el contenedor siempre y en toda circunstancia será el mismo. Por eso en GTM se habla de “versiones del contenedor”.
Etiqueta:el fragmento de código que utilizamos para conectar nuestra web con un servicio de terceros (Analytics, Ads, CrazyEgg, Twitter…). Añadir una etiqueta a GTM es algo más laborioso que sencillamente pegar el código, mas vale la pena.
Activador:la condición que hace que una etiqueta funcione. Un ejemplo: activa la etiqueta de Analytics cuando el contenido de la página sea visible para el usuario.
Variable:una porción de datos que se puede relacionar con un activador o bien una etiqueta.
Publicar:trasladar los cambios al contenedor. Los cambios publicados interactúan con todos y cada uno de los visitantes de nuestra página web.
Versión:los cambios publicados se reúnen en versiones numeradas automáticamente. Podemos navegar entre versiones y, si la cagamos, restaurar una versión anterior (¡gracias, Google!).
GTM se puede usar a un nivel básico sin tener conocimientos técnicos, pero si sabes programar podrás hacer todo género de virguerías.
Ahora echaremos un ojo a la interfaz de trabajo.
Área de trabajo. Nos conduce a la página principal de GTM, en la que estamos ahora.
Versiones. Desde aquí podemos ver el historial de versiones, comprobar qué se cambió en cada una y restaurar versiones anteriores.
Administrador. Esta sección es para configurar la cuenta de GTM y dar permisos a otros usuarios. También tenemos la valiosa opción de importar la configuración de otros contenedores o bien exportar la nuestra.
Nueva etiqueta. Puesto que GTM es un gestor de etiquetas, este es el punto de partida.
Descripción. Este apartado es útil cuando tenemos más de un espacio de trabajo. Si tendremos diferentes programadores trabajando paralelamente en posicionamiento seo en mallorca diferentes, vamos a crear un espacio de trabajo para cada uno de ellos y los identificaremos con una descripción.
Editando. Aquí hallamos un resumen de los elementos que estamos alterando ahora.
Versión del contenedor. Ahora mismo aparece como “no publicado”. Conforme hagamos cambios y los publiquemos, GTM asignará a nuestro contenedor un número de versión.
Cambios en el área de trabajo. Esta sección muestra las novedades de nuestro espacio de trabajo respecto al contenedor que está publicado.
Historial de actividades. Aquí se registra cada cambio en el espacio de trabajo.
Menú lateral. Nos deja acceder a las principales secciones de GTM. También tenemos un buscador para localizar elementos con más rapidez, y la opción de navegar entre los diferentes espacios de trabajo.
Código de contenedor.Al hacer click accederemos al código de instalación de GTM.
Vista previa. Utilizaremos esta opción antes de publicar cambios. Al activar la vista anterior y visitar nuestra página web, se abrirá una ventana en la que vamos a poder ver qué etiquetas se activan. Si algo no funciona en la vista anterior, tampoco funcionará tras publicarlo… así que no te líes a publicar versiones y también investiga qué puede estar fallando.
Enviarpublica en el contenedor los cambios del espacio de trabajo (nuevas etiquetas, disparadores, variables, etcétera).
Ahora que conocemos la interfaz, ha llegado el instante de dar los primeros pasos.
Instalar Google Analytics en Wordpress con Google Tag Manager
- Pulsa en
Nueva Etiqueta. Llámala Universal Analytics. Haz clic en «Configuración de Etiqueta» y elige Analytics – Universal Analytics. - Elige el
tipo de seguimiento Página vista. En el desplegable «Configuración de Google Analytics» haz click en Nueva Variable. - Llama a esta nueva variable «ID Seguimiento Universal Analytics». Vas a precisar este ID y lo encontrarás en tu cuenta de Analytics, haciendo click en Administrar (icono de la rueda dentada) > Información > Código de seguimiento.
- Pega el ID en la casilla inferior y deja el dominio de cookie en auto. Guarda.
- Ahora haz clic en
Activación, escoge All Pages y guarda. El resultado final ha de ser como este. - Para
verificar la etiqueta, activa la vista previa y entra a tu página web usando otra pestaña del navegador. Deberías ver la etiqueta en la ventana inferior, en la sección Tags Fired On This Page. ¡Enhorabuena! Ya puedes publicar.
La explicación: ¿qué hemos hecho?
Hemos añadido una etiqueta (Página Vista de Universal Analytics) con una variable (nuestro ID, a fin de que los datos vayan a nuestra cuenta) y un activador (la etiqueta se disparará cuando la página sea visible).
¿Hemos terminado ya?
Aunque Analytics ya funciona en tu sitio, aún queda trabajo por hacer. A continuación veremos cómo amoldar Analytics al Reglamento General de Protección de Datos (el conocido RGPD, o bien GRPD en inglés).
Adaptar Analytics al RGPD
Para emplear Analytics con todas y cada una de las de la ley (y nunca mejor dicho) hay que hacer unos ajustes en la herramienta y en nuestra web.
En esta guía de Google Tag Manager te comparto dos ajustes, mas con aplicar el primero es ya suficiente.Para no aburrirte con tecnicismos, te lo cuento sobre la marcha.
Ajuste 1 – Anonimizar la IP
Por si te lo estás preguntando, una dirección IP es una secuencia numérica y única que identifica a un dispositivo (ordenador, móvil, tablet…) conectado a Internet. Tiene un formato afín a este: 78.232.249.190. Cuando un usuario llega a tu página web, Google Analytics compendia su IP (aunque no la muestra de forma directa en tus informes).
Pues bien, desde el veinticinco de mayo de
las direcciones IP se consideran datos personales. Siendo secuencias numéricas únicas pueden identificar no solo un dispositivo, sino más bien de forma indirecta a la persona que lo usa. O bien cuando menos eso plantea la ley. En cualquier caso, un administrador web cuya herramienta de analítica web compendiase estos datos personales tendría que cambiar la manera en que se introducen sus cookies.
Esto puede ser un dolor de cabeza, pero podemos evitarlo y ser cien por ciento legales anonimizando las direcciones IP que recopila Analytics. Esto es tan fácil
como configurar la herramienta a fin de que elimine la última una parte de cada dirección IP que recopila.
Así, 78.232.249.190 queda registrada como 78.232.249.0: ya no es una dirección completa, no puede identificar a un dispositivo y por consiguiente no es un dato personal. Y tú, como administrador web, te ahorras el trabajo de cambiar la manera en que introduces tus cookies.
Vamos a ver cómo hacer este ajuste.
- Dentro de Google Tag Mánager, emplea el menú lateral para ir a Variables y pulsa sobre la que has creado antes: ID Seguimiento Universal Analytics.
- En la caja superior, Configuración de la variable, haz clic en el icono del lápiz (esquina superior derecha). Después ve abajo a Más opciones > Campos para configurar > Añadir campo. Nombre del campo: anonymizeIp y valor: true. Guarda los cambios y publica.
¡Listo! Recuerda que, como ahora todas las IP están anonimizadas,
los filtros de dirección IP que aplicaras en Google Analytics ya no funcionarán.
Ajuste 2 – Insertar las cookies de Analytics cuando el usuario da permiso
Este ajuste consiste en no insertar las cookies de Analytics hasta que el usuario acepte el aviso de cookies. Aguardamos hasta obtener su consentimiento explícito. Y si no nos lo da… no le introducimos las cookies. Por tanto, su sesión no existe y no conseguimos ningún dato. Es duro, mas es lo que marca la ley.
Veamos cómo se hace punto por punto.
Instalar un plugin de aviso de cookies que bloquee Analytics
Yo utilizo, que es de pago mas cumple perfectamente: lanza el aviso personalizable y bloquea las cookies de Google Analytics hasta que el usuario acepta.
Una vez activado, configurarlo es realmente sencillo. Te dejo una captura de pantalla.
Elegimos enseñar un botón de rehusar y que
la página se recargue una vez que obtengamos el consentimiento.Si no marcamos esta última opción no haremos el seguimiento del usuario desde la página en la que se aceptó el aviso.
Ahora nos marchamos a Tag Mánager para vincular la aceptación de este aviso a la inserción de la etiqueta de Analytics.
Configurar la inserción de cookies en GTM
- Vamos a
Variables> Nueva. La llamamos wpca_consent. En Configuración de la variable elegimos «Cookie de origen» y representando a la cookie ponemos Variable wpca_consent. Guardamos. - Ahora vamos a
Activadores> Nuevo. A este activador lo vamos a llamar WPCA Consent Igual a 1. Hacemos clic en el círculo gris para editar el activador y de la lista elegimos Página vista > Ciertas páginas vistas. En el desplegable elegimos wpca_consent marcando «Es igual a» y en la casilla escribimos 1. Esta es la cookie que se nos inserta cuando admitimos el aviso.
En último lugar vamos a la
Etiqueta de Universal Analyticsy, en la caja Activación, hacemos click en el icono de lápiz. Borramos el activador «All Pages» haciendo clic en -. Pulsamos para añadir un nuevo activador y escogemos WPCA Consent Igual a 1. Ya puedes emplear la vista anterior y publicar.
La explicación: ¿qué hemos hecho?
Hemos creado una variable de cookie de origen mencionando a wpca_consent, una cookie que inserta el complemento WeePie Cookie Allow cuando el usuario acepta o rechaza el aviso.
Después hemos convertido esa variable en un activador: hemos dicho que «algo pase» cuando la cookie wpca_consent tenga el valor 1 (sucede al aceptar el aviso).
Por último, hemos editado la etiqueta de Página Vista de Analytics a fin de que solo se dispare cuando wpca_consent tenga el valor 1.
Actualiza tu política de cookies
Ahora que Analytics ya cumple el RGPD, existen algunas cosas que debes modificar en tu página de política de cookies.
- Actualiza el texto para
avisar a tus usuarios de las nuevas cookiesque inserta tu sitio web:
- wpca_consent caduca según la valía que hayas configurado en el plugin y sirve para recordar si el usuario aceptó o bien no el consentimiento
- _gat_UA-XXXXXXXX (tu código de seguimiento de Universal Analytics) caduca en 1 minuto y sirve para limitar el porcentaje de peticiones.
- Inserta en algún sitio el shortcode para generar un
botón de revocar consentimiento. Este shortcode, llamado Reset consent button, lo encontrarás en la sección «Content» de las opciones del plugin.
- wpca_consent caduca según la validez que hayas configurado en el complemento y sirve para recordar si el usuario aceptó o no el consentimiento
- _gat_UA-XXXXXXXX (tu código de seguimiento de Universal Analytics) caduca en 1 minuto y sirve para limitar el porcentaje de solicitudes.
Recuerda que para amoldar tu sitio al RGPD debes cumplir con más requisitos, como amoldar los textos legales.
Ya que te has tomado la molestia de incorporar Analytics adecuada y legalmente, ¿por qué no exprimir al máximo la herramienta? Pásate por mi.
Soporte oficial de Google Tag Manager
Si aparecen inconvenientes, consulta estas fuentes:
Implementar etiquetas de otros servicios
GTM es compatible con todo género de etiquetas: las únicas limitaciones serán nuestros conocimientos de programación. En estos links encontrarás las instrucciones oficiales para configurar en tu Google Tag Mánager las etiquetas de los servicios más populares:
¡Y eso es todo!
Confío en que has llegado hasta el final de mi tutorial de Google Tag Mánager por el hecho de que vas a ponerte (o ya te has puesto) manos a la obra con esta herramienta Mas sobre todo, espero que te hayas hecho una idea de
las posibilidades que puede brindar a tus clientes.
No hay excusas para no integrarlo en tu sitio personaly toquetear un poco (¡siempre usando Vista Anterior!). Te recomiendo hacerlo y a contarme qué tal te fue.
Y recuerda: GTM es una aplicación versátil y potente, mas en manos de un programador se convierte en algo revolucionario.
Consultor de comunicación y marketing digital. Surfeo Internet desde 1999.
¿Te gusta lo que has leído?
Apúntate al boletín de noticias y recibe mis mejores contenidos sobre marketing digital y comunicación
Responsable: José Luis Culebras Pérez. Finalidad: registrar al usuario en el boletín de noticias y mandarle por correo electrónico novedades y contenidos sobre las temáticas de este lugar web. Legitimación: consentimiento del interesado. Si no admite la política de privacidad, el usuario no será dado de alta. diseño web wordpress lerida : MailChimp (The Rocket Science Group). Derechos: el usuario puede darse de baja en cualquier correo usando el enlace ubicado al pie, o ejercer sus derechos de acceso, rectificación, limitación o supresión de datos en , o presentar una reclamación ante una autoridad de control.
Muy buen contenido, estoy comenzando a emplear el Tag Mánager, así que seguiré tus recomendaciones para hacerlo todo bien.
¡Gracias por visitar y comentar, Agus! GTM es una joya: de esta herramienta pueden salir mil contenidos de 10/10. Proseguiremos explorando :).
Gracias por el tutorial.
Me guardo tu web para estar atento a nuevas entradas.
Me alegro de que te haya resultado útil. Ya tengo planeados nuevos contenidos, así que no tendrás que esperar mucho.
Hola, José Luis.
Muchas gracias por este extraordinario tutorial.
Si es posible, me gustaría consultarte dos dudas. Espero disculpes si pecan de demasiado simples u obvias; acabo de llegar a este cosmos wordpress y mis conocimientos son muy básicos.
1. Para la instalación manual de GTM, de entrada hay que copiar y pegar un código en todas y cada una de las páginas del sitio. Mi pregunta es: ¿Exactamente en TODAS las páginas? ¿También en las de aviso legal, política de cookies, privacidad, etcétera? ¿Y qué pasa en el resto del contenido que no es exactamente una página, como, por poner un ejemplo, las entradas de un weblog?
2. En mi web instalé el ID de Google Analytics no manualmente, sino más bien con el complemento GA Analytics. ¿He de borrar ese plugin, ahora que ese ID pasa a alojarse directamente en GTM?
Muchas gracias nuevamente por tu valiosa información. Enhorabuena por la profesionalidad, claridad y calidad de tu sitio.
Saludos.
¡Hola Guillermo!
Cuando comienzas con Wordpress, todo son dudas. Mas ya verás que es una plataforma muy sencilla y en poco tiempo te harás con ella.
Paso a contestar tus preguntas.
1- Para que GTM funcione apropiadamente en un sitio web WordPress, su código debe estar insertado en todas las páginas. Esto es sencillísimo de lograr, puesto que WordPress produce el contenido de cada página de forma dinámica, extrayendo información de una serie de ficheros. Si insertas el código de GTM en uno de esos ficheros, el header.php, ya tendrás Google Tag Manager marchando en todo tu sitio (incluyendo todas las páginas y entradas).
2- Ya que vas a administrar Analytics a través de Tag Manager, desactiva el complemento que utilizabas. Cuando hayas verificado que Analytics funciona bien mediante GTM, borra ese complemento.
Gracias muyy buen contenido, espero nuevas publicaciones tuyas!!
Me alegro de que te haya agradado, Frida. Seguiré publicando contenidos como este, puedes estar sosegada.
Buenos días José Luis,
Enhorabuena por el artículo. Es perfecto, bien explicado y con imágenes claras y gráficas.
En mi caso el plugin de Cookies que empleo es el GDPR Cookie consent, el cual emplea 2 cookies en lugar de una, pero era tan explicativo tu tutorial que he podido amoldar tu método sin inconveniente.
Una pregunta, si no es mucho pedir, me gustaría saber por qué en el activador marcas algunas páginas vistas en vez de todas y cada una de las páginas vistas.
De nuevo enhorabuena, has sido de mucha ayuda 🙂
¡Gracias por dejar un comentario, Sergio! Me alegro de que la guía te haya servido para experimentar con otros complementos. El activador de Página Vista de Universal Analytics está configurado con «Algunas páginas vistas» para condicionarlo a la cookie de origen. Si lo dejamos como «Todas las páginas vistas» entonces Analytics salta siempre y en todo momento y no sirve de nada todo el trabajo anterior.
RESPONSABLE: José Luis Culebras Pérez.FINALIDAD PRINCIPAL: administrar los comentarios. LEGITIMACIÓN: permiso del interesado. DESTINATARIOS: No se cederán datos a terceros, salvo autorización expresa o bien obligación legalDERECHOS: Acceder, rectificar y eliminar los datos.
