¿Cómo saber con Google Analytics hasta donde hacen scroll tus usuarios?

Juan Cascón Baños


Categorías: Internet
Etiquetas: , , ,

¿Cómo saber con Google Analytics hasta donde hacen scroll tus usuarios? Se denomina scroll, desplazamiento, rollo o voluta al movimiento en 2D de los contenidos que conforman la ventana que se muestra en una aplicación o página web visualizada en un navegador web. Pero es muy interesante saber donde colocar la publicidad o módulos que nos permitan aumentar permanencia o genera más páginas vistas. Para marketing es muy importante saber donde debemos colocar las cosas y donde llegan sus impactos. Tarde o temprano, vas a querer saber hasta donde los usuarios se desplazan en tu página. Hay alternativas de mapas de calor de pago como Crazy Egg o Click Tale que te miden el scroll o los clicks.

¿No sería estupendo si pudiera rastrear porcentaje de desplazamiento vertical de la página y ver fácilmente en Google Analytics los datos y sin pagar ? Buenas noticias en este articulo enseñaremos a los webmaster como deben hacerlo para hacer el scroll depth tracking Google Analytics.

¿Cómo saber con Google Analytics hasta donde hacen scroll tus usuarios? Algunas aclaraciones

Soy un Friki de análisis, me encanta saber datos de las páginas Webs para mejorarlas en conversión y para que sean más usables para el usuario.Los datos dan el poder al marketing, ya que puedes tomar decisiones basada en datos y no porque yo lo digo.

Para ilustrar el valor de seguimiento de desplazamiento, tomemos el  sitio web automático como ejemplo. Seguir adelante y abrir el sitio para que pueda ver cuánto tiempo de una página que es.

Bonito diseño pero la página es muy larga. Es lo que esta de moda con los diseños responsive. Un montón de información importante, pero de 6000 píxeles de alto. ¿Llegan los usuarios al final? Ni idea. Hay que medirlo y es donde entra la Analítica Web.

Si supiéramos qué porcentaje de la página, podríamos aprender comportamiento de nuestros usuarios, he aquí algunos ejemplos:

Estas son alguna las preguntas que hariamos a nuestro analista de tráfico e intentar la optimización de tasa de conversión que se puede pedir. Adivinando que usted está comenzando a ver el valor en el seguimiento de este rollo datos de profundidad para todas sus tipos de sitios de contenido (por ejemplo, la página principal, páginas de categorías, páginas de detalles, blogs), ¿no?

Agrupación de desplazamiento de datos de seguimiento

Si desea asegurarse de que estos datos son recurribles , se recomienda seguimiento por cuartiles, quintiles, o en la mayoría de los deciles. De lo contrario, si la pista demasiado pequeño incremento, usted tendrá un tiempo difícil detectar tendencias en los datos . Al determinar lo que es mejor para usted, asegúrese de tener en cuenta factores tales como el volumen de su sitio de tráfico, longitud típica página, y si usted tiene alguna consistencia en las secciones de contenidos lógicos.

Seguimiento Profundidad Vaya por cuartiles

Seguimiento Profundidad Vaya por Quintiles

Seguimiento Profundidad Vaya por Deciles (por defecto)

El Código y Cómo funciona

Hemos escrito un plugin que es muy fácil de implementar (de hecho, si usted está utilizando una herramienta de gestión de Tag (GTM) , usted podría obtener esta implementado en cuestión de minutos). Le recomendamos que coloque esto en su propia etiqueta dentro de su solución de gestión de etiqueta como GTM ( Google Tag Administrador ).

No hay requisitos de marco de JavaScript (no es necesario jQuery para esto) y hemos probado esta en todos los principales navegadores.

Si quieres usar jquery puedes usar  https://github.com/robflaherty/jquery-scrolldepth

Puedes modificar el código para satisfacer sus necesidades, aunque es bastante flexible.

Aquí están los detalles sobre lo que hace :

En primer lugar, el código del plugin. Esta en BitBucket para que los usuaruios de Internet o Webmaster se puedan baja la última versión. Por favor, descarga o tirar de la cesión temporal de nuestro BitBucket .

Debes tener un JS con el código Lo llaman bam-percent-page-viewed.js

