Cómo medir el tiempo de carga de las páginas en Google Analytics 4

¿Las páginas de tu sitio web cargan lento y quieres saber cómo afecta esto al rendimiento de tu sitio? Hoy te voy a mostrar paso a paso cómo medir el tiempo de carga de cada una de las páginas en Google Analytics 4 utilizando Google Tag Manager. 🔷

Por cierto, te recuerdo que puedes obtener esta misma información en un video de mi canal. Te dejo el link a continuación: 📺▶️

¿Comenzamos?

Configuración inicial en Google Tag Manager

A diferencia de otras plataformas, Google Analytics 4 no trae una métrica integrada para medir el tiempo de carga de una página web. 🪫 No. 

Pero con una configuración bastante sencilla en Google Tag Manager que aprenderás en este artículo, podemos capturar ese dato y visualizarlo directamente en nuestros informes de Google Analytics 4. Esto te va a permitir detectar qué páginas están ralentizando la experiencia del usuario y tomar decisiones concretas para mejorar el rendimiento.

Registro del tiempo de carga con Google Tag Manager

El proceso que seguiremos es el siguiente con tres simples pasos: 

1. Utilizar Google Tag Manager para registrar el tiempo de carga de cada página en nuestro sitio web en tiempo real. 
2. Luego enviaremos esta información a Google Analytics 4 mediante un evento personalizado. 
3. Finalmente, usaremos una métrica personalizada y una métrica calculada para incluir el tiempo de carga de la página en nuestros informes.

Verificación de la configuración de Google Analytics 4

¡Es momento de iniciar sesión en Google Tag Manager!.

En el ejemplo que vamos a ver juntos, ya tengo sesión iniciada en mi contenedor de Google Tag Manager que se encuentra instalado en mi sitio web. Si utilizas Google Tag Manager (GTM), supongo que ya debes tener instalado también Google Analytics 4. Pero podemos confirmar esto rápidamente yendo a «Etiquetas» en el menú izquierdo dentro de GTM.

Creación de la variable "Tiempo de carga de la página"

Como puedes ver en la imagen, ya tengo una etiqueta de Google que envía datos a GA4. También necesitarás esto en tu contenedor. Pero si no sabes de que te hablo, no te preocupes, te dejo el siguiente enlace donde te explico todo: Crear una Cuenta de Google Analytics y Agrégala a tu Web utilizando Google Tag Manager. 🔗

Implementación del JavaScript personalizado

Si ya tienes una etiqueta de Google que envía datos a Google Analytics 4, estás listo para continuar con el siguiente paso. Vayamos a la sección de «Variables» siempre en GTM en el menú izquierdo. Ahora vamos a crear una ‘variable definida por el usuario’; y haremos clic en «Nueva».

En mi caso, voy a llamar a esta variable «Tiempo de carga de la página». Y ahora en la siguiente página seleccionamos «Configuración de la variable» Y vamos a elegir JavaScript personalizado como el tipo de variable.

Configuración del JavaScript para calcular el tiempo de carga

A continuación te dejaré el código de JavaScript personalizado para que lo puedas copiar tal cual y utilizar sin problemas:

function() {
    if (window.performance && window.performance.getEntriesByType) {
        var entries = window.performance.getEntriesByType("navigation");
        if (entries.length > 0) {
            var navTiming = entries[0];
            var pageLoadTime = navTiming.loadEventEnd - navTiming.startTime;
            return Math.round(((pageLoadTime / 1000) + Number.EPSILON) * 100) / 100;
        }
    }
}

¡Copiamos el código! Esto lo que hace es utilizar el API de sincronización de navegación de rendimiento y calcula el tiempo en milisegundos entre el final y el inicio del evento de carga. En resumen: nos dará el resultado preciso del tiempo de carga de la página. 🔋Luego tomamos la cantidad de milisegundos y la convertimos en segundos. 

¡Volvemos a Google Tag Manager! 

Creación del activador para la etiqueta de tiempo de carga

Y pegamos este código JavaScript personalizado donde habíamos quedado anteriormente. En el campo correspondiente:

