troutbanker87

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 pasito a pasito 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 ya antes pues, además de asistir a otros, me hubiera servido para instalar Google Tag Mánager en mi blog hace cierto 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 Mánager?

GTM o eles un sistema sencillo y
gratuitobasado en «etiquetas» o bien
tagscon las que puedes
medir y analizar todo cuanto pasaen tu página web o bien 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 tiene por nombre 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 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 de manera directa desde la web de Google Tag Manager
he añadido a mi contenedor etiquetaspara, por servirnos de un ejemplo, ver enel tráfico del weblog, saber en qué links se hace clic, cuándo se hace scroll, hacer tests A/B, etc.

Y repito, no he debido 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 y cada una esas etiquetas.

¡No me afirmes que no mola! 😁

🏷️ ¿Para qué sirve Google Tag Manager?

Pues Google Tag Mánager
sirve para conectar una web o bien 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 pasito a pasito)

➤: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 muy completa para administrar 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, experimentos, etc. (¡Esta tengo que probarla!)

➤ Etcétera, etc…

Ya te puedes imaginar que este sistema de etiqueta facilita las cosas una brutalidad, pues no debes andar metiendo un montón de códigos (HTML, JavaScript, JSON, etc.) cada vez que quieras utilizar 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 utiliza Google Tag Mánager, 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 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 prácticamente para cualquier tipo de web o bien plataforma que uses pues sencillamente se trata de meter un fragmento de código en el 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 fácil. 😊

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, lo primero que te pedirá es
añadir una cuenta nuevacon un nombre y un país.

Haz click 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 página web y escoge
dónde vas a instalarel contenedor.

Haz clic en el botón
Crear.

En mi caso tengo un contenedor para este weblog 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 empleo y servicio de Google Tag Manager.

Solo tienes que escoger que las admites y hacer clic en el botón
Sí.

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

Por un lado te da un fragmento de código
a)que tienes que añadir
después de la etiqueta en código HTML <head>de las páginas de tu sitio web o weblog. 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 escoger 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 bien no sabes realmente bien dónde puedes hallar 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 poner un ejemplo uso Genesis framework + Metro Pro (te dejopor si te mola) ya te digo que no se hallan 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 tres formas:

1. Con algún
   cliente FTPcomopara conectar con tu hosting y así editar el fichero desde tu ordenador.
2. Con el explorador de archivos del
   panel de control de tu hosting(generalmente es un cPanel).
3. Con el
   editor de archivos que trae WordPressya desde el menú
   Apariencia > Editor. Ahí eliges tu plantilla y el archivo header.php para modificarlo.

Sin duda lo más fácil es usar algún complemento de WP que te añade automáticamente los fragmentos de código de Google Tag Mánager donde corresponda.

Para eso voy a recomendarte dos complementos según sea tu caso:

1. 
   Si utilizas cualquier plantilla que NO sea Genesis:. Solo debes meterle el ID del contenedor de Google Tag Mánager (puedes localizarlo en el fragmento de código como verás en la imagen) y seleccionar 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 principio, mas es la única opción si no quieres meterlo manualmente… ☹️

1. 
   Si usas 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 partes del blog (lo que llama como
   hookso ganchos) para personalizarlo a mi gusto y sin tener que andar 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 tuviera Genesis, lo haría
de la forma manual. Mas 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 click en el botón
Aceptar.

Lo siguiente que verás es sencillamente
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 ya solo nos queda «publicar el contenedor», pues todo lo que 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 click 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 acostumbra a ser la primera herramienta que «conectamos» la mayoría de los mortales cuando empezamos a usar Google Tag Manager por vez primera.

Es la primera etiqueta que se acostumbra a añadir al contenedor, así que voy a explicarte
cómo lo he hechoen este weblog pasito a pasito.

1) Desde el área de trabajo de Google Tag Mánager, arriba a la izquierda haz click en
Nueva etiquetao
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 desquiciado de inventiva y la he llamado Google Analytics…

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

