Usando WebSphere Application Server Feature Pack for Web 2.0 and Mobile para ver patrones de uso de aplicaciones web y otros datos de analítica

Saber cómo navegan y exploran los usuarios a través de su web site puede ser valioso para guiar y justificar esfuerzos para mejorar el sitio. Por ejemplo, el conocimiento sobre estadísticas de la página puede guiarle para mover las páginas más frecuentemente accedidas a niveles más altos en el sitio, estadísticas sobre los clics del ratón pueden identificar botones que casi no son utilizados y largos periodos de inactividad pueden indicar que ciertas páginas necesitan simplificarse. Este artículo explica cómo usar los nuevos dispositivos en Dojo Toolkit e IBM® WebSphere® Application Server Feature Pack for Web 2.0 and Mobile para generar datos de analítica y ofrece consejo sobre la presentación de los datos en su propia aplicación. This content is part of the IBM WebSphere Developer Technical Journal.

Andy Dingsor, Advisory Software Engineer, IBM

Author photoAndy Dingsor es ingeniero de software consejero en IBM. Ha desarrollado una amplia variedad de productos de hardware y software, incluyendo un sistema de videoconferencias, adaptadores PCMCIA Wireless WAN, un equilibrador de carga de red TCP/IP y WebSphere Application Server. Andy tiene siete patentes en EE.UU. sobre modulación de radio FM, redes y técnicas de software. Ocasionalmente de desplaza al trabajo en bicicleta.



Eric Covener, Advisory Software Engineer, IBM

Author photoEric Covener trabaja en el laboratorio de desarrollo de IBM en Raleigh, Carolina del Norte. Actualmente trabaja en IBM HTTP Server y ha trabajado previamente en WebSphere Commerce, Contexts, and Dependency Injection for Java (CDI) y en WebSphere Application Server Feature Pack for Web 2.0 and Mobile. Eric es miembro de Apache Software Foundation y un miembro PMC en los proyectos Apache HTTP Server, Apache OpenWebBeans, and Apache Portable Runtime.



08-08-2011

Introducción

Instrumentar una aplicación web para informar la actividad del usuario de navegación y exploración puede generar estadísticas valiosas para mejorar la aplicación y guiar futuros esfuerzos de desarrollo. Existen tres pasos principales, representados en tres flujos de mensajes, que habilitan la recolección y presentación de este tipo de datos, conocidos como analítica, como se muestra en la Figura 1:

  1. Instrumentar su aplicación primaria con analítica de Dojo para permitir que Dojo genere mensajes de analítica.
  2. Recolectar datos de analítica con el servicio de analítica de manera que esta información en tiempo real sea salvada en un archivo de registro para análisis subsecuente.
  3. Presentar datos de analítica con Dojo Diagrammer, un widget que muestra los datos estadísticos.

Combinar los tres pasos brinda conocimientos poderosos para interpretar cómo los usuarios están navegando y explorando los dispositivos de su aplicación web.

Figura 1. Visión general de flujos de mensajes
Visión general de flujos de mensajes

Este artículo explica cómo puede usar los nuevos dispositivos en Dojo Toolkit e IBM WebSphere Application Server Feature Packfor for Web 2.0 and Mobile para generar datos de analítica y cómo puede presentar estos datos en una forma útil en su propia aplicación.


1. Instrumentar su aplicación primaria con analítica de Dojo

Dojo Toolkit es una biblioteca JavaScript™ de código abierto para todas las plataformas. Contiene cientos de funciones y utilidades diseñadas para simplificar la programación JavaScript y ocultar comportamientos específicos del navegador, y contiene una gran biblioteca de widgets.

El paquete de analítica de Dojo, dojox.analytics, es parte de Dojo Toolkit. Ha estado disponible en todas las versiones de Dojo desde la versión 1.1, incluyendo la versión que está empaquetada con IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.

La analítica de Dojo proporciona un mecanismo de seguimiento y registro cronológico que empuja los datos desde un navegador hacia un servicio web. Puede enviar datos para diversos orígenes de datos de analítica integrados y le habilita para definir y emitir sus propios eventos. La analítica de Dojo envía estos datos a un servicio de recolección que es independiente de la aplicación primaria.

