Mi Posicionamiento Web
Este blog tan chulo usa cookies de terceros. Si continuas navegando... ¡es porque las quieres todas para ti! Siempre puedes cambiar la configuración, desactivarlas o tener más información

Google Tag Manager paso a paso

Actualizado el
124 Comentarios

Voy a explicarte cómo puedes instalar Google Tag Manager en WordPress y en cualquier web.

Y para eso nada mejor que veas cómo lo he hecho yo mismo paso a paso en este blog, o lo que es lo mismo, con el mimo y el cariño que ya imaginarás que le he puesto para dejarlo todo bien configuradito y funcionando. 😊

¡Vamos al lío!

 

La verdad es que me arrepiento de no haber publicado este tutorial mucho antes porque, además de ayudar a otros, me hubiera servido para instalar Google Tag Manager en mi blog hace tiempo y medir mejor las estratetgias SEO que aplico al blog…

Y es que ahora que lo tengo puedo decirte que es simple y llanamente BESTIAL

 

Tranqui que ahora entenderás por qué. Como dijo Jack el destripador, vayamos por partes…

 

 

🏷️ ¿Qué es Google Tag Manager?

GTM o el Administrador de Etiquetas de Google es un sistema sencillo y gratuito basado en «etiquetas» o tags con las que puedes medir y analizar todo lo que pasa en tu web o blog (incluso en su versión AMP) o en tu aplicación de móvil.

 

Todas estas «etiquetas» se añaden a lo que se llama el «contenedor» o container, un fragmento de código HTML/JavaScript que será el único que tendrás que añadir en tu web, blog o App.

 

Por ejemplo

En mi caso, desde la web de Google Tag Manager he creado un contenedor llamado miposicionamientoweb.es (sí, soy muy original, qué pasa) y solo he tenido que añadir a este blog el código HTML/JavaScript de ese contenedor.

 

Luego directamente desde la web de Google Tag Manager he añadido a mi contenedor etiquetas para, por ejemplo, ver en Google Analytics el tráfico del blog, saber en qué enlaces se hace clic, cuándo se hace scroll, hacer tests A/B, etc.

 

Y repito, no he tenido que añadir nada más en mi blog, porque el contenedor ya se encarga automáticamente de meter el código que haga falta para que funcionen todas esas etiquetas.

¡No me digas que no mola! 😁

 

🏷️ ¿Para qué sirve Google Tag Manager?

Pues Google Tag Manager sirve para conectar una web o una app con herramientas de todo tipo de forma rápida y sencilla gracias a su sistema de etiquetas.

 

Y estas herramientas pueden ser de: analítica web, medición de campañas de marketing digital (anuncios patrocinados, remarketing…), optimización de la experiencia de usuario, mapas de calor, tests A/B, y un largo etc.

 

Estos son solo algunos ejemplos de todas las herramientas que puedes usar con etiquetas a través de Google Tag Manager:

Google Analytics: herramienta de analítica web (la que he conectado en GTM para este blog y que voy a explicarte cómo paso a paso)

Google AdWords: herramienta para lanzar campañas de anuncios patrocinados en búsquedas de Google (SEM), anuncios de display, de vídeo, de aplicaciones móviles, etc.

➤ DoubleClick by Google: herramienta avanzada y muy completa para gestionar campañas de publicidad digital de todo tipo y al detalle.

➤ Google Optimize: herramienta para la optimización de la experiencia de usuario con testing A/B, experimentos, etc. (¡Esta tengo que probarla!)

➤ Etc., etc…

 

 

Ya te puedes imaginar que este sistema de etiqueta facilita las cosas una barbaridad, porque no tienes que andar metiendo un montón de códigos (HTML, JavaScript, JSON, etc.) cada vez que quieras usar alguna de estas herramientas en tu web.

 

Y si eres de los que además necesita que sea un desarrollador el que meta todos estos códigos, imagínate ahora que solo tendrá que meter el código del contenedor y listo. 🙌

 

Te explico todo esto porque soy de los que piensa que para saber bien cómo se usa Google Tag Manager, primero hay que entender qué es y para qué sirve.

Y esto se puede extrapolar a casi cualquier cosa; no te pase como a mi padre que un día me vino con un lector de ebooks y me dijo que aquello no funcionaba bien, que la tele no cambiaba de canal…

 

https://media.giphy.com/media/20MknrK6ZrvY3dwua5/giphy.mp4

 

Y ahora que ya sabemos qué es y para qué sirve, ¡vamos al lío con el cómo se usa! 😃

 

💻 Cómo instalar Google Tag Manager en WordPress

En verdad estos pasos te valen casi para cualquier tipo de web o plataforma que uses porque simplemente se trata de meter un fragmento de código dentro del código de tu web, sea del tipo que sea.

Pero he querido centrarme en WordPress porque es lo que uso yo en este blog, así de sencillo. 😊

 

1)  Lo primero que tenemos que hacer es entrar en la web de Google Tag Manager y loguearnos con nuestro correo y contraseña de Google.

Haz clic en el botón Siguiente.

 

 

2)  Si todavía no tienes ninguna cuenta creada, lo primero que te pedirá es añadir una cuenta nueva con un nombre y un país.

Haz clic en el botón Continuar.

 

 

3)  Ahora toca configurar el «contenedor» que vas a añadir a tu web.

Ponle de nombre el dominio de tu web y elige dónde vas a instalar el contenedor.

Haz clic en el botón Crear.

 

 

En mi caso tengo un contenedor para este blog y otro más también para este blog pero solo para los posts en versión AMP (más adelante te explico cómo crearlo también):

 

 

4)  Ahora te saldrá una ventana con las condiciones de uso y servicio de Google Tag Manager.

Solo tienes que seleccionar que las aceptas y hacer clic en el botón .

 

 

5)  El siguiente paso es añadir en tu web el código que te ha generado para tu contenedor. Y te recuerdo que este será el único código que tengas que añadir. 😃

 

Por un lado te da un fragmento de código a) que tienes que añadir después de la etiqueta HTML <head> de las páginas de tu sitio web o blog. Y lo mismo con el otro fragmento de código b) que te da, pero este le tienes que añadir justo después de la etiqueta <body>.

 

 

Aquí puedes elegir entre 2 opciones principales para meter estos fragmentos de código en tu web y más concretamente en WordPress:

 

i) Manualmente (opción «complicada»)

Puede ser «complicada» si no tienes mucha idea de código o no sabes muy bien dónde puedes encontrar las etiquetas <head> y <body> en la plantilla (theme) que estés usando en tu WordPress.

 

Lo «normal» es que estas etiquetas estén en el fichero /wp-content/themes/<nombre-del-theme-que-uses>/header.php, pero en mi caso que por ejemplo uso Genesis framework + Metro Pro (te dejo mi enlace de afiliado por si te mola) ya te digo que no se encuentran en ese fichero…

 

