¿Está funcionando su diseño responsivo? Google Analytics te lo dirá

 

 

 


Índice
  1. ¿Por qué factor de forma?
  2. Alimentación de datos a Google Analytics
  3. Analizando los datos en Google Analytics
    1. Panorama general con widgets del panel
    2. Segmentos de factor de forma
  4. Conclusión
    1. Otras lecturas

Más sobre Jon Arne Sæterås ↬

 

A medida que el diseño responsivo ha evolucionado, ahora comenzamos con mayor frecuencia con el contenido y luego establecemos puntos de interrupción cuando el contenido "se rompe". Esto significa que podría terminar con bastantes puntos de interrupción centrados en el contenido y sin dispositivos o factores de forma particulares en los que probar su sitio web. Sin embargo, necesitamos monitorear continuamente el desempeño de un diseño con tráfico real. Los puntos de interrupción centrados en el contenido son definitivamente el camino a seguir, pero también significan que monitorear su sitio web para identificar cuándo falla es más importante. En este artículo, Jon Arne Sæterås y Luca Passani demostrarán cómo WURFL.js y Google Analytics pueden trabajar juntos para mostrar métricas de rendimiento en todos los factores de forma. No más conjeturas.

El diseño web responsivo se ha convertido en el método dominante para desarrollar y diseñar sitios web. Hace que sea más fácil pensar "en dispositivos móviles primero" y crear un sitio web que se pueda ver en dispositivos móviles.

En los primeros días del diseño web responsivo, era común crear puntos de interrupción en CSS para tamaños de pantalla particulares, como 320 píxeles para iPhone y 768 píxeles para iPad, y luego probamos y monitoreamos esos dispositivos. A medida que el diseño responsivo ha evolucionado, ahora comenzamos con mayor frecuencia con el contenido y luego establecemos puntos de interrupción cuando el contenido "se rompe". Esto significa que podría terminar con bastantes puntos de interrupción centrados en el contenido y sin dispositivos o factores de forma particulares en los que probar su sitio web.

Sin embargo, solo estamos suponiendo que nuestros diseños funcionarán bien con diferentes clases de dispositivos y factores de forma y en diferentes modelos de interacción. Necesitamos monitorear continuamente el desempeño de un diseño con tráfico real .

Los puntos de interrupción centrados en el contenido son definitivamente el camino a seguir, pero también significan que monitorear su sitio web para identificar cuándo falla es más importante. Esta información, cuando es fácilmente accesible, proporciona sugerencias sobre qué tipos de dispositivos y factores de forma se deben probar más a fondo.

 

Google Analytics tiene integradas excelentes funciones multidispositivo ; sin embargo, con el diseño responsivo, en realidad estamos diseñando para factores de forma, no para dispositivos. En este artículo, demostraremos cómo WURFL.js y Google Analytics pueden trabajar juntos para mostrar métricas de rendimiento en todos los factores de forma. No más conjeturas.

¿Por qué factor de forma?

Siempre es más fácil acelerar y optimizar la experiencia del usuario para un dispositivo o familia de dispositivos en particular. Sin embargo, en realidad, crear una experiencia específica para todo tipo de dispositivos no es factible, dado que la diversidad de dispositivos habilitados para la web seguirá creciendo. Sin embargo, cada dispositivo tiene un factor de forma particular. Luke Wroblewski , autor de Mobile First , describe tres categorías para identificar experiencias con dispositivos :

  • uso o postura,
  • método de entrada,
  • salida o pantalla.

Debido a que los dispositivos varían entre estas categorías, obtenemos diferentes factores de forma. Por lo tanto, tiene sentido tratar el factor de forma como la dimensión principal a través de la cual monitorear un sitio web responsivo. Esto indicará qué tipo de dispositivo probar para determinar su usabilidad.

Todos los ejemplos de este artículo utilizan WURFL.js, incluidos los factores de forma que proporciona, que son:

  • escritorio,
  • aplicación,
  • tableta,
  • teléfono inteligente,
  • Característica del teléfono,
  • Televisión inteligente,
  • robot,
  • otros no móviles,
  • otro móvil.

Alimentación de datos a Google Analytics

El primer paso es colocar WURFL.js en las páginas que desea rastrear. Simplemente pegue esta línea de código en su marcado:

script type="text/javascript" src="https://wurfl.io/wurfl.js"/script