Para habilitar estos dispositivos, la aplicación primaria puede aumentarse con algunas sentencias de analítica de Dojo. El código JavaScript es añadido al HTML o JavaCritp de la aplicación primaria en la que estos elementos pueden ser especificados:

  • A dónde son enviados los mensajes.
  • Qué mensajes son enviados.
  • Qué tan frecuentemente son enviados al servicio los mensajes acumulados.

El Listado 1 muestra un ejemplo de este código, en el que sendInterval especifica qué tan frecuentemente se envían los datos al servicio (en milisegundos) y analyticsUrl especifica la URL de destino a la que los datos son enviados.

Listado 1
<script type="text/javascript" 
src="dojotoolkit/dojo/dojo.js" 
djConfig="djConfig: true, 
sendInterval: 5000, 
analyticsUrl: 'http://server/path/to/dataLogger'"> 
</script>

Dojo puede generar estadísticas de analítica para diversos tipos de eventos, tales como accesos a la página y clics del ratón. Estos eventos pueden ser habilitados individualmente al incluir una sentencia dojo.require() par plug-ins específicos. Este es un dispositivo valioso que habilita la granularidad de estadísticas para que sean bien afinadas. Las sentencias en el Listado 2 muestran cómo habilitar algunos de estos eventos. Una lista completa está disponible en el web site de Dojo Toolkit (vea Recursos).

Listado 2
<script language="JavaScript" type="text/javascript"> 

// Access analytics. 
dojo.require("dojox.analytics"); 

// Enable mouse-over events. 
dojo.require("dojox.analytics.plugins.mouseOver"); 

// Enable mouse-click events. 
dojo.require("dojox.analytics.plugins.mouseClick"); 

</script>

Además de los eventos predefinidos, Dojo también permite que los mensajes de registro personalizados sean colocados en todo el código. Estos proporcionan una forma poderosa de grabar variables y declarar información en el registro. Por ejemplo, este mensaje console.rlog de Dojo escribe un mensaje personalizado en el registro del servidor.

console.rlog("console.rlog says datastore created");

La línea de código anterior genera esta salida en el archivo de registro:

[2011-0502-1643-0072] {"plugin":"consoleMessages",
"data":["rlog","console.rlog says datastore created"]}

Cada mensaje en el registro es prefijado con la indicación de fecha y hora en que el mensaje fue recibido por el servidor. En algunos casos, es valioso saber la indicación de fecha y hora en el navegador del cliente. Para registrar un mensaje personalizado que incluya la indicación de fecha y hora del navegador del cliente, usted puede codificar:

dojox.analytics.addData("timestamp",
[new Date().getTime(), "on-load executed"]);

El código anterior genera esta salida en el archivo de registro:

[2011-0502-1643-0072] {"plugin":"timestamp",
"data":[1304368975670,"on-load executed"]}

El Listado 3 muestra un ejemplo que muestra cómo registrar un mensaje siempre que se haga clic en una pestaña de acordeón. Conecta todas las instancias de un AccordionContainer a una llamada addData().

Listado 3
dijit.registry.byClass("dijit.layout.AccordionContainer")
.forEach(function(widget, index, hash) {
dojo.connect(widget, "selectChild",
function(selectedChild) {
dojox.analytics.addData("mynav", 
selectedChild.title);
});
});

Una instrumentación similar puede desencadenar un mensaje de registro siempre que una "vista" móvil se vuelva activa. El código en el Listado 4 conecta la llamada addData() a la vista inicial y a cada vista adicional.

Listado 4
var mobileAnalytics = 
function(moveTo, dir, transition, context, method) { 
dojox.analytics.addData("mynav", moveTo); 
} 

dojo.addOnLoad(function() { 
dijit.registry.byClass("dojox.mobile.View") 
.forEach(function(widget, index, hash) { 
dojo.connect(widget, 
"onAfterTransitionIn", mobileAnalytics); 
}); 
dojox.analytics.addData("mynav", "main"); // initial view 
});

Vea Recursos para obtener más información sobre la generación de mensajes.


2. Recolectar datos de analítica con el servicio de analítica