3) Aquí veras todos las clases 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 invito a ), 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 usas Universal Analytics. Si no, en el apartado de
Propiedadverás una opción para.

4) La configuración de esta etiqueta es sencillísima. Solo tienes que elegir

Página vista
como
Tipo de seguimientoy escoger la variable de tu configuración de Google Analytics.

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

5) Se abrirá una ventana para crear
una nueva variabledonde se guardará tu ID de seguimiento de Analytics, y así podrás usar 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(pues 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 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 click en el botón
Guardar.

7) Ya tienes configurado «lo que hará» la etiqueta, que es mandar a Google Analytics
todos los datos de las visitasque recibe tu web o weblog. 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 género de
Página vista, o sea, que se activa
cuando se ve o visita una página.

En esta clase de activadores puedes filtrar para qué páginas concretamente deseas que se active, pero en este caso lleva por nombre
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 click 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 funciona, ¿verdad? Puesto que agárrate a la silla porque 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 hubieras aplicado ya los cambiosen tu contenedor, y así probar que las etiquetas funcionan bien ya antes de publicar.

Ahora si entras a tu página 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 acontecimientos de tu página web y a la derecha las etiquetas «disparadas» por tus activadores a raíz de esos acontecimientos.

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

Mola ¿eh? 😎

Pues cuando confirmes que todo marcha bien, no tienes más que volver al área de trabajo de Google Tag Mánager y hacer clic 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 clic en el botón
Enviarque tienes arriba a la derecha en tu área de trabajo, le pones un nombre y una descripción (si deseas) 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 sitio para registrar las visitas en Google Analytics, recuerda
quitarlopara que no te cuente el doble de visitas.

➤

🔹 Registrar clics en links salientes de afiliados

Ahora que tienes Analytics registrando las visitas de tu página web o bien blog, aprovecharemos para saber los clicks que hacen tus visitas
en los enlaces de afiliadosque tengas (algo que en mi weblog es «crucial» porque primordialmente vivo de esos ingresos).

Viene genial para saber por dónde y cara 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 clic.

Es sencillísimo, en esta imagen vas a ver los
4 mini-pasosque tienes que dar para activarla:

1. Ves al apartado
   Variables.
2. Haz clic en el botón
   Configurar.
3. Elige
   Click URLen 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 afiliadoque puedas tener en tu web o blog. Esta variable la usaremos luego como filtro a fin de que al registrar los clics solo tenga presente estos géneros de enlace.

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 enlaces de afiliado. 😀

Haz click 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 primer paso).
• 
  Tabla RegEx: como no existe un «patrón global» que defina todas y cada una de las URLs de afiliado del mundo, tendrás que añadir tantas filas como «patrones» de géneros de enlaces que puedas tener usando, y a todas y cada una en el campo
  Salidaponle
  true.
• 
  Establecer valor predeterminado: seleccionado y con el valor
  false.
• 
  No distinguir entre mayúsculas y minúsculas: escogido.
• 
  Solo coincidencias totales: no seleccionado.
• 
  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 ciertas que quizá te puedan servir:

➤ La 1ª fila es la que uso (excepto en los enlaces de Amazon Afiliados), pues mis enlaces de referido son «internos» del tipo
miposicionamientoweb.es/visitar/<lo que sea>que entonces te redireccionan al auténtico link saliente de afiliado; esto es así por el hecho de que empleo el pluginque me sirve exactamente para facilitar esta clase de cosas, para ponerles
nofollow(cosa que), reunirlos por categorías, estadísticas de clicks, 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 enlace «largo» que te da Amazon Afiliados, y tendrá en cuenta todos los links del tipo
amazon.es/<lo que sea>tag=miposiweb-21. Aquí tendrás que cambiar mi tag «miposiweb-21» por el que utilices 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 referido para señalar tu número de afiliado.

En definitiva, 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 Mánager 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 link saliente – afiliado. 😁

Cuando hagas clic en el recuadro de
Configuración de la etiqueta, elige la