Luego, debajo de este campo donde copiamos el código, seleccionamos «Valor de formato» Y habilitamos la opción de «Convertir ‘undefined’ a»; y luego debajo introducimos el valor «0». Te quedará así:

Esto significa que si la API de tiempo de navegación falla por alguna razón, la variable devolverá un valor igual a «0». 

Una vez que tenemos la variable, necesitamos un disparador que active nuestra etiqueta solo cuando se haya cargado correctamente la página web. Entonces lo que necesitamos a continuación es crear un «Activador» que dispare una etiqueta para nuestro evento de carga de página.

Por lo tanto, siempre dentro de GTM, navegamos al menú izquierdo a la sección de «Activadores» y luego hacemos clic en ‘Nuevo’ en la parte superior derecha de la ventana. En mi caso, voy a nombrar este activador «Tiempo de carga de página mayor que 0». Y debajo seleccionamos ‘Configuración del activador’.

En la siguiente pantalla te saldrá un menú derecho, aquí debemos elegir «Ventana cargada» 

Luego te saldrán dos opciones y en este caso  elegiremos la segunda: «algunos eventos cargados en una ventana» 

Debajo desplegamos el menú de variables y seleccionamos la variable  {{Tiempo de carga de página}}

Ahora como ves en la imagen, en el segundo campo debemos seleccionar «Mayor que» y en el tercero escribimos el valor «0».

Te quedará del siguiente modo:

Aquí estamos agregando esta condición para asegurarnos de que la etiqueta solo se active cuando se haya registrado realmente un tiempo de carga de página. 

Si el valor es 0 o inexistente, probablemente significa que el navegador no proporcionó un valor de tiempo válido; y por supuesto queremos evitar datos incompletos o erróneos en Google Analytics. ⛔

Al comprobar que el valor es mayor a 0, nos aseguramos de recopilar datos precisos. Ahora guardemos este activador en la parte superior de la pantalla.

El siguiente paso es crear una etiqueta de eventos de Google Analytics 4 para enviar el tiempo de carga de nuestras páginas a Google Analytics.

Creación de la etiqueta para enviar datos de carga a Google Analytics 4

¡Seguimos adelante!

En GTM, vayamos a la sección de «Etiquetas» en el menú izquierdo. 

Vamos a crear una nueva etiqueta. En mi caso la llamaré «Google Analytics GA4- Tiempo de carga de página» 

Luego, debajo, seleccionamos la configuración de la etiqueta. Luego se despliega como antes, un menú a tu derecha:  aquí seleccionamos «Google Analytics» y luego «Evento de Google Analytics 4» como el tipo de etiqueta. 

Lo vemos:

Ahora necesitamos seleccionar nuestro ID de medición de Google Analytics 4. Como en mi caso ya tengo una variable, la coloco en el campo que dice «ID de medición».

Si tu no lo tienes y recién estás comenzando, no te preocupes que al final de este artículo te dejaré un ENLACE que te explica perfecto como hacerlo. ¡No te lo pierdas!  🔗

Ahora tenemos que hacer algunas configuraciones…

Le colocamos un nombre a nuestro evento. Lo voy a llamar «Page_load_time». 

Ya que los eventos se comunican en inglés en Google Analytics 4, me gusta mantener esta nomenclatura. Ahora debajo hacemos clic en ‘Agregar parámetro’,  en una nueva fila,  agregar y voy a nombrar a este parámetro «Loading_time_sec».

Y para el campo del valor,  voy a seleccionar nuestra variable que hemos creado de «Tiempo de carga de página». ¿Te acuerdas? 

Ahora necesitamos seleccionar nuestro activador, vamos debajo de todo y hacemos clic en «Activación» y luego seleccionamos  el activador que también creado que se llama «Tiempo de carga de página mayor que 0»

Luego procedemos a guardar la etiqueta. 

Publicación y verificación del funcionamiento

Si todo está bien configurado, la etiqueta debería dispararse cuando «cargas una página web» 🌐 y deberías ver el valor del tiempo de carga en «Tag Assistant» 

Para poder comprobar que esté funcionando, aún en GTM, debemos hacer clic en «Vista previa». Luego ingresamos nuestra URL y hacemos clic en «Conectar» 

Vemos que nuestro sitio web carga y que está conectado a Tag Assistant. 

