CxF3mo instalarlo y configurarlo paso a paso

提供: owp.valuesv.jp
移動: 案内検索

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 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 funcionando. 😊



¡Vamos al lío!



 



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



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



 



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



 



 



🏷️ ¿Qué es Google Tag Mánager?



GTM o eles un sistema fácil y gratuitobasado en «etiquetas» o bien tagscon las que puedes medir y analizar todo cuanto pasaen tu web o bien weblog (incluso en su versión AMP) o en tu aplicación de móvil.



 



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



 



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



 



Luego directamente 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é enlaces se hace click, cuándo se hace scroll, hacer tests A/B, etc.



 



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



¡No me digas que no mola! 😁



 



🏷️ ¿Para qué sirve Google Tag Manager?



Pues Google Tag Mánager sirve para conectar una web o una app con herramientas de todo tipode forma rápida y fácil gracias a su sistema de etiquetas.



 



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



 



Estos son solo algunos ejemplos 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 muy completa para gestionar campañas de publicidad digital de todo género y al detalle.



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



➤ Etcétera, etc…



 





 



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



 



Y si eres de los que además precisa 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 pues soy de los que piensa que para saber bien cómo se utiliza Google Tag Manager, primero hay que entender qué es y para qué sirve.



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



 




<video>







<source src="/media/20MknrK6ZrvY3dwua5/giphy.mp4"></source>







</video>



 



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 Mánager en WordPress



En verdad estos pasos te valen casi para cualquier tipo de web o plataforma que utilices pues simplemente 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 WP por el hecho de que es lo que uso yo en este blog, así de fácil. 😊



 



1) Lo primero que debemos hacer es entrar eny loguearnos con nuestro correo y contraseña de Google.



Haz clic en el botón Siguiente.



 





 



2) Si todavía no tienes ninguna cuenta creada, lo primero que te pedirá es añadir una cuenta 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 página web y elige dónde vas a instalarel contenedor.



Haz click 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 debes seleccionar que las admites y hacer clic en el botón .



 





 



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 debes añadir después de la etiqueta en código HTML <head>de las páginas de tu sitio 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 elegir entre 2 opciones principalespara meter estos fragmentos de código en tu web y más específicamente en WordPress:



 



Puede ser «complicada» si no tienes mucha idea de código o no sabes muy 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-tema-que-uses>/header.php, mas en mi caso que por poner un ejemplo empleo 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 ya antes una copia del archivo 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 alojamiento web y así editar el fichero desde tu PC.








  2. Con el explorador de archivos del panel de control de tu hosting(por norma general es un cPanel).








  3. 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 plugin de WordPress 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 tienes que meterle el ID del contenedor de Google Tag Manager (puedes localizarlo en el fragmento de código como verás en la imagen) y elegir dónde deseas que meta el código.










 



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



 





 











  1. Si utilizas una plantilla de Genesis:(el que uso ). Lo tengo desde que me instalé Genesis y es una maravilla porque me deja meter distintos códigos por diferentes partes del weblog (lo que llama como hookso ganchos) para personalizarlo a mi gusto y sin tener que andar tocando directamente los ficheros de la plantilla.










 



Solo debes 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. 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 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 ya solo nos queda «publicar el contenedor», pues todo lo que hagas o bien alteres en esta área de trabajo no se aplicará en tu página 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 deseas).



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



 





 



¡Y ya tienes Google Tag Mánager 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 emplear Google Tag Mánager 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 blog pasito a pasito.



 



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 inventiva y la he llamado Google Analytics…



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



 





 



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



 



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



 





 



Para saber si estás utilizando 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 comienza por UAes que ya utilizas 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 debes seleccionar Página vista como Tipo de seguimientoy seleccionar 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(por el hecho de que 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 Analytics todos los datos de las visitasque recibe tu página web o bien blog. Ahora toca configurar el activador, o sea, «cuándo» se enviará esta información.



 





 



Haz clic en el recuadro de Activación.



 



8) Aquí verás que por defecto ya hay un activador creado que es del tipo de Página vista, es decir, que se activa cuando se ve o 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í 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 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? Pues agárrate a la silla porque se puede hacer merced a la opción de Vista Previaque tiene Google Tag Mánager.



 



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



 





 