Universal Analytics
. En este caso selecciona
Eventocomo
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 acontecimiento.
• 
  Acción: haz click en el botón + de la derecha y elige la variable
  Click URL(la URL del enlace de afiliado en el que se hace click).
• 
  Etiqueta: haz clic en el botón + de la derecha y escoge la variable
  Page Path(la página de tu página web o bien weblog desde la que se hace clic).
• 
  Valor: ninguno.
• 
  Hit sin interacción:
  Falso.
• 
  Configuración de Google Analytics: la variable que creaste para(paso 5).

5) Ok, pues ahora haz clic en el recuadro de
Activacióny elige el activador

Clic – Solo enlaces
. Y ponle el nombre que quieras, que en mi caso es
Clic en link de afiliado(¡chúpate esa originalidad!).

Los ajustes que debes configurar para el activador:

• 
  Esperar etiquetas: elegido (2000 milisegundos por defecto).
• 
  Comprobar la validación: seleccionado.
• 
  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, escoge
  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: a fin de que solo se active en los enlaces salientes que deseemos (de afiliado), escoge la opción
  Algunos clicks en enlaces.
• 
  Ejecute este activador cuando tenga sitio un Evento y se cumplan todas estas condiciones: aquí es donde tienes que seleccionar tu variable con la
  Tabla de links 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 afiliado.

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

Haz clic en el botón de
Guardar.

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

Recuerda que ya antes de publicar los cambios puedes usar la
Vista Previapara ver
si ciertamente la etiqueta funcionay registra los clics en enlaces salientes de afiliado, que no se activa haciendo clic en links internos, etc.

En esta imagen por servirnos de un ejemplo ves que al hacer clic en el enlace de referido, en la columna de eventos 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 click sobre el recuadro de esa etiqueta te enseña 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 click, etc.

¡Es bestial! 😊

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

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 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 excelente para saber por dónde y hacia dónde «se escapan» esas visitas si no es para «convertir». 😁

1) Ya antes de crear esta etiqueta, precisas tener hechos los dos primeros pasos del(entonces entenderás por qué):

1. 
   Activar la variable
   Click URL
   para saber la URL del enlace en el que se hará el click (paso 1 del apartado precedente).
2. 
   Crear una variable con una tabla RegExcon las clases de enlaces de referido que tienes (paso 2 del apartado precedente).

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

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

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

Lo sé… 🤯

Cuando hagas clic en el recuadro de
Configuración de la etiqueta, elige la

Universal Analytics
. En un caso así escoge
Eventocomo
Tipo de seguimiento, pues es un evento lo que va a lanzar esta etiqueta para que se registre en tu Google Analytics.

El resto de la configuración:

• 
  Categoría: puedes poner lo que quieras, algo que describa el acontecimiento.
• 
  Acción: haz clic en el botón + de la derecha y escoge la variable
  Click URL(la URL del link en el que se hace click).
• 
  Etiqueta: haz clic en el botón + de la derecha y elige 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 5).

4) O.K., haz click en el recuadro de
Activacióny elige el activador

Clic – Solo enlaces
. Ponle también el nombre que te apetezca; yo lo he llamado
Clic en enlace NO de afiliadopara distinguirlo del activador del apartado precedente.

Los ajustes que tienes que configurar para el activador:

• 
  Esperar etiquetas: escogido (2000 milisegundos por defecto).
• 
  Comprobar la validación: escogido.
• 
  Habilite este activador cuando se cumplan todas estas condiciones: para hacer que se active en todas y cada una de las páginas de tu lugar, escoge
  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: a fin de que solo se active en los links salientes y NO de afiliados, escoge la opción
  Algunos clicks en enlaces.
• 
  Ejecute este activador cuando tenga lugar un Acontecimiento y se cumplan todas estas condiciones: aquí defines concretamente que sean links salientes, y para eso escoge
  Click URLen el primer campo,
  no contieneen el segundo campo y escribe
  tu dominioen el último campo. Y además,
  si tienes links de afiliados, para que no los tenga presente este activador, añade otra fila de condiciones y elige la variable
  Tabla de enlaces 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 clicks en links 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 hechosen el contenedor.