Y para editar el header.php (guárdate antes una copia del fichero por si acaso) y añadir los fragmentos de código, puedes hacerlo de 3 formas:

 

  1. Con algún cliente FTP como FileZila para conectar con tu hosting y así editar el fichero desde tu PC.
  2. Con el explorador de ficheros del panel de control de tu hosting (normalmente es un cPanel).
  3. Con el editor de ficheros que trae WordPress ya desde el menú Apariencia > Editor. Ahí eliges tu plantilla y el fichero header.php para modificarlo.

 

 

ii) Con plugins (opción «sencilla»)

Sin duda lo más sencillo es usar algún plugin de WordPress que te añade automáticamente los fragmentos de código de Google Tag Manager donde corresponda.

 

Para eso voy a recomendarte 2 plugins según sea tu caso:

 

  1. Si usas cualquier plantilla que NO sea Genesis: puedes usar este plugin. Solo tienes que meterle el ID del contenedor de Google Tag Manager (puedes encontrarlo en el fragmento de código como verás en la imagen) y seleccionar dónde quieres que meta el código.

 

Por defecto lo mete en el footer, es decir, al final de la etiqueta <body> y Google recomienda que sea justo al principio, pero es la única opción si no quieres meterlo manualmente… ☹️

 

 

  1. Si usas una plantilla de Genesis: usa este plugin (el que uso yo). Lo tengo desde que me instalé Genesis y es una maravilla porque me permite meter distintos códigos por diferentes partes del blog (lo que llama como hooks o ganchos) para personalizarlo a mi gusto y sin tener que andar tocando directamente los ficheros de la plantilla.

 

Solo tienes que meter el fragmento de código a) para la etiqueta <head> en el gancho genesis_doctype, y el fragmento de código b) para la etiqueta <body> en el gancho genesis_before. Guarda los cambios, ¡y ya está! 😃

 

 

Personalmente, si no tuviera Genesis, lo haría de la forma manual. Pero lo hagas como lo hagas, asegúrate de que aparecen los fragmentos en el código de tus páginas:

 

 

Cuando lo tengas, vuelve a la página web de Google Tag Manager donde lo habías dejado y haz clic en el botón Aceptar.

 

Lo siguiente que verás es sencillamente el área de trabajo del contenedor en tu cuenta en Google Tag Manager. Fíjate en el recuadro verde de la derecha que pone Contenedor no publicado; ese es el siguiente paso. 😉

 

 

6)  Pues eso, que ya solo nos queda «publicar el contenedor», porque todo lo que hagas o modifiques en esta área de trabajo no se aplicará en tu web hasta que no publiques una versión de los cambios.

 

Para eso tienes que hacer clic arriba a la derecha en el botón Enviar, y se te abrirá una ventana donde puedes poner el nombre a esa versión que vas a publicar y una descripción (si quieres).

Después haz clic en el botón Publicar (tarda unos segundos nada más) y cuando esté todo publicado en tu web te mostrará un resumen.

 

 

¡Y ya tienes Google Tag Manager instalado! 😃

 

🔹 Cómo instalar Google Analytics con Google Tag Manager

Google Analytics suele ser la primera herramienta que «conectamos» la mayoría de los mortales cuando empezamos a usar Google Tag Manager por primera vez.

Es la primera etiqueta que se suele añadir al contenedor, así que voy a explicarte cómo lo he hecho en este blog paso a paso.

 

1)  Desde el área de trabajo de Google Tag Manager, arriba a la izquierda haz clic en Nueva etiqueta o Añadir nueva etiqueta (es lo mismo).

 

 

2)  Aparecerá una ventana donde puedes poner nombre a tu nueva etiqueta. En mi caso me he vuelto loco de creatividad y la he llamado Google Analytics…

Haz clic en el recuadro de Configuración de la etiqueta.

 

 

3)  Aquí veras todos los tipos de etiquetas de las diferentes herramientas que puedes conectar con tu contenedor.

 

Haz clic en Universal Analytics, que es la más actual de Google Analytics.

 

 

Para saber si estás usando Universal Analytics en tu cuenta de Google Analytics (cosa que te recomiendo), lo mejor es que vayas al menú Administrar de Google Analytics y entres en el apartado Propiedad > Información de seguimiento > Código de seguimiento.

 

 

Aquí verás tu ID de seguimiento, y si empieza por UA es que ya usas Universal Analytics. Si no, en el apartado de Propiedad verás una opción para actualizarte a Universal Analytics.

 

 

4)  La configuración de esta etiqueta es muy sencilla. Solo tienes que elegir Página vista como Tipo de seguimiento y elegir la variable de tu configuración de Google Analytics.

 

 

Como aún no está creada, selecciona Nueva variable…

 

5)  Se abrirá una ventana para crear una nueva variable donde se guardará tu ID de seguimiento de Google Analytics, y así podrás usar esta variable en cualquier otra etiqueta de GTM

 

 

Mete tu ID y en Dominio de la cookie puedes dejar el valor auto.

 

Importante

Si estás interesado en recoger las IPs de tus visitas de forma anónima (porque según la RGPD la IP es un dato personal y requiere que tomes ciertas medidas de seguridad), en esta ventana donde estás configurando la variable haz clic en Más opciones > Campos para configurar y añade el campo anonymizelp y el valor true.

 

 

Haz clic en el botón Guardar.

 

6)  Ahora te pedirá que pongas un nombre a esta variable. Una vez más sale mi vena creativa y la llamo Configuración de Google Analytics… 😃

 

 

Haz clic en el botón Guardar.

 

7)  Ya tienes configurado «lo que hará» la etiqueta, que es enviar a Google Analytics todos los datos de las visitas que recibe tu web o blog. Ahora toca configurar el activador, es decir, «cuándo» se enviará esta información.

 

 

Haz clic en el recuadro de Activación.

 

8)  Aquí verás que por defecto ya hay un activador creado que es del tipo de Página vista, es decir, que se activa cuando se ve o visita una página.

 

En este tipo de activadores puedes filtrar para qué páginas en concreto quieres que se active, pero en este caso se llama All Pages porque está configurado para activarse en todas las páginas que se visiten.

 

 

Selecciona el activador All Pages.

 

9)  Ya tienes configurada la etiqueta para Google Analytics.

No era tan difícil, ¿verdad? 😉

 

 

Haz clic en el botón de Guardar.

 

10)  Recuerda que esta etiqueta (y cualquier otro cambio que hagas en tu área de trabajo) no se aplicará en tu web hasta que no publiques una nueva versión del contenedor.

 

Peeeero, antes de publicar una nueva versión sería interesante ver si la etiqueta funciona, ¿verdad? Pues agárrate a la silla porque se puede hacer gracias a la opción de Vista Previa que tiene Google Tag Manager.

 

Vista Previa de Google Tag Manager

Desde tu área de trabajo, arriba a la derecha si haces clic en el botón de Vista Previa entrarás a un modo con el que podrás navegar por tu web como si hubieras aplicado ya los cambios en tu contenedor, y así probar que las etiquetas funcionan bien antes de publicar.

 

 

