Mobile Apps Analytics y Charles Proxy

En el desarrollo de aplicaciones móviles, no es posible ver y analizar las peticiones que se envían y reciben entre el navegador web/cliente y el servidor. Sin esta visibilidad, es difícil y lleva mucho tiempo determinar exactamente dónde están los errores. Aquí es dónde nos son útiles las herramientas de análisis de tráfico ya que con tan sólo configurarlas en nuestro PC, podemos diagnosticar y solucionar problemas rápidamente. Hacen que la depuración sea rápida y confiable, ahorrándonos mucho tiempo.

Desde ExO (Experience optimisation) siempre intentamos elegir las mejores herramientas de análisis de aplicaciones móviles dentro de todas las opciones que tenemos en el mercado. Sabemos lo importante que es la inclusión de un software de análisis de aplicaciones y así lo detallan en el estudio de Harvard Business Review , dónde se demuestra que las empresas que integran múltiples fuentes de datos de clientes y marketing superan significativamente, en cuánto a ingresos, a las empresas que no lo hacen.

Mobile App Analytics

En ExO, concretamente en el proyecto de CaixaBank, trabajamos básicamente con dos herramientas, Charles y Tealium.

Qué es Charles

Se trata de un proxy multiplataforma que se ejecuta en nuestro PC y registra todo el tráfico HTTP y SSL/HTTPS entre navegador e internet. Una vez confirmado el acceso se empiezan a mostrar las peticiones que entran desde el dispositivo móvil. Siguiendo estos pasos, ya podremos analizar todas las peticiones enviadas desde la app.

Tealium - EventStream

Tealium EventStream es una solución de recopilación y entrega de datos en tiempo real.

Desde EventStream podemos identificar y validar los datos entrantes, la mejora de esos datos con enriquecimientos y la adopción de medidas en tiempo real con fuentes de eventos y conectores.

En cuánto a la validación de los datos en tiempo real, existe el Live Events dónde el gráfico de eventos en vivo muestra eventos provenientes de todas las fuentes de datos y todas las fuentes de eventos. No es tan instantáneo como Charles ya que existe una demora de unos minutos.

Diferencias entre Charles y EventStream

Charles nos permite guardar la sesión para consultarla y poder analizarla con posterioridad.

En cambio, las peticiones en Tealium – EventStream desaparecen a los 10 minutos por lo que nos dificulta ese análisis, sobre todo cuando tenemos trazas de distintas pantallas. No obstante, hay una característica que tiene esta plataforma que Charles no tiene. Tealium permite configurar un event-feed con el que podremos filtrar las peticiones por cualquier tipo de variable (Nombre del dispositivo, ID de cliente, número de versión). De esta manera podremos ver el tráfico de un tercero sin tener que navegar nosotros mismos para recibir esas peticiones.

Para más información, en su WEB tienen un “Learning Center” dónde podemos encontrar todo tipo de soluciones.

Charles

Como ya hemos comentado Charles es un proxy ejecutable en el navegador web. El navegador web (o cualquier otra aplicación de Internet) se configura para acceder a Internet a través de Charles, y Charles puede registrar y mostrar todos los datos que se envían y reciben.

Características clave:

  • Proxy SSL: Para analizar solicitudes y respuestas SSL en texto sin formato
  • Permite valida las respuestas HTML, CSS y RSS/atom registradas utilizando el validador W3C
  • Limitación de ancho de banda para simular conexiones de Internet más lentas, incluida la latencia
  • Depuración de AJAX: Para ver solicitudes y respuestas XML y JSON como un árbol o como texto
  • AMF: Para ver el contenido de los mensajes de Flash Remoting / Flex Remoting como un árbol
  • Permite repetir solicitudes para probar cambios de back-end
  • Permite Editar solicitudes para probar diferentes entradas

Instalación en el PC

Charles se puede ejecutar en Windows, Mac OS X, o Linux de una forma rápida y fácil. Los pasos a seguir son muy simples. Descargamos la aplicación desde la página oficial de Charles, dependiendo del sistema operativo que tengamos, tenemos que seleccionar una u otra descarga. Una vez se ha descargado el archivo, lo ejecutamos, y procedemos a instalarlo.

Al utilizar Charles por primera vez necesitaremos añadir las localizaciones de nuestro site que queremos que Charles desencripte. Lo haremos desde el menú superior en “Proxy>SLL Proxying settings”.

Cuando ya tengamos los hosts introducidos, configuramos el dispositivo móvil con la IP para que se conecte a Charles y así podamos monitorizar el tráfico. La IP de nuestro PC la podemos encontrar en el Menú “Help< Local Ip Adress”. En nuestro dispositivo, también debemos configurar el WIFI para que se conecte a través del proxy.

Para más información, en su página web tienen disponible un “Getting Started”con todos los pasos a seguir.

Versión gratuita vs versión de pago

Charles proxy no tiene una versión gratuita, tiene un Trial que solo se puede usar 30 días y después comprar una licencia si se quiere seguir usando. Por lo que dentro de estos 30 días, Charles se puede utilizar de manera gratuita y sin ningún tipo de licencia. La única limitación que existe es que la aplicación sólo puede estar activa 30 minutos. Por lo que si no guardamos la sesión antes de ese tiempo, perderemos todas las peticiones y tendremos que volver a realizar la navegación.

En cuánto a la versión de pago, existen varias licencias que podemos ver en su página web.

Validación de los datos

Una vez ya tenemos las excepciones añadidas en el Firewall, ya podremos trabajar con Charles. A la izquierda, tendremos el listado de tráfico detectado por Charles. Si seleccionamos el envío de datos de la llamada que nos interesa, por ejemplo metrics (Adobe Analytics), podremos ver en el panel de la derecha toda la información enviada.

En caso de que queramos validar las variables que se están enviado de una forma más sencilla y clara, tenemos que seleccionar las pestañas “Contents” en la parte superior, y “Query String” en la parte inferior.

Implementación técnica

Para la implementación tanto en Android como en iOS, adjuntamos la documentación oficial de Charles. Para completar la instalación hay que añadir un parámetro más que no aparece en la documentación, destacado en amarillo:

android:usesCleartextTraffic="true"

<?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
        <application android:networkSecurityConfig="@xml/network_security_config" android:usesCleartextTraffic="true">
        ...
        </application>
    </manifest>

Consideraciones

Tras ver los múltiples beneficios que nos brindan este tipo de aplicaciones, podemos afirmar que la integración de una herramienta de análisis de tráfico es más que necesaria independientemente de la tipología del negocio.

Enlaces de interés

He leído y acepto la política de privacidad
Acepto recibir emails sobre actividades de recruiting NTT DATA