Verificación en Tag Assistant

Ahora sí dentro de Tag Assistant, una vez que se conectó, dentro de la sección ‘Etiquetas’ podemos comprobar que lo que hemos creado «Tiempo de carga de página» ha sido activada correctamente.

Para ver qué información exactamente está cargando esta etiqueta, debemos seleccionar el evento del menú izquierdo que activó esta etiqueta; hacemos clic sobre nuestra etiqueta propiamente dicha, y en la esquina superior derecha seleccionamos «Valores».

Esto nos va a permitir ver el valor que se envía a Google Analytics. Si te fijas bien en la imagen, puedes ver el tiempo de carga de esta página donde dice ‘patameterValue: 10.23’

Publicar los cambios en Google Tag Manager

¡Vamos llegando al final!

Una vez que todo funcione correctamente, y otra vez dentro de Google Tag Manager, hacemos clic en el botón azul «Enviar» arriba a la derecha. 🟦

Luego nombramos nuestra nueva versión y hacemos clic en publicar arriba a la derecha.

¡Felicidades! 🎉 

El tiempo de carga de nuestra página empezará a enviarse a Google Analytics a partir de ahora. 

¿Un paso más?

Creación de métricas personalizadas y métricas calculadas en Google Analytics 4

A continuación, necesitamos registrar un parámetro de tiempo de carga en Google Analytics 4; como una métrica personalizada. 

Entonces nos dirigimos a Google Analytics y a la sección de «Administrar»; en el menú izquierdo en la parte inferior. Allí seleccionamos «Visualización de datos» y luego «Definiciones personalizadas». 

En la siguiente pantalla, seleccionamos la pestaña de «Métricas personalizadas» y luego hacemos clic arriba a la derecha en el botón azul 🟦 que dice «Crear métrica personalizada» 

¡A completar campos!

• Primero, le asignamos un nombre a nuestra métrica. En mi caso la nombraré «tiempo de carga de la página» 
• Luego en parámetro,  vamos a introducir «Loading_time_set» 
• En ‘Unidad’ seleccionamos ‘segundos’ como medida.

¡Ponemos guardar arriba a la derecha!

Crear una métrica calculada para obtener el tiempo promedio

De aquí en adelante, podremos usar esta métrica en nuestros informes. 

Sin embargo, nuestra métrica personalizada reporta «El tiempo total de carga de cada página», NO el tiempo promedio. 😳💡💥

¡Tranquilos!, para hacer esto, necesitamos crear una «Métrica calculada» 

Es por eso que nos dirigimos a la pestaña de «Métricas calculadas» y hacemos clic en «crear métrica calculada» en la parte superior derecha. 

• Le colocamos un nombre, en mi caso le pondré «tiempo promedio de carga de página» 
• En la fórmula introducimos {tiempo de carga de la página} / {número de eventos} 
• Y como unidad de medida, aseguramos que esté seleccionada la opción «Estándar» 

Te debería quedar así:

Esto nos dará el tiempo promedio de carga de la página para cada evento de nuestro sitio web. 

Ahora podemos guardar nuestra métrica calculada arriba a la derecha en «Guardar» (sí, el botón azul). 

¡Felicidades de nuevo! 🎉

Ahora solo resta recolectar información y empezar a introducir esta métrica en tus informes. ¡Bravo!

Ahora que estamos monitoreando el tiempo de carga de página, el siguiente paso es generar informes sobre el rendimiento de nuestras páginas. 

Puedes hacer esto creando un «Informe de exploración personalizado» o usando «Looker Studio» 

Ahora que ya estás midiendo el tiempo de carga, el siguiente paso es entender mejor el comportamiento de tus usuarios. 🕵️

Te recomiendo que veas este artículo sobre «Cómo usar el ID de usuario para consolidar sesiones en múltiples dispositivos», así podrás tener una visión completa del recorrido del cliente de manera precisa y detallada.

SEGUIMIENTO DEL ID DEL USUARIO USANDO GOOGLE ANALYTICS 🔗

¡Espero que esta información te haya sido útil!

¿Alguna pregunta en que pueda ayudarte?

¡Hasta la próxima, colega!