📊¡Tutorial Google Tag Manager y Google Analytics 4!

Hola amigos de Marieú Technology Corporation, ¡tutorial Google Tag Manager y Google Analytics 4! En particular, en esta guía, paso a paso, aprenderás con este tutorial de GTM y GA4, es decir, a agregar etiquetas en un sitio web y obtener gráficos analíticos.

Google Tag Manager es una herramienta digital de Google, que nos permite gestionar etiquetas en un sitio web. Las etiquetas son segmentos de código, aplicados en una página web, que permiten dar seguimiento a la interacción de los clientes.

Google Analytics es una herramienta digital de Google, que nos permite medir el tráfico y las interacciones de los usuarios en el contenido de una página web. Por consiguiente, mediante esta herramienta obtenemos distintos tipos de gráficos y reportes dentro de un periodo establecido.

¿Cómo aplicar Google Tag Manager y Google Analytics en un sitio web?

Entonces, aquí tenemos el diagrama de las aplicaciones que nosotros vamos a utilizar, para poder implementar estas etiquetas, dentro de nuestra página web. De hecho, vamos a aterrizar todas las aplicaciones dentro de WordPress. Dentro de wordpress tenemos que tener instalado Elementor, como plugin, que es un maquetador web y, dentro de Elementor, nosotros vamos a editar la página web o sino una plantilla. Cualquiera de las dos opciones va a ser válido para colocar una etiqueta.

Número dos, nosotros vamos a asignar un código, al texto, con el nombre del evento. Nosotros les estamos dejando aquí, el código, para que, solamente, sea super sencillo reemplazar el nombre del evento y podamos actualizar y guardar los cambios. Número tres, nosotros vamos a asignar un atributo personalizado. Este atributo está conformado por el ID, barra y nombre del evento. Vamos a agregar, esencialmente, dos cosas en Elementor. Lo que es el código del nombre del evento y asignar el atributo personalizado.

Lo que respecta a Google Tag Manager, nosotros tenemos que disponer, inicialmente, de una configuración de etiqueta de Google Analytics 4. Dentro de esta etiqueta, tiene que estar activado con todas las páginas o «all page». Número dos, vamos a crear la etiqueta o tag de la página de Elementor. Nos vamos a entrar en una página, recuerden que ya en Elementor tenemos lo que es la página web y, para esa página, nosotros vamos a crear la etiqueta o tag de la página de Elementor. ¿Con qué está conformado dicha etiqueta?, con el nombre del evento y la etiqueta de configuración.

Número tres, vamos a agregar el activador de la etiqueta. Recuerden que, por cada etiqueta, tiene que tener un activador, para que exista ese envío de datos a Google Analytics y nosotros podamos visualizar, gráficamente, la Data. Entonces, dentro del la activador de la etiqueta tenemos varios tipos de clics y varios tipos de activadores. Uno de ellos es tipo clic de la clase todos los elementos. Entonces, agregamos tipo clic y ponemos todos los elementos.

Finalmente, el número cuatro, nosotros para poder visualizar si, efectivamente, está corriendo ese flujo de datos, nosotros vamos a seleccionar vista previa y, en vista previa, nosotros vamos a conectarnos con el dominio. Todo eso lo vamos a hacer dentro de Google Tag Manager. Ya para Google Analytics, nosotros, simplemente, vamos a visualizar toda la data que estamos enviando con una página web, en este caso, desde una página web de Elementor.

Vamos a visualizar toda la Data de la página web por DebugView. Ese DebugView, nosotros podemos visualizar, en tiempo real, por cada segundo, según los movimientos que tengamos en la página. Hacemos clic en un botón, hacemos clic en un icono y se va a poder visualizar dentro de esta plataforma de DebugView.

Diagrama de Arquitectura: Colocar Etiquetas en una Página Web.
Fuente: Propia, mediante software Miro.

Aquí ya estamos en WordPress, nos ubicamos dentro de páginas, ya en páginas, nosotros lo que vamos a hacer es colocar un tag dentro del nuevo servicio que estamos ofreciendo. El nuevo servicio es Editor de Vídeos y está dentro de la página de Precios Editor de Vídeos, ponemos editar con Elementor. Ya tenemos nuestra página para poder incluir los tags. En nuestro caso, recuerden que, en los vídeos anteriores, habíamos trasladado todos los widgets, de las secciones, lo habíamos trasladado en una plantilla y lo estamos integrando como Shortcode.