Ahora si entras a tu web desde otra pestaña (en exactamente el mismo navegador donde estés usando Google Tag Mánager) 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 escoges el evento Page Viewverías las etiquetas disparadas por ese evento, que en un caso así ha sido la etiqueta de Google Analytics que acabas de crear.



Mola ¿eh? 😎



 



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



 





 



Ahora sí, ya puedes publicar una nueva versió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 quieres) y luego haces click en el botón Publicar.



 



¡Y ya tienes Analytics instalado con Google Tag Mánager! 😃



 



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



 





 



🔹 Registrar clics en links salientes de afiliados



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



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



 



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



 



Es 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 géneros de links de afiliadoque puedas tener en tu página web o bien weblog. Esta variable la usaremos luego como filtro a fin de que al registrar los clicks solo tenga presente estos tipos de enlace.



 



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



 





 



Ponle el nombre que quieras, yo le he puesto Tabla de links 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 paso inicial).








  • 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 tipos de links que puedas tener usando, y a todas en el campo Salidaponle true.








  • Establecer valor predeterminado: seleccionado y con el valor false.








  • No distinguir entre mayúsculas y minúsculas: elegido.








  • Solo coincidencias totales: no escogido.








  • Habilitar conjuntos de atrapa y substituir funciones: no escogido.










 





 



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 empleo yo (excepto en los links de Amazon Afiliados), por el hecho de que mis enlaces de afiliado son «internos» del tipo miposicionamientoweb.es/visitar/<lo que sea>que entonces te redireccionan al verdadero link saliente de afiliado; esto es así por el hecho de que uso el pluginque me sirve exactamente 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 link acortado de Amazon Afiliados, con lo que cualquier enlace que tenga amzn.to/lo contará como de afiliado.



➤ La 3ª fila sirve para el enlace «largo» que te da Amazon Afiliados, y tendrá en cuenta todos y cada uno de 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 afiliado para señalar 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 Mánager arriba a la izquierda, haz click 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 click en el recuadro de Configuración de la etiqueta, escoge la Universal Analytics . En este caso escoge Eventocomo Tipo de seguimiento, por el hecho de que 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: puedes poner lo que quieras, algo que describa el acontecimiento.








  • Acción: haz click en el botón + de la derecha y escoge 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 elige 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).










 





 



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 enlace de afiliado(¡chúpate esa originalidad!).



 



Los ajustes que tienes que 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 lugar, escoge 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: a fin de que solo se active en los enlaces salientes que queramos (de afiliado), elige la opción Algunos clics en enlaces.








  • Ejecute este activador cuando tenga lugar un Acontecimiento y se cumplan todas estas condiciones: aquí es donde tienes que 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 links 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 clic 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 efectivamente la etiqueta funcionay registra los clics en links salientes de afiliado, que no se activa haciendo click en links internos, etc.



 



En esta imagen por ejemplo ves que al hacer clic en el enlace de referido, en la columna de acontecimientos del panel de depuración aparece el evento 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 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 registrando los clics en links salientes de afiliado! 😃



 





 



🔹 Registrar clicks en enlaces salientes NO de afiliados



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



 



1) 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 los tipos de enlaces de referido que tienes (paso dos del apartado anterior).










 



👀 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 click en Nueva etiquetao Añadir nueva etiqueta(es lo mismo).



 





 



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



Lo sé… 🤯



 



Cuando hagas clic en el recuadro de Configuración de la etiqueta, elige la Universal Analytics . En un caso así selecciona Eventocomo Tipo de seguimiento, por el hecho de que es un evento lo que va a lanzar esta etiqueta para 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 escoge la variable Click URL(la URL del link en el que se hace click).








  • Etiqueta: haz click en el botón + de la derecha y escoge la variable Page Path(la página de tu página web o bien blog desde la que se hace click).








  • Valor: ninguno.








  • Hit sin interacción: Falso.








  • Configuración de Google Analytics: la variable que creaste para(paso 5).










 





 



4) O.K., haz clic en el recuadro de Activacióny escoge el activador Clic – Solo enlaces . Ponle también el nombre que te apetezca; yo lo he llamado Clic en enlace NO de afiliadopara diferenciarlo del activador del apartado anterior.



 