Recuerda que antes de publicar los cambios puedes utilizar la
Vista Previapara ver
si efectivamente la etiqueta funcionay registra los clics en enlaces salientes, que no se activa haciendo clic en links internos, que tampoco se activa en links salientes de afiliado, etc.

En esta imagen por servirnos de un ejemplo ves que al hacer click en el link saliente, en la columna de eventos del panel de depuración aparece el acontecimiento
gtm.linkClicky en la derecha señala que
se ha disparadola etiqueta
Clic enlace saliente – NO afiliado.

Además, si haces clic sobre el recuadro de esa etiqueta te enseña sus propiedades con
la información del eventoque enviará a Google Analytics: la categoría, la URL del enlace, la página desde la que se hace el click, 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 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 luego haces clic en el botón Publicar.

¡Y ya estarás registrando los clicks en enlaces 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 acontecimiento a Google Analytics cuando el usuario haga
scroll después de diez segundosque lleva visitando esa página del blog, pues para mí eso ya no sería un «rebote» tal 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á ella 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 avisar al Google Tag Manager.

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 evento 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 (10 segundos), y cuando pasan esos 10 segundos se queda aguardando a que el usuario haga scroll en algún instante.

Toda la parte en verde se ejecuta cuando el usuario ha hecho scroll. La primera cosa 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 en concreto 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 10 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 web o bien 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 activadory 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 diez segundos
desde ese instante y no antes, a fin de que la tasa de rebote sea más «real».

Haz clic en
Guardarel activador (ponle el nombre que quieras como
Ventana cargada por completo) y en
Guardarla etiqueta (que 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 Google Analytics de que se ha lanzado el evento

Timeout y Scroll
(paso 1).

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

Configuración:

• 
  Tipo de seguimiento: Acontecimiento.
• 
  Categoría: puedes poner lo que quieras, algo que describa el acontecimiento como
  Ajuste Tasa de Rebote GTM.
• 
  Acción: pues también algo descriptivo, como
  Scroll después de diez sg GTM.
• 
  Etiqueta: no hace falta que pongas nada si no quieres. O bien puedes hacer click en el botón + de la derecha y seleccionar la variable
  Page Pathpara saber la página desde la que se lanza el acontecimiento.
• 
  Valor: ninguno.
• 
  Hit sin interacción:
  Falso.
• 
  Configuración de Google Analytics: la variable que creaste para(paso 5).

5) Vale, pues 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

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í tienes que poner exactamente el mismo nombre que le pusiste al evento en el código JavaScript del paso 1, o sea,
  
  Timeout y Scroll
  .
• 
  Este activador se activa en: aquí puedes escoger
  Todos los acontecimientos personalizadosya que verdaderamente solo se activará cuando se lance el acontecimiento 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 acontecimientos que
tú mismo lanzasen tu lugar en el momento en que un usuario hace scroll después de 10 segundos. ¡¿A que mola?! 😉

Haz click en
Guardarel activador y después en
Guardarla etiqueta.

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

Recuerda que ya antes de publicar los cambios puedes usar la
Vista Previapara ver
si ciertamente la etiqueta funcionay lanza y registra el acontecimiento de scroll después del timeout, si no lo registra antes de los primeros diez segundos, etc.

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

Cuando eso ocurre y Google Tag Mánager detecta el evento
Timeout y Scrolllanzado por ese código, entonces «dispara» la otra etiqueta a fin de que
se registre el acontecimiento 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 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 ajustando la tasa de rebote de tu página web o bien weblog! 😃

➤

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

El procedimiento es básicamente exactamente 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 Manager, arriba a la izquierda haz clic en la pestaña donde pone
Administrador.

