En Google Analytics, puede monitorear su velocidad del sitio y obtenga una descripción common decente de qué páginas contribuyen positiva y negativamente a la velocidad del sitio. El problema con la métrica del tiempo de carga de la página es que es un promedio basado en una muestra. Puede modificar la frecuencia de muestreo con setSiteSpeedSampleRate()pero para mi eso no es lo suficientemente bueno.
(ACTUALIZACIÓN 28.3.2014: Esta publicación sigue siendo válida, pero una implementación con Horarios de usuario es una forma mucho más inteligente de medir el tiempo actual de carga de la página. Haré una breve actualización en algún momento en el futuro cercano).
Entonces, en esta publicación continúo explorando la hermosa combinación que es Common Analytics y Google Tag Supervisor. Asegúrese de consultar mi publicación anterior sobre el uso de Common Analytics para enviar El clima como dimensión personalizada..
incógnita
El boletín a fuego lento
Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.
El resultado ultimate
Esto es lo que obtienes:
Lo que ve es un evento, enviado junto con cada vista de página, que le indica cuánto tiempo tardó en cargarse la página. La razón por la que uso eventos y no, digamos, dimensiones personalizadas, es simplemente por conveniencia. Con los eventos, tengo un buen conjunto de informes estándar, lo que significa que no tengo que perder el tiempo con informes personalizados.
Me hubiera gustado usar valores absolutos (en milisegundos) como métrica personalizada, pero el problema es que no se pueden calcular con métricas personalizadas, por lo que sería imposible registrar promedios importantes. Por eso elegí el esquema de convertir los milisegundos en una cadena que se aproxima al tiempo de carga de la página.
DESCARGO DE RESPONSABILIDAD: Al igual que con la velocidad del sitio de Google Analytics, todo esto solo funciona si el navegador del visitante admite la Tiempo de navegación (ventana.rendimiento.timing) API.
Crea algunas macros en GTM
Pronto crearemos un procesador de eventos genérico, así que cree algunas macros para él.
Pasos:
- Cree una macro “Categoría de evento”, con Tipo de macro: Variable de capa de datos y Nombre de variable de capa de datos: categoría de evento
- Cree una macro “Acción de evento”, con Tipo de macro: Variable de capa de datos y Nombre de variable de capa de datos: eventAction
- Cree una macro “No interacción”, con Tipo de macro: Variable de capa de datos y Nombre de variable de capa de datos: no interacción
También podrías crear macros para la etiqueta del evento y el valor del evento (lo que lo haría aún más genérico), pero para este proyecto solo las necesito.
Al crear estas macros, hace posible enviar datos variables a través de la capa de datos a la etiqueta, cuyo contenido finalmente se transmite a Google Analytics.
Crear un contenedor de eventos genérico
Esto es lindo. Puedo simplemente crear un procesador de eventos genérico, que usa las macros que acabo de crear, y usarlo en el futuro para todos los eventos que quiero enviar a GA.
- Crea una nueva etiqueta llamada “Enviar evento”
- Elija Common Analytics (beta) como tipo de etiqueta
- Agregue su ID de seguimiento de GA al espacio correspondiente
- Elija evento como tipo de pista
- Agregue {{Categoría de evento}} como macro para, claro, Categoría
- Agregue {{Occasion motion}} como macro para, así es, Acción
- Agregue {{Non-interaction}} como macro para el hit sin interacción
- Cree una regla de activación “Evento GA” con la condición “{{occasion}} es igual a GAEvent”
- Guarda tu nueva etiqueta
Entonces aquí creas un contenedor para todos tus eventos. Ahora tienes tus macros y tu contenedor. En el futuro, para enviar un nuevo evento, solo necesitará enviar un evento llamado “GAEvent” a la capa de datos, lo que activa la etiqueta que acaba de crear. Y eso es lo que haremos a continuación.
Codificando el script de tiempo de carga de la página
- Crea una nueva etiqueta “Tiempo de carga de la página”
- Establecer etiqueta HTML personalizada como tipo de etiqueta
- Agregue el siguiente código dentro del campo HTML:
<script>
var perfData = window.efficiency.timing;
var pageLoadTime = perfData.domComplete - perfData.navigationStart;
var loadTime = "";
if (pageLoadTime < 1000) { loadTime = "0-1 seconds"; }
else if (pageLoadTime < 2000) { loadTime = "1-2 seconds"; }
else if (pageLoadTime < 3000) { loadTime = "2-3 seconds"; }
else if (pageLoadTime < 4000) { loadTime = "3-4 seconds"; }
else if (pageLoadTime < 5000) { loadTime = "4-5 seconds"; }
else if (pageLoadTime < 6000) { loadTime = "5-6 seconds"; }
else if (pageLoadTime < 10000) { loadTime = "6-10 seconds"; }
else { loadTime = "10+ seconds"; }
dataLayer.push ({ 'occasion': 'GAEvent', 'eventCategory': 'Web page Load Time', 'eventAction': loadTime, 'nonInteraction': 1 });
script>- Agregue una regla de activación que espere a que se cargue la página: {{occasion}} coincide con gtm.load
- Guardar la nueva etiqueta
Lo que sucede aquí es que una vez cargado el documento, el script cuenta el tiempo desde el momento en que comenzó la renderización de la página hasta el momento en que el DOM se cargó por completo. Intenté tener loadEventEnd como punto ultimate, pero por alguna razón la etiqueta se activó antes de alcanzarlo, por lo que obtuve resultados ridículos.
Para obtener más información sobre la API de sincronización de navegación, asegúrese de consultar Descripción common del tiempo de navegación.
Una vez que obtengo el tiempo (en milisegundos), uso la instrucción if…else rápida y sucia para aproximar el tiempo de carga a una cadena.
Finalmente, envío los datos a la capa de datos. En el envío, indico GAEvent como el nombre del evento, que fue el desencadenante para que se activara la etiqueta Enviar evento. Es importante indicar este evento como un evento sin interacción (sin interacción: 1), ya que de lo contrario comenzarías a obtener una tasa de rebote del 0% en todas tus páginas.
Guarde la versión del contenedor y publíquela.
Y eso es todo. En resumen, esto es lo que sucede:
- Cuando el visitante comienza a cargar una página, se calcula el tiempo de carga.
- Esta información se pasa a un contenedor de eventos genérico, con nombres de categorías y acciones para garantizar que el evento se registre claramente en Analytics.
- La etiqueta del contenedor se activa tan pronto como se pasan los datos, ya que el desencadenante es el nombre del evento (que se pasa con los datos).
- Puede verificar que hizo las cosas correctamente mirando el registro de pink en Firebug:
Palabras finales
Esto puede parecer un poco excesivo (seguir el tiempo de carga de cada página), pero me gusta la thought de observar el tiempo de carga de la página en un nivel más detallado. Ahora puedo usar los informes de eventos para ver qué navegadores se utilizaron con las visitas más lentas, qué países tuvieron los tiempos de carga de página más bajos, and so on. Todo son datos, cariño.
Claro, lo sé, al aumentar la frecuencia de muestreo puedes obtener resultados similares en el informe de velocidad del sitio, pero bueno, ¡es más divertido cuando puedes codificar todo tú mismo!
Todavía estoy esperando la posibilidad de empezar a hacer cálculos con métricas personalizadas. Sería genial ver cuál fue el tiempo medio de carga de una página durante un día concreto, con un determinado navegador, con visitas de un país concreto, and so on.