Entonces, nosotros lo estamos trabajando como plantilla. Entonces, si queremos integrar nosotros alguna etiqueta, tenemos que hacerlo en la plantilla. En su caso, si ustedes lo tienen directamente todo en las secciones, todos los widgets, los textos y botones dentro de la página, directamente la página de Elementor, no hay problema, lo colocamos aquí. Nosotros vamos a irnos a las plantillas. Entonces, nos dirigimos a plantillas. Hemos creado dos, una que es para los precios edición de vídeos mensual, en el periodo mensual, y el otro en un periodo anual. Entonces, para ambos casos, se van a colocar las etiquetas, los tags, ponemos editar con Elementor.

Listo, entonces, una vez que termino de cargar, ya estamos dentro de la plantilla, nosotros vamos a colocar los tags dentro de los botones. Tenemos tres botones, cada cada uno de estos botones para los planes. Tenemos Plan Classic va a tener un botón y una etiqueta, para el Plan Modern también «lo quiero» y lo mismo para Plan Choice, tiene su botón y tendrá su etiqueta. Entonces, para cada uno de estos planes: Plan Classic, Plan Modern y Plan Choice, van a tener sus etiquetas. Entonces, seleccionamos «lo quiero» y se apertura la opción de contenido.

Dentro de contenido tenemos el texto, este es el texto que está asignado, actualmente, en el botón. Y tenemos el enlace, si seleccionamos dentro del botón, nos direcciona a nuestro WhatsApp, al Whatsapp de Marieú. Si ponemos «opciones del enlace» vamos a ver lo que es el atributo, el atributo personalizado o también el ID, el valor del ID. Entonces, lo que vamos a hacer es lo siguiente, vamos a colocar el código del texto, que vimos inicialmente, y vamos a colocar los atributos. Aquí, dentro del diagrama, tenemos el código, es el código del texto donde nosotros vamos a cambiar, solamente, el nombre del evento.

Lo vamos a colocar todo en minúscula: «precio mensual classic» y lo quiero: «LQ». Solamente algunas iniciales de todo, para que no sea este ID demasiado extenso, demasiado largo, para que pueda reconocer. Vamos a poner solamente algunas iniciales. Entonces, copiamos todo el código del texto y lo pegamos en la plantilla de Elementor, aquí, seleccionamos y pegamos. Revisamos y ¡ahí está! Entonces, actualmente está con el texto del botón, texto de página web. Nosotros lo vamos a cambiar, este es el texto, vamos a poner: «lo quiero» signo de exclamación, copiamos nuevamente y pegamos. Este es el texto de la página web, nosotros lo vamos a cambiar. Vamos a colocar «lo quiero» y signo de exclamación, copiamos nuevamente y ¡aquí! vamos a pegar, pegamos y ¡ahí está!

Entonces, ya tiene el texto anterior que nosotros inicialmente colocamos dentro del botón, ya tiene el texto inicial que del botón y, además de eso, tiene lo que es el ID, el ID que hemos asignado, ¡ahí está el ID!. Entonces, tiene el texto y adicionalmente tiene el ID. Ahora, vamos a entrar a los atributos. Los atributos es algo similar, nosotros vamos a cambiar el nombre del evento y lo tenemos aquí. Tiene que ser el mismo, si es que no no coincide, nos va a salir error dentro de Google Tag Manager. Entonces, ya cambiamos el atributo, copiamos y lo vamos a pegar dentro de la plantilla, dentro de «key value». Recuerden siempre actualizar, por cada uno de ellos.

Ahora, algo similar con el segundo plan, plan Modern, vamos a hacer lo mismo. Seleccionamos el botón y aquí vamos a incluir el texto. Para este caso, nosotros vamos a colocar precio mensual «modern», vamos a colocar «mod lo quiero» y para el atributo lo mismo. Seleccionamos aquí y lo pegamos acá, en el atributo. Entonces, para cada uno también va a ser lo mismo: código, el texto del nombre del evento y pegamos aquí, vemos como está. Ahora vamos con el «key value» vamos a pegar aquí ¡ahí está!

