Ionic App Center Analytics | Cómo implementarlo y ponerlo en marcha

¿Te gustará saber que hace tu usuario dentro de tu app? ¿Qué botones toca, o que páginas visita a través de Ionic App Center Analytics? Si has respondido que sí, quizás este artículo sea para ti. Sigue leyendo

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo te enseñaré a realizar un seguimiento de tu usario a través de App Center Analytics que sabrás hasta cuanto tiempo ha estado el usuario dentro de tu aplicación, que botones ha tocado y que páginas ha vistado.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

Pero ¿qué es App Center Analytics?

Es una librería que, en conjunto con un panel de control dentro de su plataforma web, nos permite monitorizar el uso que realiza el usuario de nuestra app.

Cómo veremos más adelante cuando expliquemos las funciones, asociará como una "sesión" al usuario y nos permitirá conocer detalles de su dispositivo, localización, etc... Y, a parte, nos permitirá realizar un registro de eventos propios. Vamos, algo bastante similar a lo que nos permite Firebase.

Cómo instalar Ionic App Center Analytics

Cómo todos los módulos externos, se necesita realizar una instalación dentro de nuestra app para poder utilizar dicho componente. Para ello, vamos a utilizar las dos siguientes líneas de consola.

$ ionic cordova plugin add cordova-plugin-appcenter-analytics 
$ npm install @awesome-cordova-plugins/app-center-analytics

La primera líneas instalará el plugin de Cordova que nos permitirá la comunicación con la parte nativa del sistema.

La segunda instalará el código TS necesario para poder comunicarnos con el plugin desde nuestro código.

Plataformas soportadas

Las plataformas que soporta este dispositivo son, aunque limitadas, bastante obvias.

• Android
• iOS

Cómo se utiliza en nuestra app

Primero vamos a ver un ejemplo de código y después comentamos sobre él.

import { AppCenterAnalytics } from '@awesome-cordova-plugins/app-center-analytics/ngx';


constructor(private appCenterAnalytics: AppCenterAnalytics) { }

...

this.appCenterAnalytics.setEnabled(true).then(() => {
   this.appCenterAnalytics.trackEvent('My Evento', { TEST: 'HOLA_MUNDO' }).then(() => {
       console.log('Custom event trackeado');
   });
});

En la primera líneas vamos a importar la clase "AppCenterAnalytics" que pertenece al paquete "@awesome-cordova-plugins/app-center-analytics/ngx". Dicho paquete es el que hemos instalado en la parte de la instalación de la librería.

Posteriormente, vamos a realizar una inyección de dicha clase a través del constructor de nuestro componente.

Ahora, mediante el método "setEnable" activaremos la librería para que comience a recoger datos. Recibirá un booleano cómo parámetro para que nos permitirá activar, o desactivar, el tracking.

Esta función devolverá una promesa que tenemos que controlar. Con ella no llegará nada, pero nos permite conocer cuando todo ha terminado de configurarse y activarse.

Y, a modo de ejemplo, mediante el método "trackEvent" enviaremos un evento personalizado al sistema para que lo registre y luego podamos hacer uso de él en el backend.

Y con esto ya estaría todo configurado y funcionando. Ahora pasamos a profundizar un poquitos más. Vamos a ver sus campos de clase y funciones.

Funciones y campos de clase del componente

Recuerda, en esta sección únicamente veremos los campos y funciones de la clase en sí misma. No hablaremos de las de ningún padre.

trackEvent(eventName, properties)

Esta función nos permite registrar un evento dentro de la plataforma.

Podemos registrar 200 eventName diferentes, los eventName solo podrán contener 256 caracteres cómo máxmio y las properties solo podrán tener una longitud de 64 caracteres.

• eventName -> string -> El nombre del evento que queremos que aparezca cuando lo visualicemos en el backend.
• properties -> StringMap -> Las propiedades asociadas al evento. Dichos datos aparecerán ordenados en el backend de la plataforma Ionic App Center Analytics.

Retornará una promesa que tenemos que controlar. No trae nada consigo, pero nos permitirá conocer cuando se ha terminado de registrar dicho evento.

isEnable()

Nos permite conocer cuál es el estado del componente.

Retorna una promesa que tenemos que controlar y con ella lleva un valor booleano que será verdadero en caso de que este activa, y false en caso contrario.

setEnable(shouldEnable)

Nos permite activa, o desactivar, el track y el envío de eventos en tiempo de ejecución.

• shouldEnable -> boolean -> Si pasamos un valor verdadero se activará. En caso contrario, se desactivará.

Retornará una promesa que tenemos que controlar. No devolverá nada, pero nos permitirá conocer cuando ha terminado de realizarse todo.

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Geniete, pues espero haberte ayudado con esto. Nos vemos en el siguiente artículo y hasta entonces ¡que te vaya bien!