2) En esta página verás dos 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 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 o bien 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 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 complemento que tengas para tener AMP en tu WP (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 hallar 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 archivo
/wp-content/plugins/amp/templates/single.php.

Pero ojo, por el hecho de que si se actualiza entonces 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 carpeta de tu theme (como lo tengo yo). Esto es, 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 FTPcomopara conectar con tu hosting y así editar el fichero desde tu PC.
2. Con el explorador de archivos del
   panel de control de tu hosting(en general es un cPanel).
3. Con el
   editor de ficheros que trae WordPressya desde el menú
   Apariencia > Editor. Ahí escoges tu plantilla y el fichero single.php para alterarlo.

Esta opción es la más fácil, especialmente si ya empleas. Como podrás ver enexplicando 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 WP haz clic en AMP para acceder a las opciones del complemento. Ahí dirígete a
Settings > Analyticsy de todas las opciones que salen,
activa la de Google Tag Manager, que está prácticamente abajo totalmente.

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 localizar en el fragmento de código o bien en el área de trabajo de GTM), en
Analytics Typeescribe
googleanalyticsy entonces te solicita.

¡Y ya está! 😊

Lo esencial, 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 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 delimitar 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 Manager instalado para AMP! 😃

🔹 Cómo instalar Analytics con Google Tag Manager 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. En verdad, 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 AMPde Google Tag Mánager, arriba a la izquierda haz click 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 clic en el recuadro de
Configuración de la etiquetaverás que la etiqueta que debes elegir es la de

Universal Analytics
.

3) La configuración de esta etiqueta para AMP es aun más fácil. Solo tienes que meter el
ID de seguimientode Analytics y escoger

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 solo queda que hagas click en el recuadro de
Activacióny elijas el activador
All Pagesdel género de
Página vista, a fin de que «salte»
cuando se vea o bien visite cualquiera de tus páginas AMP.

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

Haz click 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 por el hecho de que la propia estructura de AMP no lo deja, mas sí que marcha el modo perfecto 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 eventos 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, mas es mucho más precisa
con el contenedor AMPal no tener el «panel de depuración» de Google Tag Manager.

La verdad es que es muy sencillita de emplear, pero por si las moscas te dejo aquíque tiene de manera directa 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 Google Analytics, recuerda
quitarlopara que no te cuente el doble de visitas.

➤

🔹 Registrar clics en links salientes de afiliados para AMP

Ahora que ya tienes Google Analytics registrando las visitas de tu web o bien blog en AMP, vamos a aprovechar para saber si tus visitas hacen clic
en los links de afiliadosque tengas (esto en mi weblog es «vital» pues es de donde más genera 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 excelente 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 clic 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 elige

Evento
como
Tipo de seguimiento, pues es un acontecimiento 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: puedes poner lo que quieras, algo que describa el evento
  y que es de AMP(para distinguirlo del acontecimiento que lance el contenedor web).
• 
  Acción: pon cuanto quieras, porque 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 click precisamente. 😞
• 
  Etiqueta: haz click en el botón + de la derecha y elige la variable
  Page Path(por lo menos sí que se puede saber la página AMP desde la que se hace click).
• 
  Valor: ninguno.
• 
  Hit sin interacción:
  Falso.

3) O.K., ahora haz clic en el recuadro de
Activacióny elige el activador

Clic
. Y ponle el nombre que desees, que en mi caso es
Clic en enlace 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 definir cuáles son
los géneros de enlaces de afiliado que tienesen tu página web o weblog.

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

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 emplean
para escoger elementos o etiquetas HTML.

Estos selectores en verdad se suelen usar en los archivos CSS para mudar el estilo a esos elementos que se «seleccionan», mas 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 empleo yo para que seleccione tres géneros de enlaces de afiliado que empleo 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 elija las etiquetas en código HTML <
a> (etiquetas de links) 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 referido tengan exactamente el mismo patrón
miposicionamientoweb.es/visitar/<lo que sea>(y luego te redireccionan al verdadero 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 emplear en Amazon Afiliados (estos no los empleo con el plugin de Pretty Enlaces).

➤ La 3ª parte
a[href*=’tag=miposiweb-21′]es lo mismo, pero en un caso así seleccionará las etiquetas <
a> donde el atributo
hrefcontenga
tag=miposiweb-21. Este lo uso 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 Enlaces). Aquí tendrás que cambiar mi tag «miposiweb-21» por el que emplees tú en Amazon Afiliados.