Un servicio web que es independiente de la aplicación web primaria recolecta datos desde navegadores y los escribe en un archivo de registro en la máquina del servidor. WebSphere Application Server Feature Pack for Web 2.0 and Mobile incluye una aplicación escrita en Java (un servicio JAX-RS) específicamente para este propósito. Aquí, verá lo fácil que es recolectar datos de analítica usando el servicio JAX-RS proporcionado por el paquete de dispositivos.

El servicio de analítica, appsvcs-analytics, está incluido en dos directorios en el paquete de dispositivos; uno es para propósitos de producción y otro es para demostración. Para el propósito de este artículo, instale el archivo EAR de demostración:

.../web2mobilefep_1.1/samples/web20mobileshowcaseSample/showcase.ear

Después de instalar e iniciar showcase.ear, navegue a la página de demostración de la aplicación, que simula la aplicación primaria, en http://localhost:8080/appsvcs-analytics/ (Figura 2).

Figura 2. Navegar a la página de demostración appsvcs-analytics
Navegar a la página de demostración appsvcs-analytics

Mueva el puntero del ratón alrededor y expanda y contraiga algunos elementos. Mover el ratón desencadena el Dojo subyacente para generar estadísticas de analítica y enviarlas a la aplicación appsvcs-analytics. Después de uno o dos minutos, las sentencias de analítica aparecerán en el archivo de registro de la aplicación en la máquina del servidor. En este ejemplo, el archivo de registro es analytics_default.log.

El Listado 5 muestra el formato del contenido de un archivo de registro típico. Como se mencionó anteriormente, cada línea comienza con una indicación de fecha y hora en corchetes, indicando cuándo fue recibido el mensaje por el servidor. El resto de la línea es una representación en serie de los datos recibidos de dojox.analytics en el navegador, formateados como un objeto JSON.

Tres mensajes de registro típicos son incluidos en el Listado 5. El primer mensaje es generado cuando una ventana se lanza. Contiene una gran cantidad de información sobre la ventana de navegador y la página que está siendo accedida. El segundo mensaje es mucho menos verboso y es generado cuando el usuario está inactivo. El mensaje final tiene un poco de información, y es generado por un evento mouse-over.

Listado 5
[2011-0502-1643-0072] {"plugin":"window", 
"data":{"outerHeight":1057, 
"offscreenBuffering":true, 
"screenTop":25, 
"name":"", 
"outerWidth":1400, 
"frameElement":null, 
"innerWidth":1668, 
"screenLeft":0, 
"defaultStatus":"", 
"console":{"memory":{"usedJSHeapSize":0, 
"jsHeapSizeLimit":0, 
"totalJSHeapSize":0}, 
"profiles":[]}, 
"PERSISTENT":1, 
"devicePixelRatio":1, 
"pageXOffset":0, 
"innerHeight":1159, 
"pageYOffset":0, 
"length":0, 
"scrollX":0, 
"scrollY":0, 
"screenX":0, 
"closed":false, 
"screenY":25, 
"TEMPORARY":0, 
"status":"", 
"defaultstatus":"", 
"location":{"pathname":"\/appsvcs-analytics\/", 
"port":"8080", 
"hostname":"localhost", 
"origin":"http:\/\/localhost:8080", 
"protocol":"http:", 
"search":"", 
"host":"localhost:8080", 
"href":"http:\/\/localhost:8080\/appsvcs-analytics\/", 
"hash":""}}} 

[2011-0502-1643-0072] {"plugin":"idle", 
"data":"isActive"} 

[2011-0502-1643-0072] {"plugin":"mouseOver", 
"data":["sample", 
{"target":{"spellcheck":true, 
"className":"claro", 
"localName":"body", 
"id":"", 
"textContent":"\n\n Welcome to the Analytics Service Application", 
"lang":""}, 
"x":"468", 
"y":"2"}]}

Realizando el seguimiento de sesiones de usuarios individuales con parámetros de inicialización personalizados

Los mensajes de analítica de todos los usuarios son escritos en el mismo archivo de registro. En forma predeterminada, las sesiones de usuarios individuales no son identificadas en el archivo de registro. Si varios usuarios navegan la aplicación al mismo tiempo, los mensajes de analítica son mezclados entre sí. Para asociar la analítica con usuarios individuales, la aplicación appsvcs-analytics puede escribir la dirección IP, el ID JSession o ambos en el archivo de registro con cada mensaje.

