Analítica web
Reflexiones desde el mercado español de Analítica Web

PerformanceTiming plugin: recoge tus tiempos de carga en Adobe Analytics

Se lee en 4 minutos

¿Notas que tu site está teniendo tiempos de carga anormalmente largos? Pues tienes un problema.

En los tiempos que corren, donde cada porción de segundo importa, uno de los pilares fundamentales que hacen que tu sitio web haga correctamente su función es la experiencia de usuario y, precisamente, esta experiencia puede verse muy afectada por los tiempos de carga.

De forma cada vez más habitual, se incluyen todo tipo de píxeles que son transparentes al usuario, pero que pueden llegar a afectar de manera notable en la carga de la página y esto puede ser la diferencia entre una visita productiva y un rebote instantáneo.

Precisamente por esto, es muy conveniente tener bajo control los tiempos de carga de nuestros activos y, ante la posible imposibilidad de obtener esta información por otra fuente, Adobe nos da una solución, el plugin “performanceTiming, que sustituye al antiguo “pageLoadTime” y que nos da tiempos reales, puesto que dicho predecesor daba algo más bien parecido al tiempo de carga del tag de Adobe Analytics.

Dicho plugin nos facilita una serie de información de tiempos de carga acordes a la especificación del W3C:

page load timing
Gráfico de tiempos de carga establecido por el “W3C”

Dicha información es recogida por el plugin en una serie de eventos numéricos que podemos ver a continuación, tomando como referencia la nomenclatura utilizada en el gráfico anterior:

  • Redirect timing = fetchStart – navigationStart
  • App Cache Timing = domainLookupStart – fetchStart
  • DNS Timing = domainLookupEnd – domainLookupStart
  • TCP Timing = connectEnd – connectStart
  • Request Timing = responseStart – connectEnd
  • Response Timing = responseEnd – responseStart
  • Processing Timing = loadEventStart – domLoading
  • onLoad Timing = loadEventEnd – loadEventStart
  • Total Page Load Time = loadEventEnd – navigationStart

Además de estos nueve eventos numéricos, el plugin lanza un evento más, de tipo contador, para contabilizar las instancias de recogidas de tiempos de carga. Esto nos servirá para hacer la media de cada uno de los tiempos, puesto que el evento numérico va acumulando el tiempo total.

De ahora en adelante podemos centrarnos directamente en el tiempo de carga total de página (Time Page Load Time) que, presumiblemente, es el que más nos podría interesar, pero todo lo que se comente será aplicable a cada uno de los tiempos antes mencionados.

Como el tiempo real de la carga de página será realmente conocido después del envío de vista de página de Adobe Analytics, es una información que será enviada en la siguiente página. La contra que esto conlleva es que la última página de la visita nunca enviará tiempos, pero a cambio, nos proporciona tiempos reales de carga.

Debido a esta situación, para realizar los informes de forma correcta, habrá que utilizar como dimensión el nombre de la página anterior, puesto que en el hit que se envía la información, el nombre de página no es la correspondiente a los tiempos obtenidos por los eventos. No obstante, Adobe nos ayuda una vez más proporcionándonos el plugin “getPreviousValue”, que precisamente nos permite recoger en una variable cualquier dato recogido en una variable de la vista de página anterior. Para la utilización de ambos plugins, también será necesaria la carga de el plugin “split” de Adobe Analytics.

Implementación

Una vez tenemos claro cómo trabaja el plugin, pasemos a ver un ejemplo de implementación, como comentábamos anteriormente nos centraremos básicamente en el tiempo de carga total.

En primer lugar, como es obvio, deben cargarse los tres plugins anteriormente mencionados, cuyos códigos pueden obtenerse en sus respectivas entradas de la documentación de Adobe Analytics.

Antes de la ejecución de la función “doPlugins”, deben indicarse los diez eventos que van a obtener la información, es decir, los ocho eventos numéricos de tiempos individuales, el evento numérico de tiempo total y el evento contador de instancias, siguiendo exactamente el orden indicado en la enumeración realizada anteriormente. Para hacer esta configuración inicial haremos los siguientes seteos del objeto “s” (o nombre del objeto de Adobe Analytics utilizado):

s.pte = 'event101,event102,event103,event104,event105,event106,event107,event108,event109,event110'
s.ptc = false;

En “s.pte” se determina los números de evento asociados a cada tiempo a recoger, con el orden anteriormente mencionado. En nuestro ejemplo estaríamos utilizando el “event109” para la recogida de tiempos totales de carga y el “event110” para el contador de instancias. Por su parte, en “s.ptc” se determina la ejecución o no del plugin en la función “doPlugins” y para su utilización debe tener asignado el valor “false”.

Una vez iniciados los eventos, sólo restaría por hacer, dentro de “doPlugins”, la llamada a la función “performanceTiming” y a “getPreviousValue” para recoger el pageName anterior:

s.eVar60 = s.prop60 = s.getPreviousValue(s.pageName,'gpv_v60','');  
s.performanceTiming();	

Como parámetros en la función “getPreviousValue” debemos incluir la variable a recoger de la página anterior (s.pageName en nuestro caso) y el nombre que le queramos dar a la cookie donde se almacenará dicho valor (gpv_v60 en nuestro caso). La función “performanceTiming” nos da la posibilidad de pasar como parámetro una variable tipo “listVar” para la recogida de la información en el objeto “performanceEntries”, de forma opcional, para lo que también sería necesaria la inclusión del plugin “appendList”, pero que no será necesario en nuestro ejemplo.

Reporte

Una vez realizada la implementación, podríamos ver en Adobe Analytics, por poner un ejemplo, el informe de tiempo medio de carga de cada página.

Para ello, en primer lugar, necesitaríamos crear una métrica calculada (llamémosla “Average Page Load Timing”) que nos dividiera el tiempo total de carga de página entre el número de instancias. En nuestro ejemplo, los eventos “event109” y “event110”.

average page load timing
Métrica calculada con tiempo medio de carga de página

Luego sólo nos restaría ver un informe en el que apliquemos dicha métrica sobre la dimensión de nombre de página previa. Veamos un informe en que están aplicadas, tanto dicho tiempo medio, como los valores del total de tiempos de carga acumulados y de instancias:

page load timing report
Informe de tiempos de carga de página

¿Necesitas conocer los tiempos de carga de tus páginas? Adobe Analytics te ayuda.

 

*Fuentes de referencia:

*Fuente de las imágenes: w3.org, Adobe Analytics y Freepik (principal).

Escribe tu comentario

4 × 3 =

Navegar