➤ Si en tu caso empleas otros enlaces de referido, busca si sus URLs tienen variables del tipo «
ref=» y «
aff=«, que son variables que suelen añadirse al final de los enlaces de referido 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 realmente. 😉

Haz clic en el botón de
Guardar.

6) Pues 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 Chrome
Tag Assistantpuedes
comprobar que marcha la etiquetay registra los clics en links 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 Mánager
activa la
Vista Previa
.

Ahora abre otra pestaña del navegador, activa el complemento haciendo clic 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 Google Analytics. Haz click en ese recuadro y te mostrará las etiquetas mandadas del tipo
PageViewy
Events. Y si haces click 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 GTMcon la senda de la página AMP desde la que se ha hecho clic.

Puedes probar por ejemplo a hacer click en otros enlaces que NO sean de afiliado para comprobar
que no se lanzan más eventos. Y cuando acabes, ya puedes hacer clic en el botón
Disabledel
Tag Assistanty desactivar la
Vista Previaen Google Tag Manager.

Mola, ¿eh? 😊

Y ahora 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 enlaces 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 links 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 clic en
Nueva etiquetao
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 yelige la

Universal Analytics
.

Mete la variable de
Id de Seguimiento GA(que ya la tendrás creada de apartados precedentes), y después elige

Evento
como
Tipo de seguimiento, por el hecho de que 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:

• 
  Categoría: pon cuanto quieras, algo que describa bien el evento
  y que es de AMP(para no confundirlo luego con los eventos que lance el contenedor web).
• 
  Acción: pon cuanto quieras, por el hecho de que para AMP ya sabes que no existe la variable
  Click URLy no se puede saber la URL donde se hace click exactamente. 😢
• 
  Etiqueta: haz clic en el botón + de la derecha y escoge la variable
  Page Path(para saber al menos la página AMP desde la que se hace clic).
• 
  Valor: ninguno.
• 
  Hit sin interacción:
  Falso.

3) Vale, ahora haz clic en el recuadro de
Activacióny elige el activador

Clic
. Y llámalo como quieras, que en mi caso le he puesto
Clic en enlace NO de afiliado.

Como te decía, las opciones de los activadores para AMP son mucho más limitadas que por servirnos de un ejemplo las que puedes ver para los. Aquí solo puedes emplear selectores de CSS para delimitar cuáles son
los links salientes NO de afiliado que tienesen tu página web o weblog.

Y en
Este activador se activa en, escoge 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 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 y cada uno de 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 señala que elija las etiquetas HTML <
a> (etiquetas de enlaces) que no (:not) contenga
miposicionamientoweb.esen su atributo
href(la URL) pues esos serán links salientes. En mi caso, como uso el pluginque me sirve a fin de que mis enlaces de referido 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ª, con lo que sería como un subconjunto suyo. Esto es, que le estarías diciendo «de los enlaces salientes de la 1ª parte, escoge 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 links cortos de Amazon Afiliados que no empleo con el plugin de Pretty Enlaces.

➤ 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 enlaces largos de Amazon Afiliados (y estos tampoco los empleo con el complemento de Pretty Enlaces). Aquí tendrás que mudar 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 suelen añadirse al final de los enlaces de afiliado para apuntar 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 clicks en enlaces salientes NO de afiliado en tus páginas AMP. Esto lo tienes chupao ya. 😉

Haz click en el botón de
Guardar.

6) El próximo 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 utilizar la extensión de Google Chrome
Tag Assistant, con la que puedes ver si efectivamente
funciona la etiquetay registra los clicks en links 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 6 del.

