Application Insights, HTML, JavaScript, Microsoft Azure, Web Matrix

Application Insights + JavaScript + WebMatrix

Microsoft Azure cuenta con una gran cantidad de servicios y cada cierto tiempo lanzan previews para que los utilicemos y brindemos feedback, hoy vamos a hablar de un servicio llamado Application Insights.

¿Qué es Application Insights?

Application Insights es un servicio analítico para aplicaciones y sitios web que nos permite monitorear errores, rendimiento, uso, entre otros. Si anteriormente han trabajado con Telemetría este servicio pertenece a este ámbito, para los que no saben lo que es la Telemetría según Wikipedia es una tecnología que permite medición de magnitudes físicas y el posterior envío de la información hacia el operador del sistema, por ejemplo en los volcanes se utiliza para enviar datos a la institución que vela por el monitoreo de éstos.

¿Para qué me sirve?

  • Analizar patrones de uso: visitas a ciertas páginas, cantidad de usuarios, zona geográfica de los usuarios, entre otros.
  • Detectar y diagnosticar: obtenemos información de errores, rendimiento, tiempos de respuesta, uso de CPU, entre otros. Cabe destacar que todo esto se puede realizar en producción.

¿Qué puedo hacer con los datos obtenidos?

Pueden ser analizados con el propio portal de Azure,  Power BI, SQL Server o incluso herramientas propias.

¿Dónde lo puedo utilizar (tecnologías) ?

Application Insights ofrece un gran soporte para diversas tecnologías como .NET, nodeJS,  Python, IIS, J2EE, Ruby, Java, Android, PHP, iOS, entre otros. En este link pueden encontrar todas las plataformas soportadas.

Bueno ya que tenemos una noción básica de este servicio vamos a utilizarlo con un sitio web básico, lo primero será ingresar en Microsoft Azure y crear una aplicación web (en el momento que la creamos también se crea nuestro servicio de Application Insights). Acá ingresamos nuestro url (la que deseemos) y podemos dejar las configuraciones restantes como aparecen.

Cuando se crea vamos a descargar nuestro perfil de publicación

02.png

Seguidamente vamos a abrir nuestro servicio de Application Insights, para ello damos click en «Examinar» y seleccionamos el servicio.

03

Acá vamos a elegir el que tenga el nombre similar al sitio web que acabamos de crear

04

Cuando se abre por primera vez nos va aparecer una ayuda para que aprendamos a utilizarlo, vamos a dar click en supervisar la aplicación del lado del cliente.

05

Vamos a copiar el script que nos despliega, nótese que hay una variable llamada instrumentationKey a la cual le enviamos el id de nuestro servicio

06

Ahora vamos a agregar el script, en mi caso utilizaré Web Matrix y crearemos dos páginas con el siguiente contenido

index.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Index</title>
        <script type="text/javascript">
          var appInsights=window.appInsights||function(config){
            function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
            }({
                instrumentationKey:"ID APPLICATION INSIGHTS"
            });
       
            window.appInsights=appInsights;
            appInsights.trackPageView("Index");

        </script>
    </head>
    <body>
        Página principal

        <a href="contacto.html">Ir a Contacto</a>
    </body>
</html>

contacto.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Contacto</title>
        <script type="text/javascript">
          var appInsights=window.appInsights||function(config){
            function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
            }({
                instrumentationKey:"ID APPLICATION INSIGHTS"
            });
       
            window.appInsights=appInsights;
            appInsights.trackPageView("Contacto");

        </script>
    </head>
    <body>
        Página de contacto

        <a href="index.html">Ir a Index</a>
    </body>
</html>

Como se puede observar hemos agregado el script antes de la etiqueta de cierre </head> ya que así lo indican las instrucciones, la variable instrumentationKey tiene el valor del Id de nuestro servicio (por defecto este valor ya viene cuando se copia el script).

Ahora analicemos la siguiente línea que hemos modificado del script original a la que le indicamos que haga un rastreo de la vista de una página y le enviamos el nombre de la página por parámetros por lo que podemos obtener estadísticas de cuántas visitas tienen nuestras páginas

appInsights.trackPageView("Contacto");

De manera que queda así
07
Vamos a proceder a publicar nuestro sitio web

08

Seleccionamos importar perfil de publicación

09

Navegamos hasta nuestro archivo que descargamos previamente, normalmente tiene el nombre igual al sitio web que creamos

10

Cuando se carga nos va aparecer la siguiente ventana con unos datos los cuales vamos a dejarlos tal y como están ya que permiten conectarnos a nuestro sitio web en Azure

11

Después Web Matrix va verificar si nuestro sitio web local es compatible con los soportados de Microsoft Azure

12

 

13

 

14

Una vez que se ha verificado la compatibilidad vamos a observar los cambios que se van a realizar, en este caso se agregarán dos páginas web

15

Luego los archivos empezarán a cargarse a Microsoft Azure

16

Cuando finaliza la carga nos va informar y damos a dar click en la url

17

Observar emosun resultado similar al siguiente

Página Index

18

Página Contacto

19

Ahora vamos a regresar a Microsoft Azure y vamos a actualizar el servicio de Application Insight vinculado

20

Cuando se actualiza se nos desplegarán unos datos, de momento el tiempo de carga de las páginas

21

 

Recordemos que agregamos un rastreo tanto a la página de Index como de Contacto por lo que vamos a verificar si realmente están funcionando, para ello seleccionamos la opción de búsqueda y se nos desplegarán las siguientes estadísticas.

22

Bueno hemos aprendido a vincular Application Insights con un sitio web en este caso del lado del cliente. El mundo de la telemetría es muy importante y nos va facilitar muchas tareas, además podemos obtener ventaja de nuestros competidores al utilizar este servicio 🙂

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s