Finalmente, con el último plan, plan Choice, seleccionamos y ponemos el texto. Nosotros, para este caso, vamos a cambiar el «mod» por el «choice». Seleccionamos aquí y también lo ponemos dentro del atributo. Lo ponemos dentro de la plantilla y aquí lo pegamos. Abrimos el atributo y también lo pegamos, aquí lo pegamos. Una vez que los tres planes ya están incluidos los textos y los atributos, ponemos actualizar. Recuerden que este servicio de edición de vídeos tiene dos periodos, lo estamos mostrando por periodo mensual y, por aquí, tenemos el periodo anual.

En el periodo anual también vamos a colocar los textos y los atributos. Seleccionamos el botón del primer plan y nos vamos aquí. Texto y vamos a reemplazarlo. Para es caso, nosotros vamos a colocar anual y «classic», lo mismo con el «key value», vemos aquí lo mismo, pegamos lo mismo. Vamos a asignarlo dentro de la plantilla. Tenemos aquí el primer botón, pegamos en el texto, vamos con el atributo y pegamos. Ahora con el segundo plan de periodo anual, dentro del botón «lo quiero», ¡aquí está! para este caso va a ser, simplemente, cambiamos el «class» por el «mod». Ponemos «mod» y aquí también, lo colocamos dentro del botón, en la plantilla, y lo pegamos aquí. Lo mismo con el «id value».

Finalmente, con el último plan, plan Choice de periodo anual, también tiene un botón y le vamos a asignar el texto. Vamos a colocar solamente «cho» y también en el «id value». Copiamos el código de texto, pegamos en el texto del tercer plan. Finalmente, ya para terminar con estos tags de el último botón, vamos a pegar el «key value», copiarmos el «key value» del último plan de Choice y lo pegamos aquí. Recuerden también guardar y actualizar cambios. Como es una plantilla y estamos utilizando el short code, basta solamente actualizar la página, para que ya tenga o disponga de los tags dentro de los botones.

No es necesario mover dentro de la página porque lo estamos trabajando con short code, es decir, cualquier cambio que realicemos dentro de la plantilla, se va a ver reflejado dentro de la página. Ahora vamos a configurar dentro de Google Tag Manager. Vamos a dedicar otro vídeo para especificar cómo creamos una cuenta, cómo enlazamos el dominio y cómo integramos, más a detalle, el código del header y del footer. Recuerden que, inicialmente, para que el flujo de datos funcione con nuestra página web, nosotros tenemos que hacer una configuración de Google Analytics, ¡aquí está! Tenemos que crear una etiqueta y tenemos que generar una activación para todas las páginas. Y eso ¿cómo va a funcionar? con algunos códigos que nosotros vamos a mostrar ya para los próximos vídeos.

Entonces, vamos a crear una nueva, seleccionamos nueva etiqueta y aquí nos genera una ventana constituida, conformada por dos partes: la configuración de la etiqueta y el activador. Entonces, vamos a la configuración de etiqueta, dentro de la configuración de etiqueta, no nosotros vamos a elegir el tipo de etiqueta. Para este caso en particular, nosotros vamos a seleccionar Google Analytics. Vamos a ubicarnos dentro de evento. Nosotros queremos crear un evento, de las etiquetas que hemos asignado, en nuestra página de precios de editor de vídeos, ¡ya está! Una vez seleccionado, nosotros vamos a colocar la etiqueta de configuración GA4 config.

Recuerden que esta es la etiqueta de la configuración inicial del Google analytics 4, el cual, está asignada, está activada para todas las páginas de nuestro dominio. Ahora, vamos a asignar el nombre del evento, algún nombre que sea reconocido. Este nombre del evento se va a visualizar dentro de la plataforma de Google Analytics. Vamos a colocar precios mensual Classic «lo quiero». Recuerden que es el primer periodo mensual, para el tipo de plan Classic dentro del botón «lo quiero». Entonces, con ese nombre del evento nosotros ya podemos distinguir, claramente, de qué botón se trata. Después de agregar esto, recuerden también que tenemos que asignar el título de la etiqueta. Este es el título de etiqueta. En el título de etiqueta, nosotros vamos a colocarlo en mayúscula «precios mensual Classic lo quiero».