Esto creará un objeto WURFL global al que puede acceder a través de JavaScript:

console.log(WURFL.form_factor);

Ahora que la scriptetiqueta está colocada, lo único que queda por hacer es agregar las líneas de código resaltadas al código de seguimiento de Google Analytics:

/* Google Analytics' standard tracking code */_gaq.push(['_setAccount', 'UA-99999999-1']);_gaq.push(['_setDomainName', example.com']);_gaq.push(['_trackPageview']);/* Tell Google Analytics to log WURFL.js' data */ _gaq.push(['_setCustomVar', 1,’complete_device_name’,WURFL.complete_device_name,1]); _gaq.push(['_setCustomVar', 2,'form_factor',WURFL.form_factor,1]); _gaq.push(['_setCustomVar', 3,'is_mobile',WURFL.is_mobile,1]);/* The rest of Analytics' standard tracking code */(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();

O, si ha actualizado al nuevo "Universal Analytics " de Google Analytics , puede agregar esto:

 

/* Google Analytics' new universal tracking code */(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-99999999-1, 'auto');/* Define the custom dimensions */ga('send', 'pageview', { 'dimension1': WURFL.complete_device_name, 'dimension2': WURFL.form_factor, 'dimension3': WURFL.is_mobile});

Además, si utiliza GA Universal Analytics, debe recordar definir las dimensiones personalizadas. Esto se hace haciendo clic en AdminCustom DefinitionsCustom Dimensions. >Canastillas Bebe Gratis ¿Cómo se consiguen? ¿VERDAD O ENGAÑO?

Analizando los datos en Google Analytics

Ahora que los datos están en Google Analytics, debemos ponerlos a disposición para su inspección. Podemos usar variables personalizadas en Analytics de varias maneras, la más obvia es buscar en el menú de la izquierda y hacer clic en AudienceCustomCustom Variables:

Si utiliza Universal Analytics, tendrá las dimensiones personalizadas disponibles como cualquier otra dimensión en todos los informes de GA:

Ya estamos obteniendo una idea bastante clara de cómo los factores de forma se comportan de manera diferente. Las mejores métricas en las que centrarse obviamente dependerán de su sitio web, pero en general, preste atención a la tasa de rebote y a las páginas por visita.

Panorama general con widgets del panel

Con los paneles de Google Analytics, obtenemos una descripción general de alto nivel de las métricas más importantes. Este es un buen lugar para monitorear el rendimiento de su sitio web en todos los factores de forma. Una vez más, la tasa de rebote y las impresiones de página por visita son buenas métricas para empezar. El propósito de los widgets del panel es alertarlo y visualizar cómo cambia el rendimiento de su sitio web para ciertos factores de forma.

Creemos algunos widgets para mostrar el estado de diferentes factores de forma. Primero, cree un widget de gráfico circular que muestre cuánto se utiliza su sitio web en diferentes factores de forma.

En el Panel, haga clic en Add Widget, seleccione Piey luego la Sessionsmétrica y agrúpela por la form factorvariable personalizada. Tenga en cuenta que la etiqueta en la lista desplegable verde es Custom Variables, no el nombre real. En nuestro ejemplo, la form factorvariable está en la segunda ranura, pero asegúrese de elegir la ranura correcta si la ha implementado en un orden diferente. Nuevamente, si ha convertido a análisis universal, el procedimiento es similar, pero en lugar de seleccionar variables personalizadas, simplemente agrega el nombre de su dimensión personalizada como lo haría con cualquier otra dimensión.

 

A continuación, cree algunos widgets para mostrar las visitas y las tasas de rebote por factor de forma. Los widgets indicarán si los cambios en el sitio web han tenido un impacto positivo o negativo. Obviamente, desea mayores visitas y una tasa de rebote más baja.

Cree este widget agregando un filtro a las métricas estándar. Elija un diagrama de línea de tiempo y filtre los datos con su variable personalizada donde almacenó el factor de forma. Cree un widget para cada uno de los factores de forma que desee monitorear:

Es posible que descubra que algunos factores de forma desaparecen en las estadísticas de tasas de rebote globales porque el conjunto de datos ahora es más grande (como en el ejemplo anterior). Como lo indican las flechas rojas, algo dramático ha sucedido con los teléfonos inteligentes y los teléfonos básicos. Específicamente, se realizaron algunos cambios en la página de destino para aumentar el tráfico desde tabletas, y los cambios claramente tuvieron un impacto negativo en el tráfico desde teléfonos inteligentes y teléfonos básicos. Identificar el motivo de la caída en el tráfico requiere informes de Analytics más detallados, y es posible que la caída no hubiera sido fácil de detectar sin haber monitoreado los factores de forma.

Segmentos de factor de forma

Cualquier variable personalizada que ingrese en Google Analytics está, por supuesto, disponible en la mayoría de los informes como filtros o dimensiones, por lo que ajustarlas a sus necesidades es bastante fácil. Otra forma de tener en cuenta los factores de forma es colocarlos en segmentos creando condiciones. Aquí hay un segmento por factor de forma del que querrás realizar un seguimiento:

Lo mismo, pero en Universal Analytics:

Google Analytics mostrará estos segmentos en la mayoría de sus informes estándar como dimensiones separadas en gráficos y tablas:

Puede convertir el "factor de forma" en una dimensión en la mayoría de los informes. Como se mencionó, la tasa de rebote y la participación general son métricas clave a seguir, pero los objetivos y la tasa de conversión obviamente también son interesantes. Es posible que encuentre la necesidad de crear nuevos objetivos o al menos revisar su embudo para ciertos factores de forma.

Después de monitorear los factores de forma por un tiempo, podría concluir que necesita ofrecer diferentes experiencias de usuario para uno o más factores de forma. Además, es posible que deba modificar objetivos, embudos y campañas publicitarias para tener en cuenta las diferencias en el uso por factor de forma o tipo de dispositivo.

Hemos utilizado Google Analytics aquí, pero WURFL.js es, por supuesto, compatible con otras herramientas de análisis, siempre que se permitan variables personalizadas como las anteriores.

Conclusión

En este artículo, analizamos cómo el rendimiento por factor de forma es una métrica clave para monitorear un sitio web y cómo WURFL.js y Google Analytics ayudan a visualizar estos datos. Una vez que coloque los datos de WURFL.js en Analytics, estarán disponibles en la mayoría de los informes estándar como filtros o dimensiones, por lo que ajustar los informes a sus necesidades es bastante sencillo. Y los widgets del panel le brindarán una descripción general de alto nivel de su estado. Además, la tasa de rebote y las impresiones de página por visita son métricas clave, al menos al principio; por lo tanto, definir factores de forma como segmentos le brindará buenas visualizaciones en la mayoría de los informes estándar.

Como siguiente paso, analice las conversiones y los objetivos en Google Analytics para ver cómo integrar y monitorear los factores de forma, que variarán según la función y el propósito del sitio web. Para darle una ventaja, hemos creado una plantilla que puede instalar en su panel de Google Analytics (esta plantilla utiliza variables personalizadas, no dimensiones personalizadas). Simplemente siga las instrucciones para asignar una propiedad de Analytics, que luego aparecerá en DashboardsPrivate.

Otras lecturas

  • Una guía de Google Analytics y herramientas útiles
  • Mantenga sus datos analíticos seguros y limpios
  • Habilitación del seguimiento multipantalla con Google Analytics
  • Cómo utilizar Analytics para crear un sitio web móvil más inteligente

(al, ml, il, mrn)Explora más en

  • Móvil
  • javascript
  • Visualización de datos
  • Analítica
  • Diseño de respuesta





Tal vez te puede interesar:

  1. Diseño de un cuadro de texto, íntegro
  2. Diseño y construcción de una aplicación web progresiva sin marco (Parte 3)
  3. Escribir un motor de aventuras de texto multijugador en Node.js: diseño del servidor Game Engine (Parte 2)
  4. Componentes de diseño en React

¿Está funcionando su diseño responsivo? Google Analytics te lo dirá

¿Está funcionando su diseño responsivo? Google Analytics te lo dirá

Índice ¿Por qué factor de forma? Alimentaci�

programar

es

https://aprendeprogramando.es/static/images/programar-esta-funcionando-su-diseno-responsivoja-google-analytics-te-lo-dira-869-0.jpg

2024-05-20

 

¿Está funcionando su diseño responsivo? Google Analytics te lo dirá
¿Está funcionando su diseño responsivo? Google Analytics te lo dirá

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Top 20