40 years old Motor Mechanic (General ) Rodrick from Happy Valley-Goose Bay, has lots of hobbies and interests which include jewellery, and fossils. Has travelled since childhood and has been to numerous spots, like Barcelona.
Subtitle
Blog
▷ 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 prosigues leyendo aprenderás los fundamentos de esta herramienta, cómo instalarla en WordPress y cómo emplearla para cumplir el Reglamento General de Protección de Datos (RGPD) en Analytics.
Índice del artículo
¿Qué es y para qué sirve Google Tag Manager?
El
administrador de etiquetas de
Google. Está en desarrollo desde dos mil doce y es gratuito.
Y por si te lo estás preguntando, un tag o bien etiqueta es un
fragmento de códigoque se introduce en el código fuente de una página. Algo como esto.
Las etiquetas dejan conectar un sitio web con diferentes tecnologías(analítica, publicidad, mapas de calor, seguimiento de conversiones…). ¿ precio tienda online wordpress sutil aroma a marketing?
¿Y para qué sirve Google Tag Mánager? Puesto que para editar todas las etiquetas de un sitio web
de una forma segura y desde un único lugar.
Si tienes una web personal, la única etiqueta que utilizarás será la de Google Analytics. Pero los ecommerces y las webs corporativas emplean 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, en general dentro del <head> o del <body>. El problema de este procedimiento estándar es que terminas con muchos bloques de código ostentosos y complicados de administrar.
Lo que GTM nos plantea 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 página 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 Facebook es de fresa… Cuantos más servicios utilizas, 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 desees 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í, porque
tendríamos todos el azúcar por las nubes.
Ventajas de utilizar GTM
Termínate el helado, porque de ahora en adelante volvemos a hablar de páginas web. ¿Por qué se habla tanto de GTM? ¿Cuáles son los beneficios de Google Tag Manager? Aquí te dejo cinco.
- Mejora el
rendimientode los sitios, en tanto que permite limitar el código que se ejecuta en todos y cada momento. - Aumenta la
seguridadal programar. La vista anterior deja advertir fallos y conflictos. - Aporta
agilidadal trabajo de gestión merced a que todas las etiquetas están en un único lugar. - Otorga un
controlabsoluto y detallado sobre todas y cada una de las etiquetas de un sitio. - Ofrece
comodidada la hora implementar otros productos de Google (Ads, Analytics, Optimize…).
En definitiva, GTM es una herramienta tan práctica y extendida que
yo la considero una competencia digital.
Muchos de tus clientes del servicio ya la emplean, así que no estaría de más que supieses manejarla a un nivel básico. Y para eso, nada mejor que incorporarla en tu sitio personal. ¡Vamos con esto!
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 escoge usarlo en Sitio.
Si tienes una versión AMP, tendrás que crear otro contenedor y administrarlo por separado.
A continuación aparecen las instrucciones para instalar GTM en tu sitio web.
Hay que introducir dos etiquetasen el código fuente.
Si cierras accidentalmente 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 introducir el código de GTM de forma manual o mediante 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 tengas que tocar header.php, mas tu tema puede cambiar esto. Tienes 2 formas de llegar a este fichero.
- 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 la aplicación web que incluya tu hosting. La ruta 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 administrar a través de GTM, como Analytics.
Ahora sí, edita header.php y queja una etiqueta tan cerca de <head> como puedas y otra después de <body>.
Puede generarse algún error si las etiquetas de GTM interfieren con el código que incluye tu tema. En ese caso, restaura y prueba a poner las etiquetas más arriba o bien abajo.
Para esta opción emplea. Puedes instalarlo desde tu WP, 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 tienes que 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 insertar el código. Si no quieres tocar nada más, deja marcada la primera opción.
Recuerda borrar las etiquetas o bien desactivar los plugins de los servicios que ahora vas a gestionar a través de Tag Manager, como por servirnos de un ejemplo Analytics.
Comprobar si la instalación se ha efectuado correctamente
Para esta labor emplea la extensión de Google Chrome, que sirve para advertir etiquetas de productos de Google.
Tras instalarla, ve a tu sitio 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 marchan, 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? Puesto que es el momento de pasar al siguiente capítulo de esta guía de Google Tag Manager.
Conceptos básicos y también interfaz
Antes de trastear con la herramienta es preciso comprobar la terminología básica.
Contenedor:cuando instalamos GTM introducimos un contenedor en nuestra página web y lo personalizamos con una serie de etiquetas, activadores y variables. Podemos cambiar el contenido cuantas veces deseemos, pero el contenedor siempre será exactamente el mismo. Por eso en GTM se habla de “versiones del contenedor”.
Etiqueta:el fragmento de código que usamos para conectar nuestra web con un servicio de terceros (Analytics, Ads, CrazyEgg, Twitter…). Añadir una etiqueta a GTM es algo más trabajoso que simplemente 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, mas si sabes programar podrás hacer todo tipo de virguerías.
Ahora vamos a echar 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 todos y cada una y restaurar versiones precedentes.
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 exportar la nuestra.
Nueva etiqueta. Dado que GTM es un gestor de etiquetas, este es el punto de inicio.
Descripción. Este apartado es útil cuando tenemos más de un espacio de trabajo. Si vamos a tener diferentes programadores trabajando paralelamente en etiquetas distintas, vamos a crear un espacio de trabajo para cada uno y los identificaremos con una descripción.
Editando. Aquí encontramos 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 en comparación con contenedor que está publicado.
Historial de actividades. Aquí se registra cada cambio en el espacio de trabajo.
Menú lateral. Nos deja acceder a las primordiales secciones de GTM. También tenemos un buscador para encontrar elementos con más rapidez, y la opción de navegar entre los diferentes espacios de trabajo.
Código de contenedor.Al hacer clic vamos a acceder al código de instalación de GTM.
Vista previa. Utilizaremos esta opción ya 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 marcha 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 Analytics en Wordpress con Google Tag Manager
- Pulsa en
Nueva Etiqueta. Llámala Universal Analytics. Haz click en «Configuración de Etiqueta» y escoge Google 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 necesitar este ID y lo encontrarás en tu cuenta de Analytics, haciendo clic en Dirigir (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 click en
Activación, escoge All Pages y guarda. El resultado final debe ser como este. - Para
verificar la etiqueta, activa la vista anterior 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 perceptible).
¿Hemos terminado ya?
Aunque Analytics ya funciona en tu sitio, aún queda trabajo por hacer. A continuación vamos a ver cómo amoldar Analytics al Reglamento General de Protección de Datos (el famoso RGPD, o bien GRPD en inglés).
Adaptar Google Analytics al RGPD
Para usar Analytics con todas y cada una de las de la ley (y jamás mejor dicho) hay que hacer unos ajustes en la herramienta y en nuestra web.
En esta guía de Google Tag Mánager te comparto 2 ajustes, pero 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 (PC, móvil inteligente, tablet…) conectado a Internet. Tiene un formato afín a este: 78.232.249.190. Cuando un usuario llega a tu web, Google Analytics compendia su IP (si bien no la muestra directamente en tus informes).
Pues bien, desde el 25 de mayo de
las direcciones IP se consideran datos personales. Siendo secuencias numéricas únicas pueden identificar no solo un dispositivo, sino indirectamente a quien lo emplea. O por lo menos eso plantea la ley. En cualquier caso, un administrador web cuya herramienta de analítica web recopilase estos datos personales tendría que cambiar la forma en que se insertan sus cookies.
Esto puede ser un cefalea, pero podemos evitarlo y ser 100 por cien legales anonimizando las direcciones IP que recopila Analytics. Esto es tan fácil
como configurar la herramienta para que suprima la última una parte de cada dirección IP que compendia.
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 webmaster, te ahorras el trabajo de cambiar la forma en que insertas tus cookies.
Vamos a ver cómo hacer este ajuste.
- Dentro de Google Tag Manager, utiliza 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 aplicases en Google Analytics ya no funcionarán.
Ajuste 2 – Introducir las cookies de Analytics cuando el usuario da permiso
Este ajuste consiste en no insertar las cookies de Analytics hasta el momento en que el usuario acepte el aviso de cookies. Aguardamos hasta conseguir su permiso explícito. Y si no nos lo da… no le introducimos las cookies. Por tanto, su sesión no existe y no obtenemos ningún dato. Es duro, pero es lo que marca la ley.
Veamos cómo se hace pasito a pasito.
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 Analytics hasta el momento en que el usuario acepta.
Una vez activado, configurarlo es realmente sencillo. Te dejo una captura de pantalla.
Elegimos enseñar un botón de rechazar y que
la página se recargue cuando consigamos 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 vamos 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 llamaremos WPCA Consent Igual a 1. Hacemos clic en el círculo gris para editar el activador y de la lista escogimos Página vista > Algunas páginas vistas. En el desplegable seleccionamos wpca_consent marcando «Es igual a» y en la casilla escribimos 1. Esta es la cookie que se nos introduce cuando aceptamos el aviso.
En último lugar vamos a la
Etiqueta de Universal Analyticsy, en la caja Activación, hacemos clic en el icono de lápiz. Borramos el activador «All Pages» haciendo click en -. Pulsamos para añadir un nuevo activador y escogemos WPCA Consent Igual a 1. Ya puedes utilizar 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 bien rechaza el aviso.
Después hemos transformado esa variable en un activador: hemos dicho que «algo pase» cuando la cookie wpca_consent tenga el valor 1 (sucede al admitir el aviso).
Por último, hemos editado la etiqueta de Página Vista de Google 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 alterar en tu página de política de cookies.
- Actualiza el texto para
avisar a tus usuarios de las nuevas cookiesque inserta tu lugar web:
- wpca_consent caduca según la valía que hayas configurado en el complemento y sirve para rememorar 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.
- Inserta en algún sitio el shortcode para producir un
botón de anular 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 plugin y sirve para rememorar 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 peticiones.
Recuerda que para adaptar tu sitio al RGPD debes cumplir con más requisitos, como adaptar los textos legales.
Ya que te has tomado la molestia de implementar Analytics correcta y legalmente, ¿por qué no exprimir al máximo la herramienta? Pásate por mi.
Soporte oficial de Google Tag Manager
Si aparecen problemas, consulta estas fuentes:
Implementar etiquetas de otros servicios
GTM es compatible con todo tipo de etiquetas: las únicas limitaciones serán nuestros conocimientos de programación. En estos enlaces encontrarás las instrucciones oficiales para configurar en tu Google Tag Manager 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 Manager pues vas a ponerte (o bien ya te has puesto) manos a la obra con esta herramienta Pero sobre todo, espero que te hayas hecho una idea de
las posibilidades que puede brindar a tus clientes.
No hay disculpas para no integrarlo en tu sitio web personaly toquetear un tanto (¡siempre utilizando Vista Anterior!). Te invito a 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 transforma en algo revolucionario.
Consultor de comunicación y marketing digital. Surfeo Internet desde mil novecientos noventa y nueve.
¿Te gusta lo que has leído?
Apúntate al newsletter y recibe mis mejores contenidos sobre marketing digital y comunicación
Responsable: José Luis Culebras Pérez. Finalidad: registrar al usuario en el newsletter y enviarle por correo electrónico novedades y contenidos sobre las temáticas de este sitio web. Legitimación: consentimiento del interesado. Si no admite la política de privacidad, el usuario no será dado de alta. compañia de marketing : MailChimp (The Rocket Science Group). Derechos: el usuario puede darse de baja en cualquier correo usando el link situado al pie, o ejercer sus derechos de acceso, rectificación, limitación o bien supresión de datos en , o presentar una reclamación frente a una autoridad de control.
Muy buen contenido, estoy empezando a utilizar 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. empresa desarrollo de aplicaciones multiplataforma
Me guardo tu página web para estar al loro 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 excepcional tutorial.
Si es posible, me gustaría consultarte dos dudas. Espero disculpes si pecan de demasiado simples o bien 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 las páginas del sitio web. 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 ejemplo, las entradas de un weblog?
2. En mi web instalé el ID de Analytics no manualmente, sino más bien con el complemento GA Google Analytics. ¿He de borrar ese complemento, ahora que ese ID pasa a alojarse directamente en GTM?
Muchas gracias de nuevo por tu valiosa información. Enhorabuena por la profesionalidad, claridad y calidad de tu sitio web.
Saludos.
¡Hola Guillermo!
Cuando empiezas con WordPress, todo son dudas. Pero ya verás que es una plataforma muy sencilla y en poco tiempo te harás con ella.
Paso a responder tus preguntas.
1- A fin de que GTM funcione correctamente en un sitio Wordpress, su código debe estar insertado en todas las páginas. Esto es muy sencillo de conseguir, ya que WordPress genera el contenido de cada página de forma dinámica, extrayendo información de una serie de ficheros. Si introduces el código de GTM en uno de esos archivos, el header.php, ya tendrás Google Tag Mánager funcionando en todo tu sitio web (incluyendo todas las páginas y entradas).
2- En tanto que vas a gestionar Analytics a través de Tag Mánager, desactiva el plugin que empleabas. Cuando hayas verificado que Analytics funciona bien a través de 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 apacible.
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 complemento 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 problema.
Una pregunta, si no es mucho pedir, me gustaría saber por qué en el activador marcas ciertas páginas vistas en lugar de todas las páginas vistas.
De nuevo enhorabuena, has sido de gran ayuda 🙂
¡Gracias por dejar un comentario, Sergio! Me alegro de que la guía te haya servido para probar con otros plugins. 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 toda circunstancia y no sirve de nada todo el trabajo anterior.
RESPONSABLE: José Luis Culebras Pérez.FINALIDAD PRINCIPAL: gestionar 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, corregir y eliminar los datos.
Categories: None
Post a Comment
Oops!
The words you entered did not match the given text. Please try again.
Oops!
Oops, you forgot something.