Una vez ahí, nosotros lo que vamos a hacer ahora es colocar un activador, asignarle a esta etiqueta un activador. Vamos a seleccionar aquí, hacemos clic y, por defecto, se nos apertura todos los activadores que ya tenemos dentro de nuestro Google Tag Manager. Nosotros vamos a crear uno nuevo, vemos aquí más «nuevo activador», seleccionamos la configuración del activador y nos vamos a centrar dentro del tipo de activador de la clase «clic». Hay distintos tipos de activadores, nosotros nos vamos a centrar, para este caso, tipo de activador de «clic».

Si hacemos una comparativa, el tipo de clic de solo enlaces con todos los elementos, básicamente, el de solo enlaces podemos asignar a las páginas en general. Si el usuario ingresa a una página principal, una página de servicios, contactos, precios, de repente conócenos, cada uno de estos accesos nosotros podemos integrar el link o el enlace completo. Entonces, si es que se parece a este enlace, se activa; versus, el segundo, que son todos los elementos, podemos asignar este evento, este activador, para una etiqueta dentro de un botón, dentro, de repente, de un icono, icono de YouTube. Selecciona el icono de YouTube, se dirige a la página de YouTube y te sale un disparador, te sale un activador y, en el dashboard, nosotros podemos visualizar que el usuario, dentro de tu página web, se aterrizó en un icono de YouTube y se dirigió a tu página de YouTube, la página de tu canal de YouTube.

Entonces, quiero que veamos, al menos la diferencia, si es que nosotros seleccionamos «solo enlaces» o también seleccionamos «todos los elementos». Para este activador, nosotros vamos a colocar «todos los elementos». Una vez ahí, se apertura la configuración del activador. Vamos a colocar «algunos clics» para aterrizar en el ID. Una vez aquí, vamos a poner el tipo de «click ID» y que este ID «sea igual a» el ID que colocamos en Elementor. Para el primer activador, lo tenemos aquí: Plan Classic Mensual, seleccionamos y ¡ahí está!, recuerden el ID. Pueden extraerlo del texto sino del atributo, seleccionamos, copiamos y pegamos aquí, ¡ahí está!

Recuerden que tiene que ser tal cual, si nos equivocamos en una letra, el activador no se va a generar, tengamos cuidado ahí. Colocamos el título antes de guardar. Se recomienda que sea la misma que la etiqueta, para evitar, de repente, algunas confusiones posteriores. Vamos a colocar precios, mensual, «classic» «lo quiero», colocamos guardar. Esta es la etiqueta y ya tienes el activador; y aquí colocamos guardar, listo. Entonces, ya tenemos la etiqueta aquí y, dentro de esto, también te está el activador. Podemos ingresar aquí, dentro de etiquetas y abajo, en la opción de activadores, también podemos visualizar el último activador y ¡ahí está! el activador que hemos agregado recientemente.

Vamos a hacerlo lo mismo con los demás planes. Agregamos uno nuevo, para este caso vamos a colocar precios, mensual, «mensual mod», «lo quiero». Colocamos la configuración de la etiqueta, colocamos evento Google Analytics 4, colocamos la configuración, colocamos el nombre del evento «precios mensual modern y lo quiero». Asignamos lo que es el activador, colocamos una más. El tipo de activador serían todos los eventos, igual que el anterior, ponemos el título «precios mensual modern lo quiero», guardamos.

Recuerden, el tipo de activador se va a activar cuando, solamente, en algunos clics, cuando el click del ID sea igual a el código que tenemos aquí. Ponemos el segundo botón, nuevamente copiamos lo que es «key value», copiamos y pegamos en el activador, guardamos cambios, guardamos la etiqueta y ¡listo! Tenemos dos etiquetas y dos activadores. Vamos a continuar con el siguiente, nuevo, para ese caso sería «precios mensual choice lo quiero». Agregamos el tipo de etiqueta Google Analytics 4, que sea un evento, Google 4 configuración. Nombre del evento, lo vamos a sacar del botón, seleccionamos el botón, en atributos, extraemos. Nombre del evento, colocamos «precios mensual choice lo quiero». Agregamos el activador, colocamos uno nuevo, ponemos todos los elementos «algunos clics» cuando el clic del ID «sea igual a», vamos a pegar el clic del ID que hemos agregado, para el tercer botón. Vamos aquí y pegamos.

