Obteniendo métricas de usuario con Azure para tu aplicación React

En esta ocasión aprenderemos a utilizar el servicio Azure Application Insights para obtener métricas de como nuestro usuario interactúa con una aplicación hecha en React. De las métricas vamos a obtener desde que país son los usuarios hasta diseñar algoritmos de recomendación.

https://www.youtube.com/watch?v=oBA6mq_oRRY

https://www.meetup.com/es-ES/react-en-buenos-aires/events/289083433/

Transcript

1. Obteniendo métricas de usuario con
   Azure para tu aplicación React
   Lautaro Carro
   

   View Slide

2. {
   "name": "Lautaro Carro",
   "username": "@lauchacarro 📷",
   "award": "Microsoft MVP 🏆",
   "job": "Desarrollador y Coach en Algeiba 💻",
   "communities": ["Latino .NET Online", "NET-Baires", "ReactBA"]
   }
   

   View Slide

3. ¿Qué metricas podemos obtener?
   • Funcionalidades favoritas de los usuarios
   • Contador de Views por Página
   • Top 10 Browsers - Países – Device
   

   View Slide

4. NO CONFUNDIR !!!
   

   View Slide

5. Hablemos de Azure
   

   View Slide

6. ¿Qué es Azure?
   • Azure es la nube creada por Microsoft para construir, probar, desplegar y administrar nuestras
   aplicaciones.
   

   View Slide

7. ¿De que trata Azure Application Insights?
   • Nos permite recopilar métricas y datos de telemetría de las actividades que se realizan en
   nuestra aplicación.
   • Originalmente fue desarrollado para el monitoreo de errores de nuestras aplicaciones pero
   también guarda información sobre los usuarios (EJ: país, ciudad, OS, dispositivo, browser, ip y
   mucho más).
   

   View Slide

8. Kusto Query Language (KQL)
   • Lenguaje de consultas de solo lectura que permite explorar nuestros datos, detectar patrones,
   identificar anomalías, valores atípicos y mucho más.
   microsoft/Kusto-Query-Language: Kusto Query Language is a simple and productive language for querying Big Data. (github.com)
   

   View Slide

9. Application Insights: NPM Packages
   

   View Slide

10. Resumen Conceptual
    KQL
    

    View Slide

11. View Slide

12. • Conocimos el Portal de
    Azure
    • Creamos un recurso de
    Azure Application Insights
    • Enviamos datos de
    usuario y la analizamos
    con KQL
    Resumen Demo 1
    

    View Slide

13. Nuestro Algoritmo de Recomendación
    

    View Slide

14. Nuestro Algoritmo de Recomendación
    10 seg vistos / 10 seg totales
    

    View Slide

15. Nuestro Algoritmo de Recomendación
    10 seg vistos 5 seg vistos / 10 seg
    

    View Slide

16. Nuestro Algoritmo de Recomendación
    10 seg vistos 5 seg vistos / 10 seg
    10 seg vistos
    

    View Slide

17. Nuestro Algoritmo de Recomendación
    10 seg vistos 5 seg vistos / 10 seg 15 seg vistos
    

    View Slide

18. Nuestro Algoritmo de Recomendación
    10 seg vistos 5 seg vistos / 10 seg 15 seg vistos
    20 seg vistos
    

    View Slide

19. View Slide

20. Conclusiones
    • Al utilizar Application Insights con React tenemos la libertad de crear las metricas necesarias para saber que les
    gusta a los usuarios de nuestra aplicación … y que cosas no le gustan
    • Además de los valores predeterminados, nosotros podemos enviar información adicional (EJ: el email del
    usuario, el tag del contenido, valores personalizados).
    • Podemos implementar Azure Application Insights con la tranquilidad de que no afectara el rendimiento ni la UX
    de nuestra aplicación
    • Con KQL podemos armar consultas dinámicas para obtener gráficos y exportar los resultados para enviarlos a las
    personas interesadas.
    

    View Slide

21. {
    "message": "MUCHAS GRACIAS 👏",
    "fullname": "Lautaro Carro",
    "email": "hello@lautarocarro.com 📧",
    "isQuestionTime": true,
    "github": "github.com/lauchacarro/React-Application-Insights-
    IG-Stories",
    }
    

    View Slide