Los ajustes que debes configurar para el activador:



 





 











  • Esperar etiquetas: seleccionado (2000 milisegundos por defecto).








  • Comprobar la validación: elegido.








  • 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, 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: 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 y cada una estas condiciones: aquí defines en concreto que sean enlaces 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 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 enlaces 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. Fácil, ¿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 usar la Vista Previapara ver si ciertamente la etiqueta funcionay registra los clicks en links salientes, que no se activa haciendo clic en links internos, que tampoco se activa en links salientes de afiliado, etc.



 



En esta imagen por poner un ejemplo ves que al hacer click en el link saliente, en la columna de acontecimientos del panel de depuración aparece el evento gtm.linkClicky en la derecha indica que se ha disparadola etiqueta Clic link saliente – NO 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.



¡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 después haces click en el botón Publicar.



 



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



 





 



🔹 Ajustar la tasa de rebote



Ya te manejas por Google Tag Manager 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 weblog 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 10 segundosque lleva visitando esa página del blog, por el hecho de que para mí eso ya no sería un «rebote» como lo entiende Google Analytics.



¡Vamos 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) y que sea de tipo HTML personalizado .



 





 



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



 





 



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



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



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



 



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



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



Y concretamente la parte en verde con negritaes la que «notifica» al Google Tag Mánager con un evento de que el usuario hizo scroll después de 10 segundos.



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



 



2) Ahora toca crear el activador que hará que se añada este código HTML en tu web o bien weblog. 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 escoge el de tipo Página vista – La ventana se ha cargado .



 





 



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



 



Haz click en Guardarel activador (ponle el nombre que quieras 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 acontecimiento Timeout y Scroll (paso 1).



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



 



Configuración:











  • Tipo de seguimiento: Evento.








  • Categoría: puedes poner cuanto quieras, algo que describa el evento como Ajuste Tasa de Rebote GTM.








  • Acción: pues también algo gráfico, como Scroll después de 10 sg GTM.








  • Etiqueta: no hace falta que pongas nada si no deseas. 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 5).










 





 



5) Vale, puesto que 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 – Evento personalizado .



 





 



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



 



Los ajustes del activador son 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 elegir Todos los eventos personalizadosya que realmente 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 sitio cuando un usuario hace scroll después de diez 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 emplear la Vista Previapara ver si ciertamente la etiqueta funcionay lanza y registra el evento de scroll después del timeout, si no lo registra ya antes de los primeros diez segundos, etc.



 





 



En esta imagen por poner 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 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 funciona 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 luego haces click en el botón Publicar.



 



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



 





 



 



⚡ Cómo instalar Google Tag Manager en Wordpress 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 genera Google Tag Manager en las etiquetas <head> y <body>. Solo que esta vez se hace en las páginas AMP.



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



 



1) Desde el área de trabajo de Google Tag Mánager, 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 click en el botón +para añadir un nuevo contenedora tu cuenta.



 





 



3) Como cuando hiciste el contenedor web, solo debes ponerle un nombre y en un caso así escoger 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 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 debes 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 en concreto 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 encontrar 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, por el hecho de que si se actualiza luego el plugin perderías los cambios que hagas en ese fichero, así que lo propio es que copies ese archivo y lo pegues en una carpeta llamada /amp/ dentro de la carpeta de tu tema (como lo tengo ). Esto es, editar el archivo /wp-content/themes/<nombre-del-theme-que-uses>/amp/single.php.



 



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



 











  1. Con algún cliente FTPcomopara conectar con tu alojamiento web y así editar el fichero desde tu PC.








  2. Con el explorador de archivos del panel de control de tu hosting(generalmente 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 modificarlo.










 





 



Esta opción es la más fácil, sobre todo si ya empleas. Como podrás ver enexplicando cómo se configura, este complemento es mucho mejor que el «oficial», más completo y con actualizaciones incesantes.



 



Desde el menú de la izquierda del escritorio de tu WP haz click 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á casi abajo del todo.



 



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



 




<video>







<source src="/media/229Ft2LPcucdU6LyLY/giphy.mp4"></source>







</video>



 



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 luego te solicita.



¡Y ya está! 😊



 



Lo esencial, lo hagas como lo hagas, es que te pongas bragas… No, de verdad, 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 click en el botón Aceptar.



 



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



 



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 click arriba a la derecha en el botón Enviar, y se te abrirá una ventana donde puedes acotar el nombre de esa versión que vas a publicar y una descripción (esto es opcional).



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



 



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



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



 





 



¡Y ya tienes Google Tag Mánager agencia de marketing digital en canet ! 😃



 



🔹 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. En verdad, 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 Mánager, arriba a la izquierda haz clic en Nueva etiquetao Añadir nueva etiqueta(es exactamente 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 escoger 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 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) O.K., puesto que ahora ya solo queda que hagas click en el recuadro de Activacióny escojas el activador All Pagesdel tipo de Página vista, a fin de que «salte» cuando se vea o visite cualquiera de tus páginas AMP.



 





 



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



Haz click en el botón de Guardar.



 



5) Puesto que 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 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 Mánager.



 





 