/**
 * Percent page viewed plugin
 *
 * Usage:
 * bamPercentPageViewed.init({ option : 'value' });
 *
 * Options:
 * trackDelay : 1500 - The delay (in ms) before a scroll position is considered stable (reduce scroll bouncers)
 * percentInterval : 10 - Track every 10% the page is scrolled | Default: 25
 * callback : function(data){ console.log(data); } - The callback for the previous page scroll position | Default: null
 * cookieName : _bamPercentPageViewed - The name of the cookie to store the data
 *
 */
(function(bamPercentPageViewed)
{
 /**
 * Default options
 */
 var defaultOptions = {
 trackDelay: 1500,
 percentInterval : 25,
 callback : null,
 cookieName: '_bamPercentPageViewed'
 };

 /**
 * Last scroll action
 */
 var lastScroll = null;

 /**
 * Initialize the tracker and pass in optional overrides
 * @param object
 * @return bamPercentPageViewed
 */
 bamPercentPageViewed.init = function(options)
 {
 // Options
 if(typeof(options) == typeof({}))
 {
 for(var property in options)
 {
 if(options.hasOwnProperty(property))
 {
 defaultOptions[property] = options[property];
 }
 }
 }

 // Callback
 if(typeof(options.callback) == 'function')
 {
 // If there is data to track, fire callback
 var cookieData = bamPercentPageViewed.callback();
 if(cookieData !== false)
 {
 options.callback.call(window, cookieData);
 }
 }

 // Get the amount of screen currently in view
 processScroll();

 // Do not break the chain
 return this;
 };

 /**
 * Get callback data externally
 * @return object|false
 */
 bamPercentPageViewed.callback = function()
 {
 var cookieData = readCookie();
 if(cookieData !== false && cookieData.scrollPercent > 0 && cookieData.documentLocation.length > 0)
 {
 // Clear cookie
 setCookie(0, '', true);

 // Return object
 return cookieData;
 }

 return false;
 };

 /**
 * Get data externally without resetting
 * @return object|false
 */
 bamPercentPageViewed.data = function()
 {
 var cookieData = readCookie();
 if(cookieData !== false && cookieData.scrollPercent > 0 && cookieData.documentLocation.length > 0)
 {
 // Return object
 return cookieData;
 }

 return false;
 };

 /**
 * Throttle function borrowed from:
 * Underscore.js 1.5.2
 * http://underscorejs.org
 * (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
 * Underscore may be freely distributed under the MIT license.
 */
 function throttle(func, wait)
 {
 var context, args, result;
 var timeout = null;
 var previous = 0;
 var later = function()
 {
 previous = new Date();
 timeout = null;
 result = func.apply(context, args);
 };
 return function()
 {
 var now = new Date();
 if(!previous) previous = now;
 var remaining = wait - (now - previous);
 context = this;
 args = arguments;
 if(remaining <= 0)
 {
 clearTimeout(timeout);
 timeout = null;
 previous = now;
 result = func.apply(context, args);
 }else if(!timeout){
 timeout = setTimeout(later, remaining);
 }
 return result;
 };
 }

 /**
 * Page scroll percentage
 * @return int
 */
 function scrollPercent()
 {
 return Math.ceil( ((scrollPosition() + viewportHeight()) / pageHeight()) * 100 );
 }

 /**
 * Page height
 * @return int
 */
 function pageHeight()
 {
 return Math.max(
 document.body.scrollHeight, document.documentElement.scrollHeight,
 document.body.offsetHeight, document.documentElement.offsetHeight,
 document.body.clientHeight, document.documentElement.clientHeight
 );
 }

 /**
 * Viewport height
 * @return int
 */
 function viewportHeight()
 {
 return (window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight || 0);
 }

 /**
 * Current window scroll position
 * @return int
 */
 function scrollPosition()
 {
 return (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
 }

 /**
 * Scroll percentage by interval
 * @return int
 */
 function scrollPercentByInterval(percentInterval)
 {
 var multiplier = parseInt(scrollPercent() / (parseInt(percentInterval) - 0.0000000001));
 return (multiplier * parseInt(percentInterval));
 }

 /**
 * Set cookie
 * @param int scrollPercent
 * @param string documentLocation
 * @param bool forceReset
 * @return bool
 */
 function setCookie(scrollPercent, documentLocation, forceReset)
 {
 scrollPercent = parseInt(scrollPercent);

 // Get previous cookie value
 var cookieData = readCookie();

 if(scrollPercent > cookieData.scrollPercent || forceReset === true)
 {
 // Get expiration time
 expire_time = new Date(); // Local time
 expire_time.setTime(expire_time.getTime() + (60 * 60000));

 // Set cookie
 document.cookie = defaultOptions.cookieName + '=' + escape(scrollPercent + '|||' + documentLocation) + "; expires=" + expire_time.toUTCString() + '; path=/';
 }
 }

 /**
 * Read cookie value
 * @return object
 */
 function readCookie()
 {
 // Get cookie
 var value = ((document.cookie.match('(^|; )' + defaultOptions.cookieName + '=([^;]*)')||0)[2]);
 if(value === undefined)
 {
 value = '0|||';
 }

 // Decode and split
 value = decodeURIComponent(value);
 value = value.split('|||');

 // Return object
 return (value.length == 2) ? {
 scrollPercent : parseInt(value[0]),
 documentLocation : value[1]
 } : false;
 }

 /**
 * Process scroll
 */
 function processScroll()
 {
 if(lastScroll === null || (new Date().getTime()) - lastScroll >= parseInt(defaultOptions.trackDelay))
 {
 setCookie(scrollPercentByInterval(defaultOptions.percentInterval), document.location.href);
 }
 }

 /**
 * Listen for throttled window scroll event
 */
 window.onscroll = throttle(function()
 {
 lastScroll = new Date().getTime();

 setTimeout(processScroll, parseInt(defaultOptions.trackDelay) + 25);
 }, 100);

}(window.bamPercentPageViewed = window.bamPercentPageViewed || {}));

Y un html ejemplo

<html>
<head>
 <title>BAM Percent Page Viewed Tracking</title>
 <script src="bam-percent-page-viewed.js" type="text/javascript"></script>
 <script type="text/javascript">

 /**
 * Universal Analytics
 */
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
 ga('create', 'UA-999999-9', 'auto');
 ga('send', 'pageview');

 /**
 * Manual callback handler
 * false == no scroll to track from previous page
 */
 var callbackData = bamPercentPageViewed.callback();
 if(callbackData != false)
 {
 console.group('Callback');
 console.log(callbackData);
 console.groupEnd();

//Event width data
 ga('send', 'event', 'Percent of Page Viewed', callbackData.documentLocation, callbackData.scrollPercent + '', undefined, true); 

//or send as a custom dimension before the pageview 
ga('set', 'dimension6', bamPercentPageViewedCallback.documentLocation);
ga('set', 'dimension7', bamPercentPageViewedCallback.scrollPercent.toString());
 }

 /**
 * Use the bamPercentPageViewed plugin
 */
 (function() {
 var o=onload, n=function(){
 bamPercentPageViewed.init({
 trackDelay : '2000',
 percentInterval : '10'
 });
 }
 if (typeof o!='function'){onload=n} else { onload=function(){ n();o();}}
 })(window);


 </script>
 <style type="text/css"> body { height: 4000px; } </style>
</head>
<body>

</body>
</html>

La función la usas y la puedes modifica para por ejemplo tener dimensiones de GA o lo que necesites:

bamPercentPageViewedCallback = bamPercentPageViewed.callback();

if(bamPercentPageViewedCallback !== false)
{
//send ga data
ga('set', 'dimension6', bamPercentPageViewedCallback.documentLocation);
ga('set', 'dimension7', bamPercentPageViewedCallback.scrollPercent.toString());
}

Por último, el código de inicialización (debería llamarse después del código anterior):

bamPercentPageViewed.init({
percentInterval : '10'
//other options....
});

Aquí está la lista de opciones de configuración en el init (son opcionales):

percentInterval: '10', //the increment at which to bucket the percentage value (10, 25, etc)
cookieName: '_bamPercentPageViewed', //use if you want to name the cookie something else
trackDelay: 1500 //The delay (in ms) before a scroll position is considered stable (reduce scroll bouncers)

Algunas cosas importantes que debe saber

El comportamiento predeterminado de este plugin será capturar el valor del porcentaje de desplazamiento máximo en la visita de página siguiente. Por defecto de 10 en diez. Esto significa que si el usuario sale de la página en cuestión, no vamos a capturar datos sobre el porcentaje de página visitada. Para combatir esto, se podía devolver la llamada de GA en el evento click de los enlaces externos si los tenemos. Al hacer un click externos podemos establecer una dimensión con un evento cuando el usuario hace clic en un enlace de salida.

En los datos del informe, capturamos la página anterior URI para que puedas tener el porcentaje visto o (ya que enviaremos los datos sobre la visita de página siguiente). Esto también le da una dimensión de datos que muestra la página anterior URI de cualquier dimensión a nivel de éxito.

Este plugin funciona muy bien en Classic y Universal de Google Analytics. Si usas tag manager lo podrías añadir directamente GTM. http://andygibson.us/2013/10/track-scroll-depth-using-google-tag-manager/

Capturados los datos ¿Y ahora qué? Esta claro sacar informes y conclusiones

Informe personalizado scroll percent custom report GA

Si utilizas las etiquetas «Página anterior» y «Porcentaje Scroll» para sus dimensiones personalizadas de GA. ¿Cómo se llega a los datos?

Simplemente es crear un informe personalizado. Construirlo con la imagen de abajo:

(Nota: Tenga en cuenta que se usan dimensiones personalizadas # 6 para «Página anterior» y la dimensión de encargo # 7 para «Porcentaje Scroll» en nuestro ejemplo, pero esto puede variar con la impletencación que hagas.)

ga(‘set’, ‘dimension6’, bamPercentPageViewedCallback.documentLocation);
ga(‘set’, ‘dimension7’, bamPercentPageViewedCallback.scrollPercent.toString());

Reporte de profundidad de Scroll

Utilizando el informe para profundidad Scroll; deberás seleccionar una página (por ejemplo www.domain.com/) y luego verás un porcentaje de desplazamiento con un desglose.

 

(Nota: Cambiar el tipo de gráfico a «rendimiento» con el fin de obtener el gráfico de barras con porcentajes (resaltados en la captura de pantalla anterior) Confirmar este post para más adelante. Google Analytics tipos de presentación gráfica .)

Segmentación de las visitas con el Scroll

Creas un segmento de visitas que vieron la página y se desplazaron  menos el 50% de esa página. Esto es sorprendentemente difícil en Google Analytics. Si esto es importante, es necesario combinar los datos en una sola dimensión.

En universal Analytics, puede simplemente crear un filtro personalizado .

Aquí está el filtro personalizado para esto, donde la salida sería algo así como ‘http://www.mydomain.com/about:50’.

 

Desde aquí, podría crear un segmento con una expresión regular que coincida con el / sobre la página y que el número es 50 o superior. Aquí hay que RegEx: * / sobre:. (5 | 6 | 7 | 8 | 9 | 10) 0 $

Esperamos que os sirva para tomar decisiones a la hora de valorar la longitus de su Web y donde colar las cosas importantes para tener inpactos. Ahora ya sabes responder a ¿Cómo saber con Google Analytics hasta donde hacen scroll tus usuarios?

 

Fuente: En ingles de ¿Cómo saber con Google Analytics hasta donde hacen scroll tus usuarios?

How to Track & Analyze Scroll Depth in Google Analytics http://www.blastam.com/blog/index.php/2014/04/scroll-depth-tracking-analysis-google-analytics

. Leer artículo completo en Frikipandi ¿Cómo saber con Google Analytics hasta donde hacen scroll tus usuarios?.

Entradas recientes para ¿Cómo saber con Google Analytics hasta donde hacen scroll tus usuarios?

  1. El nuevo controlador inalámbrico para Xbox REALMz Minecraft: Diamond Print con Esteve de PDP ya está disponible
  2. La primera pop-up store de Nintendo en España abrirá sus puertas en Manga Barcelona
  3. Path of Exile 2 desvela el contenido de acceso anticipado en el GGG Live
  4. Aumenta un 89% la creación de páginas web relacionadas con Black Friday
  5. MARVEL vs. CAPCOM Fighting Collection: ¡Los Clásicos del Arcade llegan en formato físico!
Salir de la versión móvil