Ahora si entras a tu web desde otra pestaña (en el mismo navegador donde estés usando Google Tag Manager) verás que te aparece en la parte inferior un «panel de depuración» (que solo podrás ver tú).

A la izquierda del panel tienes los eventos de tu web y a la derecha las etiquetas «disparadas» por tus activadores a raíz de esos eventos.

 

 

Aquí por ejemplo si seleccionas el evento Page View verías las etiquetas disparadas por ese evento, que en este caso ha sido la etiqueta de Google Analytics que acabas de crear.

Mola ¿eh? 😎

 

Pues cuando confirmes que todo funciona bien, no tienes más que volver al área de trabajo de Google Tag Manager y hacer clic en Salir del modo de vista previa.

 

 

Ahora sí, ya puedes publicar una nueva versión con los cambios del contenedor.

 

Recuerda que simplemente es hacer clic en el botón Enviar que tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción (si quieres) y luego haces clic en el botón Publicar.

 

¡Y ya tienes Google Analytics instalado con Google Tag Manager! 😃

 

Si ya tenías algún código en tu sitio para registrar las visitas en Google Analytics, recuerda quitarlo para que no te cuente el doble de visitas.

 

Puedes comprobar si Google Analytics registra las visitas en tiempo real

 

🔹 Registrar clics en enlaces salientes de afiliados

Ahora que ya tienes Google Analytics registrando las visitas de tu web o blog, vamos a aprovechar para saber los clics que hacen tus visitas en los enlaces de afiliados que tengas (algo que en mi blog es «crucial» porque principalmente vivo de esos ingresos).

Viene genial para saber por dónde y hacia dónde «convierten» esas visitas.  😁

 

1)  Lo primero que hay que hacer es activar la variable Click URL, para saber la URL del enlace en el que se hará el clic.

 

Es muy sencillo, en esta imagen vas a ver los 4 mini-pasos que tienes que dar para activarla:

  1. Ves al apartado Variables.
  2. Haz clic en el botón Configurar.
  3. Elige Click URL en la ventana de Configurar las variables integradas.
  4. Ya está activada y la verás en el panel de Variables integradas.

 

 

2)  Ahora hay que crear otra variable con los tipos de enlaces de afiliado que puedas tener en tu web o blog. Esta variable la usaremos luego como filtro para que al registrar los clics solo tenga en cuenta estos tipos de enlace.

 

Haz clic en Variables, y en el apartado Variables definidas por el usuario haz clic en Nueva.

 

 

Ponle el nombre que quieras, yo le he puesto Tabla de enlaces de afiliado. 😀

 

Haz clic en el recuadro Configuración de la variable y elije el tipo Utilidades > Tabla RegEx.

 

 

Y en esta pantalla de Configuración de la variable que verás ahora es donde está la «chicha»:

 

 

Importante

Por si no estás muy familiarizado con el tema de las expresiones regulares, verás que en la imagen he añadido algunas que quizá te puedan servir:

➤ La 1ª fila es la que uso yo (excepto en los enlaces de Amazon Afiliados), porque mis enlaces de afiliado son «internos» del tipo miposicionamientoweb.es/visitar/<lo que sea> que luego te redireccionan al verdadero enlace saliente de afiliado; esto es así porque uso el plugin Pretty Links que me sirve precisamente para facilitar este tipo de cosas, para ponerles nofollow (cosa que recomienda Google), agruparlos por categorías, estadísticas de clics, etc.

➤ La 2ª fila es el clásico enlace acortado de Amazon Afiliados, con lo que cualquier enlace que tenga amzn.to/ lo contará como de afiliado.

➤ La 3ª fila sirve para el enlace «largo» que te da Amazon Afiliados, y tendrá en cuenta todos los enlaces del tipo amazon.es/<lo que sea>tag=miposiweb-21. Aquí tendrás que cambiar mi tag «miposiweb-21» por el que uses tú en Amazon Afiliados.

➤ Las filas 4ª y 5ª sirven para que cuente como enlace de afiliado aquellas URLs que tengan variables del tipo «ref=» y «aff=«, que son variables que suelen añadirse al final de los enlaces de afiliado para indicar tu número de afiliado.

 

En definitiva, esta tabla lo que hace es devolver true solo si la variable Click URL coincide con alguno de estos patrones (si es un enlace de afiliado), y si no, devuelve false. 😉

 

3)  Ahora sí, ves a Etiquetas o desde el área de trabajo de Google Tag Manager arriba a la izquierda, haz clic en Nueva etiqueta o Añadir nueva etiqueta (es lo mismo).

 

 

4)  Ponle nombre a la nueva etiqueta, que en mi caso es (tachán, tachán…) Clic enlace saliente – afiliado. 😁

 

Cuando hagas clic en el recuadro de Configuración de la etiqueta, elige la Universal Analytics. En este caso selecciona Evento como Tipo de seguimiento, porque es un evento lo que va a lanzar esta etiqueta para que se registre en tu Google Analytics.

 

El resto de la configuración:

 

 

5)  Ok, pues ahora haz clic en el recuadro de Activación y elige el activador Clic – Solo enlaces. Y ponle el nombre que quieras, que en mi caso es Clic en enlace de afiliado (¡chúpate esa originalidad!).

 

Los ajustes que tienes que configurar para el activador:

 

 

 

Y ya tienes configurada toda la etiqueta para registrar clics en enlaces salientes de afiliado. Créeme, parece más complicado de lo que es en verdad. 😉

Haz clic en el botón de Guardar.

 

6)  Ya sabes lo que toca ahora, publicar una nueva versión con los cambios hechos en el contenedor.

 

Vista Previa

Recuerda que antes de publicar los cambios puedes usar la Vista Previa para ver si efectivamente la etiqueta funciona y registra los clics en enlaces salientes de afiliado, que no se activa haciendo clic en enlaces internos, etc.

 

En esta imagen por ejemplo ves que al hacer clic en el enlace de afiliado, en la columna de eventos del panel de depuración aparece el evento gtm.linkClick y en la derecha indica que se ha disparado la etiqueta Clic enlace saliente – afiliado.

 

 

Además, si haces clic sobre el recuadro de esa etiqueta te muestra sus propiedades con la información del evento que enviará a Google Analytics: la categoría, la URL del enlace, la página desde la que se hace el clic, etc.

¡Es bestial! 😊

 

 

Pues ale, si todo está bien ya puedes publicar la nueva versión con los cambios del contenedor.

 

Ya sabes, haces clic en el botón Enviar que tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y luego haces clic en el botón Publicar.

 

¡Y ya estarás registrando los clics en enlaces salientes de afiliado! 😃

 

Puedes comprobar que funcionan las etiquetas en Google Analytics en tiempo real

 

🔹 Registrar clics en enlaces salientes NO de afiliados

Otra de las cosas interesantes que puedes registrar también son los clics que se hacen en cualquiera de tus enlaces salientes y que NO sean de afiliados, que viene genial para saber por dónde y hacia dónde «se escapan» esas visitas si no es para «convertir».  😁

 