La verdad es que es muy sencillita de utilizar, pero por si las moscas 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 clics en enlaces salientes de afiliados para AMP



Ahora que ya tienes Analytics registrando las visitas de tu web o weblog en AMP, vamos a aprovechar para saber si tus visitas hacen click en los links de afiliadosque tengas (esto en mi weblog es «vital» pues 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 Manager 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 link 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 3), y luego escoge Evento como Tipo de seguimiento, por el hecho de que es un acontecimiento 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 evento y que es de AMP(para diferenciarlo del evento que lance el contenedor web).








  • Acción: pon cuanto quieras, pues 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 elige la variable Page Path(al 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 click en el recuadro de Activacióny elige el activador Clic . Y ponle el nombre que quieras, 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 acotar cuáles son los tipos de enlaces de afiliado que tienesen tu página web o bien blog.



 





 



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



 



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 utilizan para elegir elementos o etiquetas HTML.



Estos selectores de verdad se suelen emplear en los archivos CSS para mudar el estilo a esos elementos que se «seleccionan», pero en un caso así la etiqueta de AMP emplea estos selectores para delimitar en qué elementos HTML aplicar el activador Clic .



 



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



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



 



➤ La 1ª parte a[href*=’miposicionamientoweb.es/visitar/’]le indica que seleccione las etiquetas HTML < a> (etiquetas de links) donde el atributo href(la URL) contenga miposicionamientoweb.es/visitar. En mi caso, uso el pluginque me sirve para que mis enlaces de referido tengan el mismo patrón miposicionamientoweb.es/visitar/<lo que sea>(y luego 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 utilizar en Amazon Afiliados (estos no los uso 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 suelen llevar el ID o bien «tag» del afiliado (y estos tampoco los uso con el plugin de Pretty Links). Aquí tendrás que mudar mi tag «miposiweb-21» por el que uses tú en Amazon Afiliados.



➤ Si en tu caso usas otros enlaces de afiliado, busca si sus URLs tienen variables del tipo « ref=» y « aff=«, que son variables que acostumbran a añadirse al final de los enlaces de referido 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 clicks 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) Pues lo que toca ahora es publicar una nueva versión con los cambios hechosen el contenedor AMP.



 



Como te afirmé, no existe un panel depuración con la opción de Vista Previapara los contenedores AMP, pero con la extensión de Google Chrome Tag Assistantpuedes comprobar que marcha la etiquetay registra los clics 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 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 referido y haz click en uno de eso enlaces de referido.



 



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



 





 



En la última imagen verás que arriba a la derecha tienes unas flechas para moverte por los acontecimientos mandados. En mi caso ya ves que me muestra adecuadamente el acontecimiento «disparado» de Link de afiliado en AMP GTMcon la senda de la página AMP desde la que se ha hecho click.



 



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



Mola, ¿eh? 😊



 



Y 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 clic en el botón Publicar.



 



¡Y ya estarás registrando los clics en links 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 clics 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í…). Incluso así, esta etiqueta viene genial para saber las páginas AMP por las que se «escapan» tus visitas. 😁



 



1) Desde el área de trabajo de Google Tag 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 link 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 anteriores), y después elige Evento como Tipo de seguimiento, porque aquí también 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: pon cuanto quieras, algo que describa bien el evento y que es de AMP(para no confundirlo entonces con los acontecimientos que lance el contenedor web).








  • Acción: pon cuanto quieras, por el hecho de que para AMP bien 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 por lo menos la página AMP desde la que se hace click).








  • 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 poner un ejemplo las que puedes ver para los. Aquí solo puedes utilizar selectores de CSS para delimitar cuáles son los enlaces salientes NO de afiliado que tienesen tu web o weblog.



 





 