Para habilitar este dispositivo, defina un parámetro de inicialización predeterminado en el archivo web.xml para appsvcs-analytics. (Consulte el archivo README.html incluido en el archivo appsvcs-analytics.war en el paquete de dispositivos para obtener detalles sobre el uso de este parámetro). Por ejemplo, el parámetro personalizado en el Listado 6 habilita la recolección de las direcciones IP y de los identificadores de sesión HTTP en el registro.

Listado 6
<init-param> 
<param-name>
com.ibm.ws.mobile.appsvcs.analytics.
logger.LocalFileLogger.LogFormat
</param-name> 
<param-value>CLIENT_IP,CLIENT_SESSION_FORCED</param-value> 
</init-param>

Después de que reinicie el servidor, renueve el navegador y genere más estadísticas al realizar acciones que desencadenen el registro cronológico, la IP y el ID de sesión aparecen en el registro como se muestra en el Listado 7.

Listado 7
[2011-0503-1447-5680] 
127.0.0.1 
224DA705F7233CE06CE3735662FDE2A6 
http://localhost:8080/appsvcs-analytics/ 
{"plugin":"idle","data":"isActive"}

3. Presentar datos de analítica con Dojo Diagrammer

Con sus datos de analítica disponibles, el paso final es crear una aplicación de presentación. Esta aplicación realizará tres tareas:

  1. Leer el contenido del archivo de registro de eventos generado por el servicio de analítica.
  2. Analizar el archivo de registro para extraer información que encuentre útil.
  3. Presentar la información en forma comprensible.

La aplicación puede escribirse como un programa autónomo o como una aplicación web en un entorno que tiene acceso de lectura al archivo de registro.

Por ejemplo, puede crear una aplicación web JAX-RS de Java para ejecutarla como un servicio en el mismo contenedor web que su aplicación primaria. El programa puede abrir y analizar el archivo de registro, extraer los datos, organizarlos de acuerdo al ID de sesión HTTP, convertir los datos en un formato jerárquico JSON y retornar los datos al navegador. Este formato de datos es esperado por IBM Dojo Diagrammer, que está disponible en IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile. El Listado 8 da un ejemplo de este formato de datos.

Listado 8. Datos de JSON pasados a Dojo Diagrammer
{ "identifier" : "Name",
  "items" : [ { "Name" : "tab1",
        "children" : [ { "_reference" : "tab2" } ]
      },
      { "Name" : "tab2",
        "children" : [ { "_reference" : "tab3" },
            { "_reference" : "tab4" }
          ]
      },
      { "Name" : "tab3",
        "children" : [ { "_reference" : "tab2" } ]
      },
      { "Name" : "tab4",
        "children" : [ { "_reference" : "tab1" } ]
      }
    ],
  "label" : "Name"
}

El navegador puede presentar estos datos de JSON a Dojo Diagrammer como un depósito de dato y Dojo Diagrammer representa la imagen. La representación en la Figura 3 presenta datos de registro que fueron generados al hacer clic manualmente en un patrón aleatorio mediante una página web instrumentada.

La Figura 3 muestra la representación gráfica resultante de los pasos tomados por un usuario haciendo clic manualmente y navegando a través de un sitio. Varios artefactos de página, como main, tab1, post1, etc., son mostrados como recuadros. Los recuadros están enlazados entre sí con líneas y flechas; las flechas indican la dirección que el usuario progresó al hacer clic a través del sitio. Esta representación muestra el valor de una representación gráfica cuando se estudian las rutas tomadas por un usuario a través de un web site.

Figura 3. Datos de analítica presentados por Dojo Diagrammer
Datos de analítica presentados por Dojo Diagrammer

Conclusión

Este artículo describió tres pasos básicos para mostrar estadísticas de analítica para una aplicación: instrumentar y habilitar una aplicación para analítica, salvarla en un archivo de registro y presentarla en un formato significativo. Las tareas clave están decidiendo qué elementos rastrear y cómo convertir esa información en un formato JSON jerárquico. Después de eso, atar las piezas es muy sencillo.

Recursos

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=WebSphere
ArticleID=750740
ArticleTitle=Usando WebSphere Application Server Feature Pack for Web 2.0 and Mobile para ver patrones de uso de aplicaciones web y otros datos de analítica
publish-date=08082011