1)  Antes de crear esta etiqueta, necesitas tener hechos los 2 primeros pasos del apartado anterior (luego entenderás por qué):

  1. Activar la variable Click URL para saber la URL del enlace en el que se hará el clic (paso 1 del apartado anterior).
  2. Crear una variable con una tabla RegEx con los tipos de enlaces de afiliado que tienes (paso 2 del apartado anterior).

 

👀 Ojo, si no tienes enlaces de afiliado, el 2º paso no te hace falta, claro.

 

2)  Desde el menú Etiquetas, o desde el área de trabajo de Google Tag Manager arriba a la izquierda, haz clic en Nueva etiqueta o Añadir nueva etiqueta (es lo mismo).

 

 

3)  Ponle nombre a la nueva etiqueta, que en mi caso es Clic enlace saliente – NO afiliado.

Lo sé… 🤯

 

Cuando hagas clic en el recuadro de Configuración de la etiqueta, elige la Universal Analytics. En este caso selecciona Evento como Tipo de seguimiento, porque es un evento lo que va a lanzar esta etiqueta para que se registre en tu Google Analytics.

 

El resto de la configuración:

 

 

4)  Ok, haz clic en el recuadro de Activación y elige el activador Clic – Solo enlaces. Ponle también el nombre que te apetezca; yo lo he llamado Clic en enlace NO de afiliado para diferenciarlo del activador del apartado anterior.

 

Los ajustes que tienes que configurar para el activador:

 

 

 

Y ya tienes configurada toda la etiqueta para registrar clics en enlaces salientes. Sencillo, ¿no? 😉

Haz clic en el botón de Guardar.

 

5)  Y ahora lo que toca es publicar una nueva versión con los cambios hechos en el contenedor.

 

Vista Previa

Recuerda que antes de publicar los cambios puedes usar la Vista Previa para ver si efectivamente la etiqueta funciona y registra los clics en enlaces salientes, que no se activa haciendo clic en enlaces internos, que tampoco se activa en enlaces salientes de afiliado, etc.

 

En esta imagen por ejemplo ves que al hacer clic en el enlace saliente, en la columna de eventos del panel de depuración aparece el evento gtm.linkClick y en la derecha indica que se ha disparado la etiqueta Clic enlace saliente – NO afiliado.

 

 

Además, si haces clic sobre el recuadro de esa etiqueta te muestra sus propiedades con la información del evento que enviará a Google Analytics: la categoría, la URL del enlace, la página desde la que se hace el clic, etc.

¡Cómo me mola! 😊

 

 

Pues ya está, ahora sí que sí puedes publicar la nueva versión con los cambios del contenedor.

 

Ya sabes, haces clic en el botón Enviar que tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y luego haces clic en el botón Publicar.

 

¡Y ya estarás registrando los clics en enlaces salientes! 😃

 

Puedes comprobar que funcionan las etiquetas en Google Analytics en tiempo real

 

🔹 Ajustar la tasa de rebote

Ya te manejas por Google Tag Manager como si lo hubieras parido, ¿verdad? 😁

Bueno pues te voy a enseñar las etiquetas que he instalado también para ajustar la tasa de rebote en mi blog a mi gusto (aquí te explico por qué hago esto).

 

En este caso la idea es que se lance un evento a Google Analytics cuando el usuario haga scroll después de 10 segundos que lleva visitando esa página del blog, porque para mí eso ya no sería un «rebote» tal y como lo entiende Google Analytics.

¡Vamos al lío!

 

1)  Lo primero es añadir una etiqueta nueva (ves a Etiquetas o desde el área de trabajo haz clic en Nueva etiqueta) y que sea de tipo HTML personalizado.

 

 

Esta etiqueta se encargará ella solita de añadir en tu sitio un código de JavaScript (¡sin que lo tengas que añadir tú directamente!) que controlará cuándo hace scroll el usuario después de 10 segundos, para luego notificar al Google Tag Manager.

 

 

Este es el código que tienes que añadir dentro del apartado de HTML:

<script>
var listenerScrollGA = function() {
window.removeEventListener(‘scroll’, listenerScrollGA); // solo trackea el evento una vez
window.dataLayer.push({‘event’:’Timeout y Scroll‘, ‘eventCategory’:’Ajuste Tasa de Rebote GTM’, ‘eventAction’: ‘Scroll despues 10 sg GTM’});
}

setTimeout(function() {
window.addEventListener(‘scroll’, listenerScrollGA);
}, 10000);
</script>

 

La parte en azul es lo primero que se ejecuta, que es esperar 10.000 milisegundos (10 segundos), y cuando pasan esos 10 segundos se queda esperando a que el usuario haga scroll en algún momento.

Toda la parte en verde se ejecuta cuando el usuario ha hecho scroll. Lo primero que hace es dejar de esperar a que el usuario haga scroll más veces (para que el código solo se ejecute 1 vez).

Y concretamente la parte en verde con negrita es la que «notifica» al Google Tag Manager con un evento de que el usuario hizo scroll después de 10 segundos.

Te señalo el nombre del evento en naranja con negrita porque más adelante te hará falta este mismo nombre.

 

2)  Ahora toca crear el activador que hará que se añada este código HTML en tu web o blog. Así que dale al recuadro de Activación, dale al botón + para añadir un nuevo activador, haz clic en el recuadro de Configuración del activador y elige el de tipo Página vista – La ventana se ha cargado.

 

 

De esta forma el código JavaScript se añadirá en tu sitio cuando se haya cargado la página por completo, y así empezará a contar los 10 segundos desde ese momento y no antes, para que la tasa de rebote sea más «real».

 

Haz clic en Guardar el activador (ponle el nombre que quieras como Ventana cargada por completo) y en Guardar la etiqueta (que yo he llamado Timeout y Scroll para mejora de rebote).

 

3)  Ahora añade otra Nueva etiqueta de tipo Universal Analytics que será con la que «avisaremos» a Google Analytics de que se ha lanzado el evento Timeout y Scroll (paso 1).

La he llamado Envía evento Timeout y Scroll. 😃

 

Configuración:

 

 

5)  Vale, pues ahora haz clic en el recuadro de Activación, dale al botón + para añadir un nuevo activador, haz clic en el recuadro de Configuración del activador y elige el de tipo Otros – Evento personalizado.

 

 

Ponle el nombre que quieras, que en mi caso es Evento personalizado de Timeout y Scroll.

 

Los ajustes del activador son muy, muy sencillos:

 

 

Y ya tienes configurada toda la etiqueta para registrar en Google Analytics los eventos que tú mismo lanzas en tu sitio cuando un usuario hace scroll después de 10 segundos. ¡¿A que mola?! 😉

 

Haz clic en Guardar el activador y después en Guardar la etiqueta.

 

6)  Y el último paso ya sabes cuál es, publicar una nueva versión con los cambios hechos en el contenedor.

 

Vista Previa