Y en Este activador se activa en, elige la opción Todas las páginas(para que se active en todas y cada una de 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 seleccione 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 concatena 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 seleccione las etiquetas HTML < a> (etiquetas de enlaces) que no (:not) contenga miposicionamientoweb.esen su atributo href(la URL) por el hecho de que esos serán enlaces salientes. En mi caso, como uso el pluginque me sirve para 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ª, por lo que sería como un subconjunto suyo. Esto es, que le estarías diciendo «de los links 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 links cortos de Amazon Afiliados que no empleo con el plugin de Pretty Links.



➤ La 3ª parte :not([href*=’tag=miposiweb-21′])está pegada a la 2ª, así que sería otro subconjunto más de 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 emplea en los links largos de Amazon Afiliados (y estos tampoco los uso 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 usas 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 referido para señalar tu número de afiliado. Así podrías añadir juntar otro selector más por poner un ejemplo del tipo :not[href*=’ref=’].



 



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



Haz 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 usar la extensión de Chrome Tag Assistant, con la que puedes ver si efectivamente funciona la etiquetay registra los clics 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 enlaces salientes NO de afiliado, haces click en uno de ellos y verificas si ciertamente se «dispara» el evento 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 por fin puedes publicar la nueva versióncon todos 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, pues como ya tienes nivel Jedi en esto de crear etiquetas para AMP, voy a enseñarte las etiquetas que he instalado también en mis páginas AMP para ajustar la tasa de rebote a mi gusto ().



 



A diferencia del contenedor web, el contenedor AMP está mucho más limitado y no deja por poner un 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 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. Así, el primer evento 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 evento 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, por el hecho de que 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 entonces con los acontecimientos que lance el contenedor web).








  • Acción: pon lo que quieras, algo que por poner un ejemplo defina más específicamente el evento 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 acontecimiento.








  • Valor: ninguno.








  • Hit sin interacción: Falso.










 





 



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



 



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



 



Los ajustes del activador son sencillísimos:











  • Intervalo: aquí se ponen los 10 segundosque deben pasar ya antes de lanzar el acontecimiento.








  • Límite: aquí se pone el límite de tiempo durante el que «funcionará» el activador. Si por ejemplo pusiera 30 segundos, el activador se dispararía cada 10 segundos (los que he puesto en el campo Intervalo), o sea, tres 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 inmediatamente cuando se haya generado: NO seleccionado, 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 Google Analytics un acontecimiento en el momento en que un usuario ha pasado 10 segundos en tu página AMP.



Mola, ¡¿eh?! 😉



 



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



 



3) Ahora toca añadir una nueva etiqueta a parte (haz clic en Nueva etiqueta) para el acontecimiento de scroll. Yo la he llamado Envío de evento 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 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 concretamente el acontecimiento del 20 por cien de scroll para AMP.








  • Etiqueta: como el evento «simplemente» es para ajustar el rebote puedes dejarlo vacío. O 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.










 





 



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 desees, que en mi caso es Scroll del veinte 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 acontecimiento.








  • Porcentajes horizontales: aquí no pongas nada pues 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 Analytics un evento en el momento en que un usuario haga scroll vertical al menos el 20 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 puesto que 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 veinte por ciento de scroll por separado, 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 hacia abajo, espera también cuando menos 10 segundos y compruebas si ciertamente se «disparan» los dos eventos.



 





 



Y prueba también primero a aguardar los diez segundos y luego a hacer scroll, a ver si registra bien el orden en que se lanzanlos acontecimientos.



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 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 click en el botón Publicar.



 



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



 





 



 



🏷️ Revisar las etiquetas en Google Analytics en tiempo real



Como Analytics no te enseña en sus gráficas los datos que registre el día de hoy tu sitio hasta el momento en que no pasen 24 horas, la mejor forma que tienes para comprobar «en vivo» si marchan correctamente las etiquetas que acabas de publicares usando la vista de En Tiempo Realde Google Analytics.



 





 



Aquí lo que suelo hacer yo es, primero entro en En Tiempo Real > Ubicacionesy selecciono Spain > Guadalajara, por el hecho de que 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 acontecimientos lanzados por las etiquetas según hago clics en enlaces, etc.



 





 



Así puedes comprobar 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 Manager normalmente, mas he querido elegir estos que te dejo aquí por el hecho de que van un paso más alládel «tutorial básico», y ahora que 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! 😃