Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

Lautaro Carro

October 26, 2022
Tweet

More Decks by Lautaro Carro

Other Decks in Technology

Transcript

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

    Lautaro Carro
  2. { "name": "Lautaro Carro", "username": "@lauchacarro 📷", "award": "Microsoft MVP

    🏆", "job": "Desarrollador y Coach en Algeiba 💻", "communities": ["Latino .NET Online", "NET-Baires", "ReactBA"] }
  3. ¿Qué metricas podemos obtener? • Funcionalidades favoritas de los usuarios

    • Contador de Views por Página • Top 10 Browsers - Países – Device
  4. NO CONFUNDIR !!!

  5. Hablemos de Azure

  6. ¿Qué es Azure? • Azure es la nube creada por

    Microsoft para construir, probar, desplegar y administrar nuestras aplicaciones.
  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).
  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)
  9. Application Insights: NPM Packages

  10. Resumen Conceptual KQL

  11. None
  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
  13. Nuestro Algoritmo de Recomendación

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

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

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

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

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

    / 10 seg 15 seg vistos 20 seg vistos
  19. None
  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.
  21. { "message": "MUCHAS GRACIAS 👏", "fullname": "Lautaro Carro", "email": "[email protected]

    📧", "isQuestionTime": true, "github": "github.com/lauchacarro/React-Application-Insights- IG-Stories", }