Recuerda que antes de publicar los cambios puedes usar la Vista Previa para ver si efectivamente la etiqueta funciona y lanza y registra el evento de scroll después del timeout, si no lo registra antes de los primeros 10 segundos, etc.

 

 

En esta imagen por ejemplo ves que cuando se carga la ventana por completo (evento Window Loaded) se «dispara» la etiqueta que añade el código HTML/JavaScript que controla cuándo hace scroll el usuario después de esperar 10 segundos.

 

Cuando eso ocurre y Google Tag Manager detecta el evento Timeout y Scroll lanzado por ese código, entonces «dispara» la otra etiqueta para que se registre el evento en Google Analytics y que esa visita ya no cuente como un «rebote».

 

Chachi, ¿verdad? 😊

 

¡Listo! Si has comprobado que todo funciona bien ya puedes publicar la nueva versión con los cambios del contenedor.

 

Ya sabes, haces clic en el botón Enviar que tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y luego haces clic en el botón Publicar.

 

¡Y ya estarás ajustando la tasa de rebote de tu web o blog! 😃

 

Puedes comprobar que funcionan las etiquetas en Google Analytics en tiempo real

 

 

⚡ Cómo instalar Google Tag Manager en WordPress para AMP

El procedimiento es básicamente el mismo que con el contenedor web: crear un contenedor para AMP y pegar los fragmentos de código que genera Google Tag Manager en las etiquetas <head> y <body>. Solo que esta vez se hace en las páginas AMP.

Pero como también lo he hecho en este blog, aprovecho para explicártelo y que quede más claro. 😊

 

1)  Desde el área de trabajo de Google Tag Manager, arriba a la izquierda haz clic en la pestaña donde pone Administrador.

 

 

2)  En esta página verás 2 columnas: a la izquierda tu cuenta y a la derecha los contenedores de tu cuenta.

Pues en la de la derecha haz clic en el botón + para añadir un nuevo contenedor a tu cuenta.

 

 

3)  Al igual que cuando hiciste el contenedor web, solo tienes que ponerle un nombre y en este caso elegir que es de tipo AMP.

Haz clic en el botón Crear.

 

 

4)  Y el siguiente paso es añadir en tu web el código que te ha generado para tu contenedor AMP.

 

Por un lado te da un fragmento de código a) que tienes que añadir al final de la etiqueta HTML <head> de las páginas AMP de tu sitio web o blog. Y lo mismo con el otro fragmento de código b) que te da, pero este le tienes que añadir justo después de la etiqueta <body>.

 

 

Aquí también puedes elegir entre 2 opciones principales para meter estos fragmentos de código en tus páginas AMP y más concretamente en WordPress:

 

i) Manualmente (opción «complicada»)

Al ser manualmente, esta opción te vale tengas el plugin que tengas para tener AMP en tu WordPress (si es que usas alguno). Y lógicamente será «complicada» si no tienes mucha idea de código o no sabes muy bien dónde puedes encontrar las etiquetas <head> y <body> de tus páginas AMP.

 

Si por ejemplo usas el plugin oficial de WordPress para AMP (como en mi caso), lo «normal» es que estas etiquetas estén en el fichero /wp-content/plugins/amp/templates/single.php.

Pero ojo, porque si se actualiza luego el plugin perderías los cambios que hagas en ese fichero, así que lo suyo es que copies ese fichero y lo pegues dentro de una carpeta llamada /amp/ dentro de la carpeta de tu theme (como lo tengo yo). Es decir, editar el fichero /wp-content/themes/<nombre-del-theme-que-uses>/amp/single.php.

 

Y para editar el single.php (guárdate antes una copia del fichero por si acaso) y añadir los fragmentos de código, tal y como te explicaba con la creación del contenedor web, puedes hacerlo de 3 formas:

 

  1. Con algún cliente FTP como FileZila para conectar con tu hosting y así editar el fichero desde tu PC.
  2. Con el explorador de ficheros del panel de control de tu hosting (normalmente es un cPanel).
  3. Con el editor de ficheros que trae WordPress ya desde el menú Apariencia > Editor. Ahí eliges tu plantilla y el fichero single.php para modificarlo.

 

 

ii) Con plugins (opción «sencilla»)

Esta opción es la más sencilla, sobre todo si ya usas este otro plugin de AMP para WordPress. Como podrás ver en este post de Adrián Leira explicando cómo se configura, este plugin es mucho mejor que el «oficial», más completo y con actualizaciones constantes.

 

Desde el menú de la izquierda del escritorio de tu WordPress haz clic en AMP para acceder a las opciones del plugin. Ahí dirígete a Settings > Analytics y de todas las opciones que salen, activa la de Google Tag Manager, que está casi abajo del todo.

 

Con este GIF animado lo verás más fácil:

 

https://media.giphy.com/media/229Ft2LPcucdU6LyLY/giphy.mp4

 

Ya ves que una vez activada la opción de Google Tag Manager no tienes más que meter la ID del contenedor creado (recuerda que la puedes encontrar en el fragmento de código o en el área de trabajo de GTM), en Analytics Type  escribe googleanalytics y luego te pide la ID de seguimiento de Google Analytics.

¡Y ya está! 😊

 

Lo importante, lo hagas como lo hagas, es que te pongas bragas… No, en serio, lo importante es que los fragmentos se vean en el código de tus páginas AMP:

 

 

Cuando lo tengas, vuelve a la página web de Google Tag Manager donde lo habías dejado y haz clic en el botón Aceptar.

 

Lo siguiente que verás es el área de trabajo del contenedor AMP en tu cuenta de Google Tag Manager.

 

6)  Al igual que pasaba con el contenedor web, ahora toca «publicar» este nuevo contenedor para que se apliquen los cambios en tus páginas AMP.

 

Para eso tienes que hacer clic arriba a la derecha en el botón Enviar, y se te abrirá una ventana donde puedes definir el nombre de esa versión que vas a publicar y una descripción (esto es opcional).

Después haz clic en el botón Publicar (tarda solo unos segundos) y cuando esté todo publicado en tus páginas AMP te mostrará un resumen.

 

Ya en el área de trabajo verás a la derecha el recuadro verde con la versión de tu contenedor AMP publicada ahora mismo (que solo tiene el contenedor, sin etiquetas ni nada).

Ahí te muestra cuándo se publicó y quién lo hizo, por si has dado de alta a más usuarios para que puedan hacer cambios en ese contenedor.

 

 

¡Y ya tienes Google Tag Manager instalado para AMP! 😃

 

🔹 Cómo instalar Google Analytics con Google Tag Manager para AMP

Vas a ver que el procedimiento es básicamente el mismo que el que te he explicado para crear una etiqueta de Google Analytics en un contenedor web. De hecho, como las páginas AMP no permiten JavaScript, verás que las etiquetas y los activadores son mucho más «simples».

 

1)  Desde el área de trabajo del contenedor AMP de Google Tag Manager, arriba a la izquierda haz clic en Nueva etiqueta o Añadir nueva etiqueta (es lo mismo).

 

