cómo instalarlo y configurarlo paso a paso
Voy a explicarte cómo puedes instalar
Google Tag Manageren Wordpress y en cualquier web.
Y para eso nada mejor que veas cómo lo he hecho yo mismo paso a paso en este weblog, o lo que es lo mismo, con el mimo y el cariño que imaginarás que le he puesto para dejarlo todo bien configuradito y marchando. 😊
¡Vamos al lío!
La verdad es que me arrepiento de no haber publicado este tutorial mucho antes por el hecho de que, además de ayudar a otros, me hubiese servido para instalar Google Tag Mánager en mi weblog hace ya un tiempo y medir mejor las estratetgiasque aplico al blog…
Y es que ahora que lo tengo puedo decirte que es simplemente BESTIAL
Tranqui que ahora entenderás por qué. Como dijo
Jack el destripador, vayamos por partes…
🏷️ ¿Qué es Google Tag Manager?
GTM o eles un sistema sencillo y
gratuitobasado en «etiquetas» o
tagscon las que puedes
medir y examinar todo cuanto pasaen tu página web o blog (incluso en su versión AMP) o bien 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ñadiren tu web, blog o Aplicación.
En mi caso, desde la página web de Google Tag Mánager he creado un contenedor llamado miposicionamientoweb.es (sí, soy muy original, qué pasa) y solo he tenido que añadir a este weblog el código HTML/JavaScript
de ese contenedor.
Luego de forma directa desde la página web de Google Tag Mánager
he añadido a mi contenedor etiquetaspara, por servirnos de un ejemplo, ver enel tráfico del blog, saber en qué links 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, pues el contenedor ya se encarga
automáticamente de meter el código que haga faltapara que funcionen todas esas etiquetas.
¡No me afirmes que no mola! 😁
🏷️ ¿Para qué sirve Google Tag Mánager?
Pues Google Tag Manager
sirve para conectar una web o una aplicación con herramientas de todo tipode forma rápida y sencilla merced 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 deque puedes utilizar con etiquetas a través de Google Tag Manager:
➤:herramienta de analítica web (la que he conectado en GTM para este weblog y que voy a explicarte cómo punto por punto)
➤: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.
➤:herramienta avanzada y completísima para gestionar campañas de publicidad digital de todo tipo y al detalle.
➤:herramienta para la optimización de la experiencia de usuario con testing A/B, ensayos, etc. (¡Esta tengo que probarla!)
➤ Etcétera, etc…
Ya te puedes imaginar que este sistema de etiqueta facilita las cosas una barbaridad, por el hecho de que no tienes que caminar metiendo un montón de códigos (HTML, JavaScript, JSON, etc.) cada vez que desees usar alguna de estas herramientas en tu página 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 comprender
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 afirmó que aquello no funcionaba bien, que la tele no cambiaba de canal…
Y ahora que 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 prácticamente para cualquier tipo de web o plataforma que emplees porque sencillamente se trata de meter un fragmento de código dentro del código de tu página web,
sea del tipo que sea.
Pero he querido centrarme en Wordpress porque es lo que empleo yo en este weblog, así de sencillo. 😊
1) La primera cosa que debemos hacer es entrar eny loguearnos con nuestro correo y contraseña de Google.
Haz click en el botón
Siguiente.
2) Si todavía no tienes ninguna cuenta creada, la primera cosa que te pedirá es
añadir una cuenta nuevacon 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 página web.
Ponle de nombre el dominio de tu web y elige
dónde vas a instalarel 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 mas solo para los posts(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 Mánager.
Solo debes escoger que las admites y hacer clic en el botón
Sí.
5) El próximo paso es
añadir en tu página web el códigoque 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 debes añadir
después de la etiqueta en código 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 debes añadir
justo después de la etiqueta <body>.
Aquí puedes seleccionar entre
2 opciones principalespara meter estos fragmentos de código en tu página web y más concretamente en WordPress:
Puede ser «complicada» si no tienes mucha idea de código o no sabes realmente bien dónde puedes localizar 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 archivo
/wp-content/themes/<nombre-del-theme-que-uses>/header.php, mas en mi caso que por servirnos de un ejemplo empleo Genesis framework + Metro Pro (te dejopor 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 las moscas) y añadir los fragmentos de código, puedes hacerlo de 3 formas:
- Con algún
cliente FTPcomopara conectar con tu hosting y así editar el archivo desde tu computador. - Con el explorador de archivos del
panel de control de tu hosting(normalmente es un cPanel). - Con el
editor de ficheros que trae WordPressya desde el menú
Apariencia > Editor. Ahí eliges tu plantilla y el fichero header.php para alterarlo.
Sin duda lo más sencillo es emplear algún complemento de WP que te añade automáticamente los fragmentos de código de Google Tag Manager donde corresponda.
Para eso voy a recomendarte 2 complementos según sea tu caso:
Si usas cualquier plantilla que NO sea Genesis:. Solo debes meterle el ID del contenedor de Google Tag Manager (puedes hallarlo en el fragmento de código como verás en la imagen) y escoger dónde deseas que meta el código.
Por defecto lo mete en el
footer, esto es, al final de la etiqueta <body> y Google aconseja que sea justo al comienzo, pero es la única opción si no quieres meterlo manualmente… ☹️
Si utilizas una plantilla de Genesis:(el que uso yo). Lo tengo desde que me instalé Genesis y es una maravilla porque me deja meter diferentes códigos por diferentes unas partes del weblog (lo que llama como
hookso ganchos) para personalizarlo a mi gusto y sin tener que caminar tocando de forma directa los archivos 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 tuviese 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 Mánager donde lo habías dejado y haz clic en el botón
Aceptar.
Lo siguiente que verás es simplemente
el área de trabajodel 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) Puesto que eso, que solo nos queda «publicar el contenedor», por el hecho de que todo cuanto hagas o bien modifiques en esta área de trabajo no se aplicará en tu web
hasta que no publiques una versión de los cambios.
Para eso debes 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 click
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 comenzamos a emplear Google Tag Mánager por primera vez.
Es la primera etiqueta que se acostumbra a añadir al contenedor, así que voy a explicarte
cómo lo he hechoen este blog paso a paso.
1) Desde el área de trabajo de Google Tag Mánager, arriba a la izquierda haz clic en
Nueva etiquetao
Añadir nueva etiqueta(es exactamente lo mismo).
2) Aparecerá una ventana donde puedes poner
nombre a tu nueva etiqueta. En mi caso me he vuelto orate de creatividad y la he llamado Google Analytics…
Haz click en el recuadro de
Configuración de la etiqueta.
3) Aquí veras todos los tipos de etiquetas de las distintas herramientas que puedes conectar con tu contenedor.
Haz clic en
Universal Analytics
, que es la más actual de Analytics.
Para saber si estás usando Universal Analytics en tu cuenta de Analytics (cosa que te recomiendo), lo mejor es que vayas al menú
Administrar
de Google Analyticsy entres en el apartado
Propiedad > Información de seguimiento > Código de seguimiento.
Aquí verás tu ID de seguimiento, y si empieza por
UAes que empleas Universal Analytics. Si no, en el apartado de
Propiedadverás una opción para.
4) La configuración de esta etiqueta es muy sencilla. Solo debes elegir
Página vista
como
Tipo de seguimientoy elegir la variable de tu configuración de Analytics.
Como aún no está creada, elige
Nueva variable…
5) Se abrirá una ventana para crear
una nueva variabledonde se guardará tu ID de seguimiento de Analytics, y así podrás utilizar esta variable en otra etiqueta de GTM
Mete tu ID y en
Dominio de la cookiepuedes dejar el valor
auto.
Si estás interesado en recoger las IPs de tus visitas
de forma anónima(porque según lala 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 configurary añade el campo
anonymizelpy el valor
true.
Haz click 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 mandar a Analytics
todos los datos de las visitasque recibe tu web o bien weblog. Ahora toca configurar el activador, o sea, «cuándo» se enviará esta información.
Haz click en el recuadro de
Activación.
8) Aquí verás que por defecto ya hay un activador creado que es del género de
Página vista, esto es, que se activa
cuando se ve o bien visita una página.
En este género de activadores puedes filtrar para qué páginas en concreto deseas que se active, mas en un caso así se llama
All Pagesporque está configurado para activarse en
todas las páginasque 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 página web
hasta que no publiques una nueva versióndel contenedor.
Peeeero,
antes de publicaruna nueva versión sería interesante ver si la etiqueta marcha, ¿verdad? Puesto que agárrate a la silla pues se puede hacer gracias a la opción de
Vista Previaque tiene Google Tag Mánager.
Desde tu área de trabajo, arriba a la derecha si haces clic en el botón de
Vista Previaentrarás a un modo con el que podrás navegar por tu web
como si hubieses aplicado ya los cambiosen tu contenedor, y así demostrar que las etiquetas marchan bien antes de publicar.
Ahora si entras a tu página web desde otra pestaña (en el mismo navegador donde estés utilizando 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 acontecimientos.
Aquí por servirnos de un ejemplo si seleccionas el evento
Page Viewverías
las etiquetas disparadas por ese evento, que en un caso así ha sido la etiqueta de Google Analytics que terminas 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 click en
Salir del modo de vista previa.
Ahora sí, ya puedes
publicar una nueva versióncon los cambios del contenedor.
Recuerda que sencillamente es hacer click en el botón
Enviarque tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción (si quieres) y después haces click en el botón Publicar.
¡Y ya tienes Analytics instalado con Google Tag Manager! 😃
Si ya tenías algún código en tu lugar para registrar las visitas en Analytics, recuerda
quitarlopara que no te cuente el doble de visitas.
➤
🔹 Registrar clicks en enlaces salientes de afiliados
Ahora que ya tienes Analytics registrando las visitas de tu web o blog, aprovecharemos para saber los clics que hacen tus visitas
en los links de afiliadosque tengas (algo que en mi blog es «crucial» por el hecho de que primordialmente vivo de esos ingresos).
Viene excelente para saber por dónde y hacia dónde «convierten» esas visitas. 😁
1) La primera cosa que hay que hacer es
activar la variable
Click URL
, para saber la URL del link en el que se hará el click.
Es muy sencillo, en esta imagen verás los
4 mini-pasosque debes dar para activarla:
- Ves al apartado
Variables. - Haz clic en el botón
Configurar. - Elige
Click URLen la ventana de
Configurar las variables integradas. - Ya está activada y la verás en el panel de
Variables integradas.
2) Ahora hay que crear otra variable con
los géneros de enlaces de afiliadoque puedas tener en tu página web o weblog. Esta variable la usaremos entonces como filtro a fin de que al registrar los clicks solo tenga en cuenta estos tipos de link.
Haz clic en
Variables, y en el apartado
Variables definidas por el usuariohaz click en
Nueva.
Ponle el nombre que quieras, yo le he puesto
Tabla de links de afiliado. 😀
Haz clic en el recuadro
Configuración de la variabley elije el tipo
Utilidades >
Tabla RegEx
.
Y en esta pantalla de
Configuración de la variableque verás ahora es donde está la «chicha»:
Variable de entrada:
Click URL
(la que has activado en el paso inicial).
Tabla RegEx: como no hay un «patrón global» que defina todas las URLs de afiliado del planeta, tendrás que añadir tantas filas como «patrones» de géneros de links que puedas tener usando, y a todas y cada una en el campo
Salidaponle
true.
Establecer valor predeterminado: elegido y con el valor
false.
No distinguir entre mayúsculas y minúsculas: elegido.
Solo coincidencias totales: no elegido.
Habilitar conjuntos de atrapa y substituir funciones: no elegido.
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 empleo (salvo en los enlaces de Amazon Afiliados), porque mis enlaces de afiliado son «internos» del tipo
miposicionamientoweb.es/visitar/<lo que sea>que entonces te redireccionan al auténtico enlace saliente de afiliado; esto es así pues empleo el pluginque me sirve precisamente para facilitar este género de cosas, para ponerles
nofollow(cosa que), reunirlos por categorías, estadísticas de clics, etc.
➤ La 2ª fila es el clásico enlace acortado de Amazon Afiliados, con lo que cualquier link que tenga
amzn.to/lo contará como de afiliado.
➤ La 3ª fila sirve para el link «largo» que te da Amazon Afiliados, y tendrá en cuenta todos y cada uno de los links del tipo
amazon.es/<lo que sea>tag=miposiweb-21. Aquí tendrás que mudar mi tag «miposiweb-21» por el que utilices tú en Amazon Afiliados.
➤ Las filas 4ª y 5ª sirven para que cuente como enlace de referido aquellas URLs que tengan variables del tipo «
ref=» y «
aff=«, que son variables que acostumbran a añadirse al final de los enlaces de referido para apuntar tu número de afiliado.
En terminante, esta tabla lo que hace es devolver
truesolo si la variable
Click URLcoincide con alguno de estos patrones (
si es un enlace de afiliado), y si no, devuelve
false. 😉
3) Ahora sí, ves a
Etiquetaso desde el área de trabajo de Google Tag Manager arriba a la izquierda, haz clic en
Nueva etiquetao
Añadir nueva etiqueta(es exactamente 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, escoge la
Universal Analytics
. En este caso escoge
Eventocomo
Tipo de seguimiento, pues es un acontecimiento lo que va a lanzar esta etiqueta a fin de que se registre en tu Analytics.
El resto de la configuración:
Categoría: puedes poner cuanto quieras, algo que describa el evento.
Acción: haz clic en el botón + de la derecha y escoge la variable
Click URL(la URL del enlace de referido en el que se hace clic).
Etiqueta: haz click en el botón + de la derecha y escoge la variable
Page Path(la página de tu web o bien blog desde la que se hace clic).
Valor: ninguno.
Hit sin interacción:
Falso.
Configuración de Google Analytics: la variable que creaste para(paso cinco).
5) O.K., puesto que ahora haz click en el recuadro de
Activacióny elige el activador
Clic – Solo enlaces
. Y ponle el nombre que desees, que en mi caso es
Clic en link de afiliado(¡chúpate esa originalidad!).
Los ajustes que tienes que configurar para el activador:
Esperar etiquetas: seleccionado (2000 milisegundos por defecto).
Comprobar la validación: escogido.
Habilite este activador cuando se cumplan todas y cada una estas condiciones: para hacer que se active en todas y cada una de las páginas de tu sitio, elige
Page URLen el primer campo, elige
coincide con la expresión regular
en el segundo campo y escribe
.*en el último campo.
Este activador se activa en: para que solo se active en los links salientes que queramos (de afiliado), elige la opción
Algunos clicks en enlaces.
Ejecute este activador cuando tenga sitio un Acontecimiento y se cumplan todas estas condiciones: aquí es donde debes seleccionar tu variable con la
Tabla de enlaces de afiliadoen el primer campo,
es igualen el segundo campo y
trueen el último campo. Así solo tendrá en cuenta los enlaces que coincidan con los patrones de la tabla donde has definido tus enlaces de referido.
Y ya tienes configurada toda la etiqueta para registrar clicks en enlaces salientes de afiliado. Créeme, parece más complicado de lo que es de verdad. 😉
Haz click en el botón de
Guardar.
6) Ya sabes lo que toca ahora,
publicar una nueva versión con los cambios hechosen el contenedor.
Recuerda que antes de publicar los cambios puedes emplear la
Vista Previapara ver
si ciertamente la etiqueta funcionay registra los clics en links salientes de afiliado, que no se activa haciendo clic en enlaces internos, etc.
En esta imagen por poner un ejemplo ves que al hacer click en el enlace de afiliado, en la columna de acontecimientos del panel de depuración aparece el acontecimiento
gtm.linkClicky en la derecha indica que
se ha disparadola etiqueta
Clic link saliente – afiliado.
Además, si haces clic sobre el recuadro de esa etiqueta te muestra sus propiedades con
la información del eventoque enviará a Google Analytics: la categoría, la URL del link, 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óncon los cambios del contenedor.
Ya sabes, haces click en el botón
Enviarque 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 clicks en enlaces salientes de afiliado! 😃
➤
🔹 Registrar clicks en links salientes NO de afiliados
Otra de las cosas interesantes que puedes registrar también son los clicks que se hacen
en cualquiera de tus enlaces salientesy 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, precisas tener hechos los 2 primeros pasos del(luego entenderás por qué):
Activar la variable
Click URL
para saber la URL del enlace en el que se hará el clic (paso 1 del apartado precedente).
Crear una variable con una tabla RegExcon las clases de enlaces de referido que tienes (paso dos del apartado precedente).
👀 Ojo, si no tienes enlaces de referido, el 2º paso no te hace falta, claro.
2) Desde el menú
Etiquetas, o bien desde el área de trabajo de Google Tag Manager arriba a la izquierda, haz clic en
Nueva etiquetao
Añadir nueva etiqueta(es exactamente lo mismo).
3) Ponle nombre a la nueva etiqueta, que en mi caso es
Clic enlace saliente – NO afiliado.
Lo sé… 🤯
Cuando hagas click en el recuadro de
Configuración de la etiqueta, escoge la
Universal Analytics
. En un caso así elige
Eventocomo
Tipo de seguimiento, pues es un evento lo que va a lanzar esta etiqueta a fin de que se registre en tu Analytics.
El resto de la configuración:
Categoría: puedes poner lo que quieras, algo que describa el acontecimiento.
Acción: haz click en el botón + de la derecha y elige la variable
Click URL(la URL del enlace en el que se hace clic).
Etiqueta: haz click en el botón + de la derecha y escoge la variable
Page Path(la página de tu web o weblog desde la que se hace click).
Valor: ninguno.
Hit sin interacción:
Falso.
Configuración de Google Analytics: la variable que creaste para(paso cinco).
4) Ok, haz click en el recuadro de
Activacióny escoge el activador
Clic – Solo enlaces
. Ponle también el nombre que te apetezca; lo he llamado
Clic en enlace NO de afiliadopara distinguirlo del activador del apartado anterior.
Los ajustes que debes configurar para el activador:
Esperar etiquetas: elegido (dos mil milisegundos por defecto).
Comprobar la validación: elegido.
Habilite este activador cuando se cumplan todas y cada una estas condiciones: para hacer que se active en todas y cada una de las páginas de tu sitio, elige
Page URLen el primer campo, escoge
coincide con la expresión regular
en el segundo campo y escribe
.*en el último campo.
Este activador se activa en: para que solo se active en los enlaces salientes y NO de afiliados, escoge la opción
Algunos clics en enlaces.
Ejecute este activador cuando tenga sitio un Acontecimiento y se cumplan todas estas condiciones: aquí defines concretamente que sean links salientes, y para eso elige
Click URLen el primer campo,
no contieneen el segundo campo y escribe
tu dominioen el último campo. Y además,
si tienes enlaces de afiliados, para que no los tenga en cuenta este activador, añade otra fila de condiciones y escoge la variable
Tabla de links de afiliadoen el primer campo,
es igualen el segundo campo y
falseen el último campo. Así solo tendrá en cuenta los links salientes que además no coincidan con los patrones de la tabla en la que has definido tus enlaces de afiliado.
Y ya tienes configurada toda la etiqueta para registrar clics en links salientes. Fácil, ¿no? 😉
Haz click en el botón de
Guardar.
5) Y ahora lo que toca es
publicar una nueva versión con los cambios hechosen el contenedor.
Recuerda que ya antes de publicar los cambios puedes utilizar la
Vista Previapara ver
si ciertamente la etiqueta funcionay registra los clics en links salientes, que no se activa haciendo clic en enlaces internos, que tampoco se activa en links salientes de afiliado, etc.
En esta imagen por servirnos de un ejemplo ves que al hacer clic en el enlace saliente, en la columna de eventos del panel de depuración aparece el evento
gtm.linkClicky en la derecha señala que
se ha disparadola etiqueta
Clic link saliente – NO afiliado.
Además, si haces clic sobre el recuadro de esa etiqueta te muestra sus propiedades con
la información del eventoque enviará a Google Analytics: la categoría, la URL del link, 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óncon los cambios del contenedor.
Ya sabes, haces click en el botón
Enviarque tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y después haces click en el botón Publicar.
¡Y ya estarás registrando los clicks en links salientes! 😃
➤
🔹 Ajustar la tasa de rebote
Ya te manejas por Google Tag Mánager como si lo hubieses parido, ¿verdad? 😁
Bueno puesto que te voy a enseñar las etiquetas que he instalado también para ajustar la tasa de rebote en mi blog a mi gusto ().
En este caso la idea es que se lance un evento a Google Analytics cuando el usuario haga
scroll después de diez segundosque lleva visitando esa página del weblog, por el hecho de que para mí eso ya no sería un «rebote» tal y como lo comprende Google Analytics.
¡Vamos al lío!
1) Lo primero es añadir una etiqueta nueva (ves a
Etiquetaso desde el área de trabajo haz click en
Nueva etiqueta) y que sea de tipo
HTML personalizado
.
Esta etiqueta se encargará solita de añadir en tu sitio un código de JavaScript (¡sin que lo debas añadir tú de manera directa!) que controlará cuándo hace scroll el usuario después de diez segundos, para luego notificar al Google Tag Mánager.
Este es el código que debes añadir dentro del apartado de HTML:
<script>
var listenerScrollGA = function()
window.removeEventListener(‘scroll’, listenerScrollGA); // solo trackea el acontecimiento una vez
window.dataLayer.push(‘event’:’Timeout y Scroll‘, ‘eventCategory’:’Ajuste Tasa de Rebote GTM’, ‘eventAction’: ‘Scroll despues diez 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 (diez segundos), y cuando pasan esos 10 segundos se queda aguardando a que el usuario haga scroll en algún momento.
Toda la parte en verde se ejecuta cuando el usuario ha hecho scroll. La primera cosa que hace es dejar de aguardar a que el usuario haga scroll más veces (para que el código solo se ejecute 1 vez).
Y específicamente la
parte en verde con negritaes la que «notifica» al Google Tag Manager con un evento de que el usuario hizo scroll después de diez segundos.
Te señalo el nombre del acontecimiento en
naranja con negritaporque más adelante te hará falta este nombre.
2) Ahora toca crear el activador que hará que se añada este código HTML en tu página web o blog. Así que dale al recuadro de
Activación, dale al botón
+para añadir un nuevo activador, haz click en el recuadro de
Configuración del activadory escoge 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 diez segundos
desde ese instante y no antes, para que la tasa de rebote sea más «real».
Haz clic en
Guardarel activador (ponle el nombre que desees como
Ventana cargada por completo) y en
Guardarla etiqueta (que yo he llamado
Timeout y Scroll para mejora de rebote).
3) Ahora añade otra
Nueva etiquetade tipo
Universal Analytics
que será con la que «avisaremos» a Analytics de que se ha lanzado el evento
Timeout y Scroll
(paso 1).
La he llamado
Envía evento Timeout y Scroll. 😃
Configuración:
Tipo de seguimiento: Acontecimiento.
Categoría: puedes poner lo que quieras, algo que describa el evento como
Ajuste Tasa de Rebote GTM.
Acción: puesto que también algo gráfico, como
Scroll después de diez sg GTM.
Etiqueta: no hace falta que pongas nada si no quieres. O puedes hacer clic en el botón + de la derecha y escoger la variable
Page Pathpara saber la página desde la que se lanza el evento.
Valor: ninguno.
Hit sin interacción:
Falso.
Configuración de Google Analytics: la variable que creaste para(paso cinco).
5) Vale, puesto que ahora haz clic en el recuadro de
Activación, dale al botón
+para añadir un nuevo activador, haz click en el recuadro de
Configuración del activadory elige el de tipo
Otros – Acontecimiento personalizado
.
Ponle el nombre que desees, que en mi caso es
Evento adaptado de Timeout y Scroll.
Los ajustes del activador son muy, muy sencillos:
Nombre de evento: aquí debes poner el mismo nombre que le pusiste al evento en el código JavaScript del paso 1, esto es,
Timeout y Scroll
.
Este activador se activa en: aquí puedes seleccionar
Todos los acontecimientos personalizadosya que verdaderamente solo se activará cuando se lance el evento que le hemos indicado (y que solo se lanza una vez por página vista).
Y ya tienes configurada toda la etiqueta para registrar en Google Analytics los eventos que
tú mismo lanzasen tu sitio en el momento en que un usuario hace scroll después de diez segundos. ¡¿A que mola?! 😉
Haz clic en
Guardarel activador y después en
Guardarla etiqueta.
6) Y el último paso bien sabes cuál es,
publicar una nueva versión con los cambios hechosen el contenedor.
Recuerda que ya antes de publicar los cambios puedes emplear la
Vista Previapara ver
si efectivamente la etiqueta funcionay 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 servirnos de un ejemplo ves que cuando se carga la ventana por completo (evento
Window Loaded) se «dispara» la etiqueta que
añade el código HTML/JavaScriptque controla cuándo hace scroll el usuario después de aguardar 10 segundos.
Cuando eso ocurre y Google Tag Manager advierte el acontecimiento
Timeout y Scrolllanzado por ese código, entonces «dispara» la otra etiqueta para que
se registre el evento en Google Analyticsy que esa visita ya no cuente como un «rebote».
Chachi, ¿verdad? 😊
¡Listo! Si has comprobado que todo marcha bien ya puedes
publicar la nueva versióncon los cambios del contenedor.
Ya sabes, haces click en el botón
Enviarque tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y después haces clic en el botón Publicar.
¡Y ya estarás ajustando la tasa de rebote de tu web o bien weblog! 😃
➤
⚡ Cómo instalar Google Tag Mánager 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 produce 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 weblog, aprovecho para explicártelo y que quede más claro. 😊
1) Desde el área de trabajo de Google Tag Mánager, 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 click en el botón
+para
añadir un nuevo contenedora tu cuenta.
3) Al igual que cuando hiciste el contenedor web, solo debes ponerle un nombre y en un caso así elegir que es
de tipo AMP.
Haz clic en el botón
Crear.
4) Y el próximo paso es
añadir en tu web el códigoque te ha generado para tu contenedor AMP.
Por un lado te da un fragmento de código
a)que debes añadir
al final de la etiqueta en código HTML <head>de las páginas AMP de tu sitio web o weblog. Y lo mismo con el otro fragmento de código
b)que te da, mas este le tienes que añadir
justo después de la etiqueta <body>.
Aquí también puedes seleccionar entre
2 opciones principalespara meter estos fragmentos de código en tus páginas AMP y más específicamente en WordPress:
Al ser manualmente, esta opción te vale tengas el plugin que tengas para tener AMP en tu Wordpress (si es que empleas alguno). Y lógicamente será «complicada» si no tienes mucha idea de código o bien no sabes muy bien dónde puedes localizar las etiquetas <head> y <body> de tus páginas AMP.
Si por poner un ejemplo utilizas el(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 complemento perderías los cambios que hagas en ese fichero, así que lo suyo es que copies ese fichero y lo pegues en una carpeta llamada /amp/ en la carpetita de tu theme (como lo tengo ). O sea, editar el archivo
/wp-content/themes/<nombre-del-theme-que-uses>/amp/single.php.
Y para editar el
single.php(guárdate ya antes una copia del fichero por si las moscas) y añadir los fragmentos de código, como te explicaba con la creación del contenedor web, puedes hacerlo de tres formas:
- Con algún
cliente FTPcomopara conectar con tu hosting y así editar el fichero desde tu computador. - Con el explorador de ficheros del
panel de control de tu hosting(en general es un cPanel). - Con el
editor de ficheros que trae WordPressya desde el menú
Apariencia > Editor. Ahí eliges tu plantilla y el fichero single.php para modificarlo.
Esta opción es la más sencilla, sobre todo si ya utilizas. Como podrás ver enexplicando cómo se configura, este complemento 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 > Analyticsy de todas y cada una de las opciones que salen,
activa la de Google Tag Manager, que está prácticamente abajo del todo.
Con este GIF animado lo verás más fácil:
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 Typeescribe
googleanalyticsy entonces te pide.
¡Y ya está! 😊
Lo importante, lo hagas como lo hagas, es que te pongas bragas… No, en serio, lo esencial 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 Mánager donde lo habías dejado y haz clic en el botón
Aceptar.
Lo siguiente que verás es
el área de trabajodel contenedor AMP en tu cuenta de Google Tag Mánager.
6) Como pasaba con el contenedor web, ahora toca «publicar» este nuevo contenedor para
que se apliquen los cambiosen tus páginas AMP.
Para eso debes 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 click
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 Mánager instalado para AMP! 😃
🔹 Cómo instalar Google Analytics con Google Tag Mánager para AMP
Vas a ver que el procedimiento es
básicamente el mismoque el que te he explicado para crear una etiqueta de Google Analytics en un contenedor web. De hecho, como las páginas AMP no dejan JavaScript, verás que las etiquetas y los activadores son mucho más «simples».
1) Desde el área de trabajo
del contenedor AMPde Google Tag Manager, arriba a la izquierda haz clic en
Nueva etiquetao
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 click en el recuadro de
Configuración de la etiquetaverás que la etiqueta que tienes que elegir es la de
Universal Analytics
.
3) La configuración de esta etiqueta para AMP es incluso más sencilla. Solo debes meter el
ID de seguimientode 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) O.K., pues ahora ya solo queda que hagas clic en el recuadro de
Activacióny escojas el activador
All Pagesdel género de
Página vista, para que «salte»
cuando se vea o bien 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 hechosen 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 pues la propia estructura de AMP no lo permite, mas sí que marcha el modo de depuración.
Si por poner un ejemplo usasy entras en alguna página AMP con el modo perfecto de
Vista Previaactivado, puedes ver los acontecimientos y las etiquetas del contenedor AMP
que estás editando, y no del que tengas ya publicado.
En verdad esta extensión te vale también para el contenedor web, pero es mucho más precisa
con el contenedor AMPal no tener el «panel de depuración» de Google Tag Mánager.
La verdad es que es muy sencillita de usar, mas por si acaso te dejo aquíque tiene directamente Google y donde lo explican mejor, que para eso es suya. 😊
Y ahora sí, ya puedes
publicar la nueva versióncon los cambios del contenedor.
Recuerda, haces clic en el botón
Enviarque tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción (esto es opcional) y después haces click 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 Analytics, recuerda
quitarlopara que no te cuente el doble de visitas.
➤
🔹 Registrar clicks en links salientes de afiliados para AMP
Ahora que tienes Google Analytics registrando las visitas de tu web o blog en AMP, aprovecharemos para saber si tus visitas hacen click
en los links de afiliadosque tengas (esto en mi weblog es «vital» porque es de donde más produce ingresos).
En este caso con AMP
no hay forma de saber en qué URL se hace clicexactamente (sí, lo sé, es una 💩, mas 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 Mánager arriba a la izquierda, haz click en
Nueva etiquetao
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 click en el recuadro de
Configuración de la etiqueta yelige la
Universal Analytics
.
Aquí mete la variable de
Id de Seguimiento GAque te expliqué en el(paso tres), y después selecciona
Evento
como
Tipo de seguimiento, porque es un evento lo que va a lanzar esta etiqueta a fin de que se registre en tu Analytics.
El resto de la configuración:
Categoría: puedes poner cuanto quieras, algo que describa el evento
y que es de AMP(para distinguirlo del evento que lance el contenedor web).
Acción: pon cuanto quieras, por el hecho de que para AMP no existe ninguna variable
Click URLcomo sí que había en el contenedor web, así que no se puede saber dónde se hace clic exactamente. 😞
Etiqueta: haz click en el botón + de la derecha y escoge la variable
Page Path(cuando menos sí que se puede saber la página AMP desde la que se hace clic).
Valor: ninguno.
Hit sin interacción:
Falso.
3) O.K., ahora haz click en el recuadro de
Activacióny elige el activador
Clic
. Y ponle el nombre que desees, 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. Aquí solo puedes usarpara acotar cuáles son
los géneros de enlaces de referido que tienesen tu web o bien weblog.
Y en
Este activador se activa en, elige la opción
Todas las páginas(a fin de que se active en todas y cada una de las páginas AMP).
Por si no estás muy familiarizado con el tema de los selectores CSS, te diré que son patrones (similares a las expresiones regulares) que se utilizan
para escoger elementos o bien etiquetas HTML.
Estos selectores de verdad se acostumbran a usar en los archivos CSS para mudar el estilo a esos elementos que se «seleccionan», pero en un caso así la etiqueta de AMP usa estos selectores para definir
en qué elementos HTML aplicar el activador
Clic
.
Este es el selector CSS que empleo yo para que seleccione 3 géneros de enlaces de afiliado que uso en mi weblog (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 señala que escoja las etiquetas en código HTML <
a> (etiquetas de enlaces) donde el atributo
href(la URL) contenga
miposicionamientoweb.es/visitar. En mi caso, uso el pluginque me sirve a fin de que mis enlaces de afiliado tengan exactamente el mismo patrón
miposicionamientoweb.es/visitar/<lo que sea>(y después te redireccionan al auténtico link 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
hrefcontenga
amzn.to/. Este es el dominio de URL corta que se acostumbra a 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, mas en un caso así seleccionará las etiquetas <
a> donde el atributo
hrefcontenga
tag=miposiweb-21. Este lo empleo para las URLs largas de Amazon Afiliados que acostumbran a llevar el ID o bien «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 utilices tú en Amazon Afiliados.
➤ Si en tu caso utilizas otros enlaces de afiliado, busca si sus URLs tienen variables del tipo «
ref=» y «
aff=«, que son variables que acostumbran a añadirse al final de los enlaces de afiliado para señalar tu número de afiliado. Así podrías añadir otro selector más por servirnos de un 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. Semeja más complicado de lo que es realmente. 😉
Haz clic en el botón de
Guardar.
6) Puesto que lo que toca ahora es
publicar una nueva versión con los cambios hechosen el contenedor AMP.
Como te dije, no hay un panel depuración con la opción de
Vista Previapara los contenedores AMP, mas con la extensión de Google Chrome
Tag Assistantpuedes
comprobar que marcha la etiquetay registra los clicks en enlaces salientes de afiliado desde páginas AMP, que no se activa haciendo click en enlaces internos, etc.
¡Te explico cómo lo he hecho yo! 😉
En el área de trabajo de Google Tag Mánager
activa la
Vista Previa
.
Ahora abre otra pestaña del navegador, activa el plugin haciendo click en el icono del
Tag Assistantarriba 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 click 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 Analytics. Haz clic en ese recuadro y te mostrará las etiquetas mandadas del tipo
PageViewy
Events. Y si haces click encima de
Events, podrás ver
los acontecimientos enviados por tus etiquetas.
En la última imagen verás que arriba a la derecha tienes unas flechas para moverte por los eventos mandados. En mi caso ya ves que me muestra apropiadamente el evento «disparado» de
Link de afiliado en AMP GTMcon la ruta de la página AMP desde la que se ha hecho click.
Puedes probar por ejemplo a hacer clic en otros links que NO sean de afiliado para comprobar
que no se lanzan más eventos. Y cuando acabes, ya puedes hacer click en el botón
Disabledel
Tag Assistanty desactivar la
Vista Previaen Google Tag Manager.
Mola, ¿eh? 😊
Y ahora ya sí, puedes
publicar la nueva versióncon todos los cambios que has hecho en el contenedor AMP.
Ya sabes, haces click en el botón
Enviarque tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y después haces click en el botón Publicar.
¡Y ya estarás registrando los clicks en enlaces salientes de afiliado para AMP! 😃
➤
🔹 Registrar clicks en links salientes NO de afiliados para AMP
Otras de las cosas interesantes que puedes registrar también en tus páginas AMP son los clicks que se hacen
en cualquiera de tus enlaces salientesy que NO sean de afiliados.
Te recuerdo que en AMP
no hay forma de saber en qué URL se hace clicexactamente (es un fastidio, sí…). Aun así, esta etiqueta viene excelente para saber las páginas AMP por las que se «escapan» tus visitas. 😁
1) Desde el área de trabajo de Google Tag Mánager arriba a la izquierda, haz click en
Nueva etiquetao
Añadir nueva etiqueta.
2) Ponle nombre a esta nueva etiqueta. Por poner un ejemplo, yo la he llamado
Clic enlace saliente – NO afiliado. Ahora haz click en el recuadro de
Configuración de la etiqueta yelige la
Universal Analytics
.
Mete la variable de
Id de Seguimiento GA(que ya la tendrás creada de apartados precedentes), y luego escoge
Evento
como
Tipo de seguimiento, por el hecho de que aquí también es un acontecimiento lo que va a lanzar esta etiqueta para que se registre en tu Analytics.
El resto de la configuración:
Categoría: pon cuanto quieras, algo que describa bien el acontecimiento
y que es de AMP(para no confundirlo entonces con los eventos que lance el contenedor web).
Acción: pon cuanto quieras, pues para AMP ya sabes que no existe la variable
Click URLy no se puede saber la URL donde se hace clic precisamente. 😢
Etiqueta: haz click en el botón + de la derecha y elige la variable
Page Path(para saber al menos la página AMP desde la que se hace click).
Valor: ninguno.
Hit sin interacción:
Falso.
3) Vale, ahora haz click en el recuadro de
Activacióny elige el activador
Clic
. Y llámalo como desees, 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 optimizacion adwords ejemplo las que puedes ver para los. Aquí solo puedes utilizar selectores de CSS para definir cuáles son
los links salientes NO de afiliado que tienesen tu página web o weblog.
Y en
Este activador se activa en, elige la opción
Todas las páginas(a fin de que se active en todas las páginas AMP).
Como te explicaba en el, esta clase de etiquetas de AMP utiliza selectores CSS para acotar
en qué elementos HTML se aplica el activador
Clic
.
Este es el selector CSS que uso yo para que elija todos y cada uno de los enlaces menos los que le indico como links internos y los de Amazon Afiliados (en un caso así es un único selector que concadena tres 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 escoja las etiquetas en código HTML <
a> (etiquetas de links) que no (:not) contenga
miposicionamientoweb.esen su atributo
href(la URL) pues esos serán enlaces salientes. En mi caso, como empleo el pluginque me sirve para que mis enlaces de referido tengan exactamente 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, elige 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 empleo con el complemento 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 links que tendría que excluir. Y aquí seleccionará las etiquetas <
a> que no contengan
tag=miposiweb-21en su atributo
href(la URL), que es la variable que define al filiado y que se utiliza en los links largos de Amazon Afiliados (y estos tampoco los empleo con el plugin de Pretty Links). Aquí tendrás que mudar mi tag «miposiweb-21» por el que emplees tú en Amazon Afiliados.
➤ Si en tu caso utilizas 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 unir otro selector más por poner un ejemplo del tipo
:not[href*=’ref=’].
Y ya tienes configurada esta etiqueta para registrar clicks en links 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 hechosen el contenedor AMP.
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 ciertamente
funciona la etiquetay registra los clicks en enlaces salientes NO de afiliado desde páginas AMP, que no se activa haciendo click en links salientes de afiliado, etc.
Es lo mismo que te explicaba en el paso seis del.
Activas la
Vista Previa
, habilitas el
Tag Assistanten una pestaña del navegador, entras a una de tus páginas AMP donde tengas enlaces salientes NO de afiliado, haces click en uno de ellos y compruebas si ciertamente se «dispara» el acontecimiento
Link NO de afiliado en AMP GTM.
Y prueba también que haciendo clic en enlaces de referido
no se lanzan más eventos.
Sencillo, ¿no? 😊
Y ya al fin puedes
publicar la nueva versióncon todos y cada uno de los cambios que has hecho en el contenedor AMP.
Ya sabes, haces clic en el botón
Enviarque tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y después haces click en el botón Publicar.
¡Y ya estarás registrando los clics en enlaces salientes NO de afiliado para AMP! 😃
➤
🔹 Ajustar la tasa de rebote para AMP
Bueno, puesto que 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 ().
A diferencia del contenedor web, el contenedor AMP está mucho más limitado y no deja por ejemplo crear etiquetas de
HTML personalizadoni «anidar» etiquetas. Así que en un caso así
NOpuedo hacer que se lance un acontecimiento a Analytics cuando el usuario haga scroll después de 10 segundos. 💩
Lo que sí puedo hacer es que se envíe
un eventoa Google Analytics cuando el usuario haga
un porcentaje de scrollrespecto a la altura total de la página, y que se envíe
otro eventodistinto para
cuando pasen veinte segundos. De esta forma, el primer acontecimiento que se lance de estos dos será el que «cancele» el rebote de la visita.
¡Al lío! 😃
1) Lo primero es añadir una etiqueta nueva (ves a
Etiquetaso desde el área de trabajo haz clic en
Nueva etiqueta). Yo la he llamado
Envío de acontecimiento Timeout mejora de rebote.
Ahora haz clic en el recuadro de
Configuración de la etiqueta yelige 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, pues aquí también es un evento lo que va a lanzar esta etiqueta a fin de que se registre en tu Google Analytics.
El resto de la configuración:
Categoría: escribe algo que sea gráfico
y que es de AMP(para no confundirlo luego con los eventos que lance el contenedor web).
Acción: pon cuanto quieras, algo que por servirnos de un ejemplo defina más específicamente el evento de timeout de diez segundos para AMP.
Etiqueta: como el evento «simplemente» es para ajustar el rebote puedes dejarlo vacío. O bien puedes hacer click en el botón + de la derecha y elegir la variable
Page Pathpara saber la página AMP desde la que se lanza el acontecimiento.
Valor: ninguno.
Hit sin interacción:
Falso.
2) Genial, ahora haz click en el recuadro de
Activación, dale al botón
+para añadir un nuevo activador, haz click en el recuadro de
Configuración del activadory escoge el de tipo
Temporizador
.
Ponle el marketing internacional , que en mi caso es
Temporizador 10 segundos.
Los ajustes del activador son sencillísimos:
Intervalo: aquí se ponen los
10 segundosque tienen que pasar ya antes de lanzar el evento.
Límite: aquí se pone el límite de tiempo a lo largo del que «funcionará» el activador. Si por ejemplo pusiera treinta segundos, el activador se dispararía cada diez segundos (los que he puesto en el campo
Intervalo), o sea, tres veces (30 sg / diez sg = tres veces). En mi caso, como solo quiero
que se lance 1 vez, pongo exactamente el mismo valor que el
Intervalo(diez sg / 10 sg = 1 vez).
Activar de forma inmediata cuando se haya generado: NO escogido, para que solo se «dispare» con la página cargada después de los segundos indicados en
Intervalo.
Este activador se activa en: todas y cada una de las páginas.
Y así ya tienes configurada la etiqueta para registrar en Analytics un evento en el momento en que un usuario ha pasado
10 segundos en tu página AMP.
Mola, ¡¿eh?! 😉
Haz clic en
Guardarel activador y después en
Guardarla etiqueta.
3) Ahora toca añadir una nueva etiqueta a parte (haz click en
Nueva etiqueta) para el acontecimiento de scroll. Yo la he llamado
Envío de acontecimiento Scroll mejora rebote.
Haz clic en el recuadro de
Configuración de la etiqueta yelige la
Universal Analytics
.
Aquí también debes meter la variable de
Id de Seguimiento GA, y después 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:
Categoría: escribe algo que sea gráfico
y que es de AMP(para no confundirlo luego con los acontecimientos que lance el contenedor web).
Acción: pon lo que quieras, algo que por ejemplo defina más específicamente el acontecimiento del veinte por ciento de scroll para AMP.
Etiqueta: como el acontecimiento «simplemente» es para ajustar el rebote puedes dejarlo vacío. O bien puedes hacer clic en el botón + de la derecha y escoger la variable
Page Pathpara saber la página AMP desde la que se lanza el evento.
Valor: ninguno.
Hit sin interacción:
Falso.
4) Perfecto, ahora haz clic en el recuadro de
Activación, dale al botón
+para añadir un nuevo activador, haz click en el recuadro de
Configuración del activadory 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 aun más fáciles que los del temporizador:
Porcentajes verticales: aquí pones veinte, que será el
porcentaje de scroll en verticalque habrá que hacer para que se active y se lance el acontecimiento.
Porcentajes horizontales: aquí no pongas nada porque en un caso así no te resulta interesante el scroll horizontal.
Este activador se activa en: todas las páginas.
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 veinte por ciento del totalde la página en AMP. 😃
Haz clic en
Guardarel activador y después en
Guardarla etiqueta.
5) Y el último paso pues es como siempre y en toda circunstancia
publicar una nueva versión con los cambios hechosen el contenedor AMP.
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 etiquetay registra los acontecimientos de timeout y 20 por ciento de scroll separadamente, si los registra en el orden correcto, etc.
Activas la
Vista Previa
, habilitas el
Tag Assistanten una pestaña del navegador, entras a una de tus páginas AMP, haz mucho scroll cara abajo, espera también cuando menos 10 segundos y verificas si efectivamente se «disparan» los 2 eventos.
Y prueba también primero a esperar los 10 segundos y después a hacer scroll, a ver si registra bien
el orden en que se lanzanlos eventos.
Muy fácil. 😊
¡Ahora sí que sí! Ya puedes
publicar la nueva versióncon todos y cada uno de los cambios que has hecho en el contenedor AMP.
Ya sabes, haces click en el botón
Enviarque tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción y después haces click en el botón Publicar.
¡Y ya estarás ajustando la tasa de rebote de tus páginas AMP! 😃
➤
🏷️ Comprobar las etiquetas en Analytics en tiempo real
Como Google Analytics no te enseña en sus gráficas los datos que registre hoy tu sitio hasta que no pasen 24 horas, la mejor forma que tienes para revisar «en vivo» si marchan adecuadamente
las etiquetas que terminas de publicares usando la vista de
En Tiempo Realde Analytics.
Aquí lo que suelo hacer es, primero entro en
En Tiempo Real > Ubicacionesy escojo
Spain > Guadalajara, pues 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 links, etc.
Así puedes revisar
al momentoque se han publicado bien los cambios en tu contenedor de Google Tag Mánager. 🤗
🏷️ Otras etiquetas interesantes para Google Tag Manager
Hay muchos tutoriales sobre Google Tag Manager en general, mas he querido elegir estos que te dejo aquí pues van
un paso más alládel «tutorial básico», y ahora que lo dominas seguro que te semejan también bien interesantes. 😉
¡Espero que te haya agradado! Y sobre todo,
que te haya sido útil.
Ni que decir debe si conoces alguna otra etiqueta interesante para Google Tag Manager…
¡Cuéntamela! 😃