Recuerden asignar el nombre el título, vamos a poner «precios mensual choice lo quiero» ponemos guardar. Guardamos cambios, guardamos también la etiqueta y listo. Entonces, ya tenemos, para lo que es el periodo mensual, las tres etiquetas y los tres activadores. Recuerden que este es el servicio edición de vídeos. Vamos a continuar con el siguiente periodo. Este es el periodo mensual, vamos a continuar con el periodo anual. Ponemos nuevo, vamos a colocar «precios anual Classic lo quiero», configuramos la etiqueta Google Analytics 4 evento, ponemos Google 4 «config» y ponemos «precios anual Classic lo quiero».

Agregamos el activador, uno nuevo, ponemos, en este caso, todos los elementos, igual que los anteriores. Algunos clics, siempre y cuando sea igual a, nos vamos a la plantilla que hemos asignado, para el plan anual y, de lo que es el atributo, extraemos el código, pegamos aquí y ¡listo! Colocamos el nombre «precios anual Classic lo quiero» ponemos guardar, al igual que la etiqueta, guardamos. Entonces, ya tenemos un total de tres etiquetas, periodo mensual, y una etiqueta del periodo anual. Vamos a crear la segunda etiqueta del periodo anual. Colocamos el nombre, vamos a asignarlo «precios anual modern lo quiero». Ponemos la configuración de la etiqueta, que sea un evento de Google Analytics 4 y asignamos el nombre «precios manual modern lo quiero».

Vamos con la activación, ponemos uno nuevo y vamos a colocar «todos los elementos», «algunos clics» siempre y cuando este ID se igual a, en este caso sería, el de aquí. Pegamos el ID, recuerden el nombre «precios manual Modern lo quiero» y ponemos guardar, guardamos también la etiqueta. En este caso, nos faltó incluir configuración de Analytics 4, lo estamos asignando y listo, ponemos guardar.

Y, finalmente, vamos con el último plan del segundo periodo, ponemos «precios anual Choice lo quiero». Ponemos el tipo de etiqueta, que sea evento, y vamos a colocar la configuración del Google Analytics 4. Nombre del evento «precios anual Choice lo quiero», vamos con la activación, ponemos nuevo activador. ¿Qué tipo de activador? recuerden, todos los elementos, ponemos «algunos clics» siempre y cuando este ID sea «igual a», el ID que asignamos, para este tercer botón del «plan Choice el periodo anual». Copiamos el ID y pegamos. Recuerden el título también «precios anual Choice lo quiero», guardar, guardamos también la etiqueta y ¡listo!

Entonces, tenemos un total de tres etiquetas, para el periodo mensual y tres etiquetas para el periodo anual, tres mensual, tres anual; cada uno de ellos tiene su activador. Finalmente, ya para realizar las pruebas de estas etiquetas, nosotros tenemos que crear una etiqueta más para la página de edición de vídeos. Cuando ingresamos a la página, también tiene que tener una etiqueta. Dentro de la página están todas las seis etiquetas, del periodo mensual y el periodo anual. Vamos a crear una nueva, en este caso, el tipo de etiqueta ya no sería de todos los eventos, sino sería de solo enlaces. Ponemos nueva, vamos a colocar precios edición vídeos. Agregamos la configuración de la etiqueta, sería la misma.

En este caso, es un evento, ponemos la configuración del Google Analytics 4; nombre del evento «precios» y ponemos «edición vídeos». Nos vamos con el activador, ponemos uno nuevo y, en este caso, sería solo enlaces. Si ponemos «algunos clics en enlaces» y, para este caso, serían «clic URL», que sea igual al enlace de la edición de vídeos, ¡ahí está!, esto sería el enlace. Recuerden, en este caso sería sin Staging, lo vamos a colocar directo, el dominio. Entonces, vamos aquí, pegamos y vamos a borrar lo que es Staging, es un ambiente de pruebas. Nosotros queremos que esto ya esté en producción, guardamos.