2)  Pon el nombre de la nueva etiqueta, que en mi caso (sorpresa, sorpresa…) la he llamado Google Analytics AMP. 😲

 

Cuando hagas clic en el recuadro de Configuración de la etiqueta verás que la etiqueta que tienes que seleccionar es la de Universal Analytics.

 

 

3)  La configuración de esta etiqueta para AMP es incluso más sencilla. Solo tienes que meter el ID de seguimiento de Google Analytics y elegir Página vista como Tipo de seguimiento.

 

Si das al botón de variables, puedes crearte una variable como he hecho yo (llamada Id de Seguimiento GA) con el valor de tu ID de seguimiento, y así ya la tienes guardada para otras etiquetas que quieras crearte.

 

 

4)  Ok, pues ahora ya solo queda que hagas clic en el recuadro de Activación y elijas el activador All Pages del tipo de Página vista, para que «salte» cuando se vea o visite cualquiera de tus páginas AMP.

 

 

Y ya tienes configurada la etiqueta para Google Analytics en AMP. ¡Lo tienes dominao! 😉

Haz clic en el botón de Guardar.

 

5)  Pues lo último que falta es publicar una nueva versión con los cambios hechos en el contenedor.

 

En este caso, si activas la opción de Vista Previa, no verás el «panel de depuración» en tus páginas AMP porque la propia estructura de AMP no lo permite, pero sí que funciona el modo de depuración.

 

Si por ejemplo usas la extensión de Google Chrome Tag Assistant y entras en alguna página AMP con el modo de Vista Previa activado, puedes ver los eventos y las etiquetas del contenedor AMP que estás editando, y no del que tengas ya publicado.

 

Tag Assistant (by Google)

En verdad esta extensión te vale también para el contenedor web, pero es mucho más necesaria con el contenedor AMP al no tener el «panel de depuración» de Google Tag Manager.

 

 

La verdad es que es muy sencillita de usar, pero por si acaso te dejo aquí el tutorial de Tag Assistant que tiene directamente Google y donde lo explican mejor, que para eso es suya. 😊

 

Y ahora sí, ya puedes publicar la nueva versión con los cambios del contenedor.

 

Recuerda, haces clic en el botón Enviar que tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción (esto es opcional) y luego haces clic en el botón Publicar.

 

¡Y ya tienes Google Analytics instalado en AMP con Google Tag Manager! 😃

 

Si ya tenías algún código en tus páginas AMP para registrar las visitas en Google Analytics, recuerda quitarlo para que no te cuente el doble de visitas.

 

Puedes comprobar si Google Analytics registra las visitas en páginas AMP en tiempo real

 

🔹 Registrar clics en enlaces salientes de afiliados para AMP

Ahora que ya tienes Google Analytics registrando las visitas de tu web o blog en AMP, aprovecharemos para saber si tus visitas hacen clic en los enlaces de afiliados que tengas (esto en mi blog es «vital» porque es de donde más genera ingresos).

 

En este caso con AMP no hay forma de saber en qué URL se hace clic exactamente (sí, lo sé, es una 💩, pero es lo que tiene AMP…). Aun así, esta etiqueta viene genial para saber las páginas AMP en las que «convierten» las visitas.  😁

 

1)  Desde el área de trabajo de Google Tag Manager arriba a la izquierda, haz clic en Nueva etiqueta o Añadir nueva etiqueta.

 

 

2)  Ponle nombre a la nueva etiqueta, que en mi caso ya ves que es Clic enlace saliente – afiliado. Ahora haz clic en el recuadro de Configuración de la etiqueta y elige la Universal Analytics.

 

Aquí mete la variable de Id de Seguimiento GA que te expliqué en el apartado anterior (paso 3), y luego selecciona Evento como Tipo de seguimiento, porque es un evento lo que va a lanzar esta etiqueta para que se registre en tu Google Analytics.

 

El resto de la configuración:

 

3)  Ok, ahora haz clic en el recuadro de Activación y elige el activador Clic. Y ponle el nombre que quieras, que en mi caso es Clic en link de afiliado (muy muy muy original…).

 

En este caso las opciones para AMP son mucho más limitadas que por ejemplo las del activador para los clic en enlaces de afiliado en el contenedor web. Aquí solo puedes usar selectores de CSS para definir cuáles son los tipos de enlaces de afiliado que tienes en tu web o blog.

 

 

Y en Este activador se activa en, elige la opción Todas las páginas (para que se active en todas las páginas AMP).

 

Importante

Por si no estás muy familiarizado con el tema de los selectores CSS, te diré que son patrones (parecidos a las expresiones regulares) que se usan para elegir elementos o etiquetas HTML.

Estos selectores en verdad se suelen usar en los ficheros CSS para cambiar el estilo a esos elementos que se «seleccionan», pero en este caso la etiqueta de AMP usa estos selectores para definir en qué elementos HTML aplicar el activador Clic.

 

Este es el selector CSS que uso yo para que seleccione 3 tipos de enlaces de afiliado que uso en mi blog (con una coma entre cada selector):

a[href*=’miposicionamientoweb.es/visitar/’], a[href*=’amzn.to/’], a[href*=’tag=miposiweb-21′]

 

➤ La 1ª parte a[href*=’miposicionamientoweb.es/visitar/’] le indica que seleccione las etiquetas HTML <a> (etiquetas de enlaces) donde el atributo href (la URL) contenga miposicionamientoweb.es/visitar. En mi caso, uso el plugin Pretty Links que me sirve para que mis enlaces de afiliado tengan el mismo patrón miposicionamientoweb.es/visitar/<lo que sea> (y luego te redireccionan al verdadero enlace saliente de afiliado), y esto ya ves que facilita mucho las cosas.

➤ La 2ª parte a[href*=’amzn.to/’] es lo mismo, pero en este caso seleccionará las etiquetas <a> donde el atributo href contenga amzn.to/. Este es el dominio de URL corta que se suele usar en Amazon Afiliados (estos no los uso con el plugin de Pretty Links).

➤ La 3ª parte a[href*=’tag=miposiweb-21′] es lo mismo, pero en este caso seleccionará las etiquetas <a> donde el atributo href contenga tag=miposiweb-21. Este lo uso para las URLs largas de Amazon Afiliados que suelen llevar el ID o «tag» del afiliado (y estos tampoco los uso con el plugin de Pretty Links). Aquí tendrás que cambiar mi tag «miposiweb-21» por el que uses tú en Amazon Afiliados.

➤ Si en tu caso usas otros enlaces de afiliado, busca si sus URLs tienen variables del tipo «ref=» y «aff=«, que son variables que suelen añadirse al final de los enlaces de afiliado para indicar tu número de afiliado. Así podrías añadir otro selector más por ejemplo del tipo a[href*=’ref=’].

 

Y ya tienes configurada toda la etiqueta para registrar clics en enlaces salientes de afiliado en tus páginas AMP. Parece más complicado de lo que es en realidad. 😉