Activas la
Vista Previa
, habilitas el
Tag Assistanten una pestaña del navegador, entras a una de tus páginas AMP donde tengas links 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 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 clicks 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 servirnos de un ejemplo crear etiquetas de
HTML personalizadoni «anidar» etiquetas. Así que en un caso así
NOpuedo hacer que se lance un evento a Google Analytics cuando el usuario haga scroll después de diez segundos. 💩

Lo que sí puedo hacer es que se envíe
un eventoa 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 20 segundos. De esta manera, el primer acontecimiento 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
Etiquetaso desde el área de trabajo haz clic en
Nueva etiqueta). Yo la he llamado
Envío de evento Timeout mejora de rebote.

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 después elige

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 posicionamiento seo castellon ón:

• 
  Categoría: escribe algo que sea descriptivo
  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 poner un ejemplo defina más en concreto el acontecimiento de timeout de 10 segundos para AMP.
• 
  Etiqueta: como el acontecimiento «simplemente» es para ajustar el rebote puedes dejarlo vacío. O bien puedes hacer click en el botón + de la derecha y seleccionar la variable
  Page Pathpara saber la página AMP desde la que se lanza el evento.
• 
  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 elige el de tipo

Temporizador
.

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

Los ajustes del activador son sencillísimos:

• 
  Intervalo: aquí se ponen los
  10 segundosque deben pasar antes de lanzar el acontecimiento.
• 
  Límite: aquí se pone el límite de tiempo durante el que «funcionará» el activador. Si por servirnos de un ejemplo pusiera 30 segundos, el activador se dispararía cada 10 segundos (los que he puesto en el campo
  Intervalo), esto es, 3 veces (30 sg / 10 sg = tres veces). En mi caso, como solo deseo
  que se lance 1 vez, pongo exactamente el mismo valor que el
  Intervalo(10 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 las páginas.

Y así ya tienes configurada la etiqueta para registrar en Analytics un evento cuando 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 click en el recuadro de
Configuración de la etiqueta yelige 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 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 evento del veinte por cien de scroll para AMP.
• 
  Etiqueta: como el acontecimiento «simplemente» es para ajustar el rebote puedes dejarlo vacío. O puedes hacer clic en el botón + de la derecha y seleccionar la variable
  Page Pathpara saber la página AMP desde la que se lanza el acontecimiento.
• 
  Valor: ninguno.
• 
  Hit sin interacción:
  Falso.

4) Perfecto, ahora haz click 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 activadory escoge el de tipo

Desplazamiento
(que es el del scroll).

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

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

• 
  Porcentajes verticales: aquí pones 20, que será el
  porcentaje de scroll en verticalque habrá que hacer a fin de que se active y se lance el evento.
• 
  Porcentajes horizontales: aquí no pongas nada por el hecho de que 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 acontecimiento cuando un usuario haga
scroll vertical por lo menos el veinte por cien del totalde la página en AMP. 😃

Haz click en
Guardarel activador y después en
Guardarla etiqueta.

5) Y el último paso puesto que es como siempre
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 eventos de timeout y veinte 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 al menos diez segundos y compruebas si efectivamente se «disparan» los 2 acontecimientos.

Y prueba también primero a aguardar los 10 segundos y luego 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 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 luego 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 Analytics no te enseña en sus gráficas los datos que registre hoy tu lugar hasta que no pasen 24 horas, la mejor manera que tienes para revisar «en vivo» si funcionan apropiadamente
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 elijo
Spain > Guadalajara, pues no acostumbra a 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 ciertamente se registran los acontecimientos lanzados por las etiquetas según hago clics en enlaces, etc.

Así puedes revisar
al momentoque 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 Mánager normalmente, pero he querido elegir estos que te dejo aquí pues van
un paso más alládel «tutorial básico», y ahora que ya lo dominas seguro que te semejan también muy 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! diseño de pagina para negocio madrid #x1F603;