Recuerden el nombre antes de guardar «precios edición vídeos» ponemos guardar. La etiqueta también, colocamos guardar y ¡listo! Entonces, tenemos seis etiquetas que hemos creado, que se diferencian por el periodo y el tipo de plan. Y, finalmente, una etiqueta, solamente, para la página, cuando el usuario ingrese a la página de edición de vídeos.

Ahora vamos a poner vista previa, para poder visualizar si está funcionando las etiquetas. Ponemos vista previa y aquí, en esta ventana que se apertura, colocamos lo que es el dominio, conectamos y ¡ahí está! Una vez que conectan, se abre, por defecto, dos ventanas o dos páginas. Una de ellas es la página de tu empresa y la otra es el Tag Assistant, que es una plataforma dentro de Google Tag Manager, una plataforma confiable. Nos sirve para verificar si están funcionando, adecuadamente, los eventos.

Por ejemplo, ahora estamos en principal, ya detectó que estamos dentro de la página principal «página web diseño minimalista», ¡ahí está! Por el SEO, nosotros le hemos colocado «página web diseño minimalista». El Tag Assistant nos ofrece también visualizar, a detalle, estos eventos y cuál sería el error en el caso que no se disparen. El Analytics también nos ofrece, en tiempo real, por cada segundo, cómo están funcionando los eventos. Entonces, para eso nosotros ingresamos a administrar, dentro de administrar nos ubicamos en DebugView. Dentro de DebugView tenemos la opción de visualizar, por cada minuto, los eventos y por cada segundo, por minuto y por segundo. Vamos a colocar iniciar, actualmente está avanzando, 54, 55 segundos. Nosotros vamos a activar algún evento.

Hemos dividido las dos páginas, por el lado izquierdo tenemos el Google Tag Manager, por el lado derecho, el Google Analytics, para que puedan visualizar cuando nosotros activemos un evento. Entonces, estamos en la página principal y vamos a ubicarnos en precios edición de vídeos. Entonces, vamos a ver cómo se visualizan los eventos. Vemos que hay una «page View» ¡ahí está! Entonces, conforme vamos navegando se están enviando los eventos a Google Analytics.

Recuerden que, en este caso, no tienen el nombre de los eventos porque no han sido enviado, no han sido todavía enviados a producción. Si vemos aquí, en Tag Manager Assistant, ya podemos ver todas las páginas aquí, están todas las páginas que hemos estado navegando. Ahora último, hemos ingresado a «página web diseño minimalista» y, después, hemos ingresado lo que es precios editor de vídeos. Vamos a cambiar a un periodo anual. En periodo anual, vamos a colocar, a ver, el «plan Choice de periodo anual» y ponemos «lo quiero». Vamos a ver en nuestro Tag Assistant, ¡ahí está! «precios anual Choice lo quiero» Ya se activó, «Tags Fired». Por la plataforma de Google Analytics, ustedes también pueden visualizar, ¡ahí está!.

Colocación de etiquetas en Google Tag Manager.
Fuente: Propia, mediante software Google Tag Manager.

Resultados Finales

Más adelante, cuando ustedes ya tengan activado, en producción, todos estos tags, ustedes van a tener como resultado la acumulación de clics, ingresos de los usuarios, de repente, seleccionen algunos iconos, algunos textos; todas esas navegaciones de los usuarios, dentro de su página web, van a seguir siendo almacenados. Entonces, cada vez que se almacene va incrementándose el número, el porcentaje y usted ya pueden generar una toma de decisiones para su empresa.

Aquí tenemos, por ejemplo, todas las páginas web, a qué páginas web han ingresado con mayor porcentaje de vistas. Por ejemplo, tenemos una página web de diseño minimalista, tiene mayor cantidad de vistas en un 54.3%, con un total de 179 y, si nos vamos a un porcentaje menor, tenemos un 3.1% por con un total de 33 vistas, para lo que son precios y anuncios por correo. ¡Listo, gracias amigos de Marieú Technology Corporation!