Haz clic en el botón de Guardar.

 

6)  Pues lo que toca ahora es publicar una nueva versión con los cambios hechos en el contenedor AMP.

 

Tag Assistant (by Google)

Como te dije, no existe un panel depuración con la opción de Vista Previa para los contenedores AMP, pero con la extensión de Chrome Tag Assistant puedes comprobar que funciona la etiqueta y registra los clics en enlaces salientes de afiliado desde páginas AMP, que no se activa haciendo clic en enlaces internos, etc.

¡Te explico cómo lo he hecho yo! 😉

 

En el área de trabajo de Google Tag Manager activa la Vista Previa.

Ahora abre otra pestaña del navegador, activa el plugin haciendo clic en el icono del Tag Assistant arriba a la derecha y después en el botón Enable.

 

Después entra en una página AMP donde tengas enlaces de afiliado y haz clic en uno de eso enlaces de afiliado.

 

Si ahora haces clic en el icono del Tag Assistant para abrirlo, verás un recuadro con tu ID de seguimiento de Google Analytics. Haz clic en ese recuadro y te mostrará las etiquetas enviadas del tipo PageView y Events. Y si haces clic encima de Events, podrás ver los eventos enviados por tus etiquetas.

 

 

En la última imagen verás que arriba a la derecha tienes unas flechas para moverte por los eventos enviados. En mi caso ya ves que me muestra correctamente el evento «disparado» de Link de afiliado en AMP GTM con la ruta de la página AMP desde la que se ha hecho clic.

 

Puedes probar por ejemplo a hacer clic en otros enlaces que NO sean de afiliado para comprobar que no se lanzan más eventos. Y cuando termines, ya puedes hacer clic en el botón Disable del Tag Assistant y desactivar la Vista Previa en Google Tag Manager.

Mola, ¿eh? 😊

 

Y ahora ya sí, puedes publicar la nueva versión con todos los cambios que has hecho en el contenedor AMP.

 

Ya sabes, haces clic en el botón Enviar que tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y luego haces clic en el botón Publicar.

 

¡Y ya estarás registrando los clics en enlaces salientes de afiliado para AMP! 😃

 

Puedes comprobar que funcionan las etiquetas en Google Analytics en tiempo real

 

🔹 Registrar clics en enlaces salientes NO de afiliados para AMP

Otras de las cosas interesantes que puedes registrar también en tus páginas AMP son los clics que se hacen en cualquiera de tus enlaces salientes y que NO sean de afiliados.

 

Te recuerdo que en AMP no hay forma de saber en qué URL se hace clic exactamente (es un fastidio, sí…). Aun así, esta etiqueta viene genial para saber las páginas AMP por las que se «escapan» tus visitas.  😁

 

1)  Desde el área de trabajo de Google Tag Manager arriba a la izquierda, haz clic en Nueva etiqueta o Añadir nueva etiqueta.

 

 

2)  Ponle nombre a esta nueva etiqueta. Por ejemplo, yo la he llamado Clic enlace saliente – NO afiliado. Ahora haz clic en el recuadro de Configuración de la etiqueta y elige la Universal Analytics.

 

Mete la variable de Id de Seguimiento GA (que ya la tendrás creada de apartados anteriores), y luego selecciona Evento como Tipo de seguimiento, porque aquí también es un evento lo que va a lanzar esta etiqueta para que se registre en tu Google Analytics.

 

El resto de la configuración:

 

3)  Vale, ahora haz clic en el recuadro de Activación y elige el activador Clic. Y llámalo como quieras, que en mi caso le he puesto Clic en link NO de afiliado.

 

Como te decía, las opciones de los activadores para AMP son mucho más limitadas que por ejemplo las que puedes ver para los clic en enlaces NO de afiliado en el contenedor web. Aquí solo puedes usar selectores de CSS para definir cuáles son los enlaces salientes NO de afiliado que tienes en tu web o blog.

 

 

Y en Este activador se activa en, elige la opción Todas las páginas (para que se active en todas las páginas AMP).

 

Importante

Como te explicaba en el apartado anterior, este tipo de etiquetas de AMP usa selectores CSS para definir en qué elementos HTML se aplica el activador Clic.

 

Este es el selector CSS que uso yo para que seleccione todos los enlaces menos los que le indico como enlaces internos y los de Amazon Afiliados (en este caso es un único selector que concatena 3 selectores):

a:not([href*=’miposicionamientoweb.es’]):not([href*=’amzn.to/’]):not([href*=’tag=miposiweb-21′])

 

➤ La 1ª parte a:not([href*=’miposicionamientoweb.es’]) le indica que seleccione las etiquetas HTML <a> (etiquetas de enlaces) que no (:not) contenga miposicionamientoweb.es en su atributo href (la URL) porque esos serán enlaces salientes. En mi caso, como uso el plugin Pretty Links que me sirve para que mis enlaces de afiliado tengan el mismo patrón miposicionamientoweb.es/visitar/<lo que sea>, este selector ya los excluiría.

➤ La 2ª parte :not([href*=’amzn.to/’]) date cuenta que está pegada a la 1ª, por lo que sería como un subconjunto suyo. Es decir, que le estarías diciendo «de los enlaces salientes de la 1ª parte, selecciona solo los que cumplan también esta 2ª parte». Y aquí seleccionará las etiquetas <a> que no contengan amzn.to/en su atributo href (la URL), que son enlaces cortos de Amazon Afiliados que no uso con el plugin de Pretty Links.

➤ La 3ª parte :not([href*=’tag=miposiweb-21′]) está pegada a la 2ª, así que sería otro subconjunto más de enlaces que tendría que excluir. Y aquí seleccionará las etiquetas <a> que no contengan tag=miposiweb-21 en su atributo href (la URL), que es la variable que define al filiado y que se usa en los enlaces largos de Amazon Afiliados (y estos tampoco los uso con el plugin de Pretty Links). Aquí tendrás que cambiar mi tag «miposiweb-21» por el que uses tú en Amazon Afiliados.

➤ Si en tu caso usas otros enlaces de afiliado, busca si sus URLs tienen variables del tipo «ref=» y «aff=«, que son variables que suelen añadirse al final de los enlaces de afiliado para indicar tu número de afiliado. Así podrías añadir juntar otro selector más por ejemplo del tipo :not[href*=’ref=’].

 

Y ya tienes configurada esta etiqueta para registrar clics en enlaces salientes NO de afiliado en tus páginas AMP. Esto lo tienes chupao ya. 😉

Haz clic en el botón de Guardar.

 

6)  El siguiente paso es publicar una nueva versión con los cambios hechos en el contenedor AMP.

 

Tag Assistant (by Google)

Ya sabes que para «depurar» y probar tus etiquetas para AMP lo mejor es usar la extensión de Chrome Tag Assistant, con la que puedes ver si efectivamente funciona la etiqueta y registra los clics en enlaces salientes NO de afiliado desde páginas AMP, que no se activa haciendo clic en enlaces salientes de afiliado, etc.

 

Es lo mismo que te explicaba en el paso 6 del apartado anterior.

 

Activas la Vista Previa, habilitas el Tag Assistant en una pestaña del navegador, entras a una de tus páginas AMP donde tengas enlaces salientes NO de afiliado, haces clic en uno de ellos y compruebas si efectivamente se «dispara» el evento Link NO de afiliado en AMP GTM.

 

 

Y prueba también que haciendo clic en enlaces de afiliado no se lanzan más eventos.

Sencillo, ¿no? 😊

 

Y ya por fin puedes publicar la nueva versión con todos los cambios que has hecho en el contenedor AMP.

 

Ya sabes, haces clic en el botón Enviar que tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y luego haces clic en el botón Publicar.

 

¡Y ya estarás registrando los clics en enlaces salientes NO de afiliado para AMP! 😃

 

Puedes comprobar que funcionan las etiquetas en Google Analytics en tiempo real

 

🔹 Ajustar la tasa de rebote para AMP

Bueno, pues como ya tienes nivel Jedi en esto de crear etiquetas para AMP, voy a enseñarte las etiquetas que he instalado también en mis páginas AMP para ajustar la tasa de rebote a mi gusto (aquí te explico por qué hago esto).

 

A diferencia del contenedor web, el contenedor AMP está mucho más limitado y no permite por ejemplo crear etiquetas de HTML personalizado ni «anidar» etiquetas. Así que en este caso NO puedo hacer que se lance un evento a Google Analytics cuando el usuario haga scroll después de 10 segundos. 💩

 

Lo que sí puedo hacer es que se envíe un evento a Google Analytics cuando el usuario haga un porcentaje de scroll respecto a la altura total de la página, y que se envíe otro evento distinto para cuando pasen 20 segundos. De esta forma, el primer evento que se lance de estos 2 será el que «cancele» el rebote de la visita.

¡Al lío! 😃

 

1)  Lo primero es añadir una etiqueta nueva (ves a Etiquetas o desde el área de trabajo haz clic en Nueva etiqueta). Yo la he llamado Envío de evento Timeout mejora de rebote.

 

Ahora haz clic en el recuadro de Configuración de la etiqueta y elige la Universal Analytics.

 

Mete la variable de Id de Seguimiento GA (que ya la tendrás creada de apartados anteriores), y luego selecciona Evento como Tipo de seguimiento, porque aquí también es un evento lo que va a lanzar esta etiqueta para que se registre en tu Google Analytics.

 

El resto de la configuración:

 

 

2)  Genial, ahora haz clic en el recuadro de Activación, dale al botón + para añadir un nuevo activador, haz clic en el recuadro de Configuración del activador y elige el de tipo Temporizador.

 

Ponle el nombre que quieras, que en mi caso es Temporizador 10 segundos.

 

Los ajustes del activador son sencillísimos:

 

 

Y así ya tienes configurada la etiqueta para registrar en Google Analytics un evento cuando un usuario ha pasado 10 segundos en tu página AMP.

Mola, ¡¿eh?! 😉

 

Haz clic en Guardar el activador y después en Guardar la etiqueta.

 

3)  Ahora toca añadir una nueva etiqueta a parte (haz clic en Nueva etiqueta) para el evento de scroll. Yo la he llamado Envío de evento Scroll mejora rebote.

 

Haz clic en el recuadro de Configuración de la etiqueta y elige la Universal Analytics.

 

Aquí también tienes que meter la variable de Id de Seguimiento GA, y luego selecciona Evento como Tipo de seguimiento, que es lo que se enviará a Google Analytics cuando se active la etiqueta.

 

El resto de la configuración:

 

 

4)  Perfecto, ahora haz clic en el recuadro de Activación, dale al botón + para añadir un nuevo activador, haz clic en el recuadro de Configuración del activador y elige el de tipo Desplazamiento (que es el del scroll).

 

Ponle el nombre que quieras, que en mi caso es Scroll del 20 por ciento.

 

Los ajustes del activador son incluso más sencillos que los del temporizador:

 

 

Y así ya tienes configurada también la etiqueta para registrar en Google Analytics un evento cuando un usuario haga scroll vertical al menos el 20% del total de la página en AMP. 😃

 

Haz clic en Guardar el activador y después en Guardar la etiqueta.

 

5)  Y el último paso pues es como siempre publicar una nueva versión con los cambios hechos en el contenedor AMP.

 

Tag Assistant (by Google)

Ya sabes, para «depurar» y probar las etiquetas para AMP lo más interesante es hacerlo con Tag Assistant, y así podrás ver si funciona la etiqueta y registra los eventos de timeout y 20% de scroll por separado, si los registra en el orden correcto, etc.

 

Activas la Vista Previa, habilitas el Tag Assistant en una pestaña del navegador, entras a una de tus páginas AMP, haz mucho scroll hacia abajo, espera también al menos 10 segundos y compruebas si efectivamente se «disparan» los 2 eventos.

 

 

Y prueba también primero a esperar los 10 segundos y luego a hacer scroll, a ver si registra bien el orden en que se lanzan los eventos.

Muy fácil. 😊

 

¡Ahora sí que sí! Ya puedes publicar la nueva versión con todos los cambios que has hecho en el contenedor AMP.

 

Ya sabes, haces clic en el botón Enviar que tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y luego haces clic en el botón Publicar.

 

¡Y ya estarás ajustando la tasa de rebote de tus páginas AMP! 😃

 

Puedes comprobar que funcionan las etiquetas en Google Analytics en tiempo real

 

 

🏷️ Comprobar las etiquetas en Google Analytics en tiempo real

Como Google Analytics no te muestra en sus gráficas los datos que registre hoy tu sitio hasta que no pasen 24 horas, la mejor forma que tienes para comprobar «en vivo» si funcionan correctamente las etiquetas que acabas de publicar es usando la vista de En Tiempo Real de Google Analytics.

 

 

Aquí lo que suelo hacer yo es, primero entro en En Tiempo Real > Ubicaciones y selecciono Spain > Guadalajara, porque no suele haber visitas en tiempo real desde Guadalajara salvo las mías. 😃

Y con este filtro, ya entro en En Tiempo Real > Eventos donde voy viendo que efectivamente se registran los eventos lanzados por las etiquetas según hago clics en enlaces, etc.

 

 

Así puedes comprobar al momento que se han publicado bien los cambios en tu contenedor de Google Tag Manager. 🤗

 

🏷️ Otras etiquetas interesantes para Google Tag Manager

Hay muchos tutoriales sobre Google Tag Manager en general, pero he querido seleccionar estos que te dejo aquí porque van un paso más allá del «tutorial básico», y ahora que ya lo dominas seguro que te parecen también muy interesantes. 😉

 

 


 

¡Espero que te haya gustado! Y sobre todo, que te haya sido útil.

Ni que decir tiene que si conoces alguna otra etiqueta interesante para Google Tag Manager…

 

¡Cuéntamela! 😃