Aitor Sánchez - Blog - Nov. 2, 2023, 10:15 a.m.
¿Pensando en integrar tu aplicación en la consola de Mixpanel y estás cansado de buscar información para hacerlo y no encuentras nada? O, quizás ya sabes cómo se usa Mixpanel Ionic, y lo único que te falta es conocer algún detalle para dejarlo cómo quieres ¿verdad?
Mi nombre es Aitor Sánchez, hago aplicaciones desde 2014, y en el artículo de hoy aprenderás cómo capturar datos de tu aplicación Ionic desde la consola de mixpanel.
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!
Antes de comenzar, y en caso de que quieras profundizar más en lo que hace, o cómo se utiliza Mixpanel, aquí te dejo un enlace donde te puedes informar mejor sobre sus funcionalidades. Nosotros nos vamos a limitar a conectar nuestra app con la plataforma.
En primer lugar, y cómo con todos los componentes desacoplados del core, necesitamos realizar una instalación de este en nuestra aplicación. Para ello vamos a usar las dos siguientes líneas de consola:
$ ionic cordova plugin add cordova-plugin-mixpanel
$ npm install @awesome-cordova-plugins/mixpanel
La primera instalará el plugin que contiene el código nativo necesario para poder comunicarse con el dispositivo.
La segunda instalará el componente con el código TypeScript para poder comunicar nuestro código con el del plugin.
A menos que estemos usando una versión inferior de Ionic 4, o no estemos usando el módulo NGX del plugin, tendremos que incluir el componente en los providers de nuestra apps. Veamos cómo se hace antes de continuar:
providers:
...
import { Mixpanel } from "@awesome-cordova-plugins/mixpanel/ngx";
...
[
...,
Mixpanel,
...
]
...
Recuerda, aunque este no sea el caso, de que si colocamos los módulos desacoplados solo en los componentes donde los vamos a utilizar, en lugar de en el módulo principal (app-module.ts) estaremos mejorando el rendimiento de nuestra app e incurriendo en buenas prácticas de desarrollo.
Ahora veremos cuales son las plataformas que el plugin pone a nuestra disposición para poder usarlos.
Era de esperar, quizás me ha impactado un poco más la del navegador, pero es lógico. Mira, por ejemplo, Google Analytics para webs, es la leche…
Bien, llegados a este punto a todos nos encanta ver cómo ha avanzado el artículo. Pero ahora llega la chicha de verdad.
La verdad que el uso es super fácil de integrar, pero primer un ejemplo:
import { Mixpanel, MixpanelPeople } from '@awesome-cordova-plugins/mixpanel/ngx';
constructor(private mixpanel: Mixpanel, private mixpanelPeople: MixpanelPeople) { }
...
this.mixpanel.init(token)
.then(onSuccess)
.catch(onError);
Al igual que firebase, solo con esto ya estaríamos realizando una gran parte del trabajo de rastreo. Si ninguna línea de código más que añadir.
¿A qué es super sencillito? Pues con esto ya estaríamos traqueando gran parte de los datos que nos hacen falta. El plugin ya se encarga de ello. Ahora vamos a ver que más podemos hacer con el componente:
Bien, ahora pasaremos a ver las funciones disponibles que pone a nuestro servicio este SDK y de las que podemos aprovecharnos para aumentar su rendimiento:
En caso de que en algún momento queramos cambiar el alias con el que se suben los datos al panel, este será el lugar indicado.
Retorna una promesa que tendremos que controlar. En caso de que todo haya ido bien esta se resolverá. En caso contrario, se saldrá por el catch.
Nos permite recuperar el ID del usuario registrado en mixpanel.
Nota: Cuando un usuario abre la aplicación por primera vez, se le asigna un ID único. Pues con esta función se recupera ese ID.
Retorna una promesa que hay que controlar. Dentro de esta, cuando se resuelva, llegará la información del ID del usuario. En caso de que salga por el catch no llegará nada.
Mixpanel manda la información que extrae del usuario cada X tiempo. Digamos que la almacena y después la manda.
Pues bien, cómo podrás imaginar, esta función limpia el “cajón” donde el SDK guarda la información haya sido enviada o no. (El sistema borra automáticamente la información cuando ya ha sido enviada)
Retorna una promesa que hay que controlar. En caso de que todo haya ido bien, se resolverá. En caso contrario fallará y se saldrá por el catch.
Con esta función podemos acceder a la información del usuario que el componente tiene registrado en su sistema.
Retorna una promesa que tendremos que controlar. En caso de que se resuelva con ella llegará la información de este. En caso contrario fallará, se saldrá por el catch y no llevará nada consigo.
Cómo hemos comentado un poco más arriba en el tuto, esta función nos permite inicializar le sistema.
Retorna una promesa que tendremos que controlar. En caso de que se resuelva es que todo ha ido bien y ya está trackeando. En caso contrario fallará, no trackeará nada y se saldrá por el catch.
Bien, esta función nos devolverá una lista con las super propiedades disponibles en el dispositivo donde se está ejecutando la aplicación.
Las super propiedades son propiedades que se alojan en el mismo dispositivo. Hay unas cuantas y son diferentes para cada dispositivo. Es mejor que las examines tu de manera manual y veas cuales son las que necesitas.
Retorna una promesa que hay que controlar. Si se resuelve, las propiedades llegarán con ella, de lo contrario no llegará nada.
Esta función nos permitirá registrar propiedades propias para luego usarlas y medirlas en la consola de Mixpanel o usarlas después en nuestra app.
Devuelve una promesa que hay que controlar. En caso de que todo haya ido bien se resolverá, en caso contrario fallará y saldrá por el catch.
Esta función es similar a la anterior, pero en caso de que ya se haya registrado esa propiedad, no se volverá a registrar. Es útil para medir errores, que solo son necesarios de medir una vez, por ejemplo.
Devuelve una promesa que hay que controlar. En caso de que todo haya ido bien se resolverá, en caso contrario fallará y saldrá por el catch.
Cómo su nombre indica, nos permite eliminar una super propiedad del sistema para que no se mida, ni se pueda acceder a ella, nunca más a menos que se vuelva a crear.
Retorna una promesa que hay que controlar, en caso de que se haya eliminado correctamente se resolverá. En caso contrario saldrá por el catch y fallará.
Bueno, pues cómo creemos, esta función reinicializa el componente completamente.
Retorna una promesa que hay que controlar. En caso de que se resuelva es que todo se ha reinicializado correctamente.
Veamos, este evento se usa para trackear, cómo su nombre indica, eventos de tiempo. Pero para que nos entendamos, este evento lanza un timer con un identificador: “timeEvent(‘eventoDeTiempo’)”.
A partir de llamarlo comienza el timer, para luego acceder a este valor del timer tenemos que llamar al método “track” de la siguiente manera:
“track(‘eventoDeTiempo’’)” y con este evento llegará el tiempo que ha transcurrido desde que se ha llamado “timeEvent” hasta que se ha llamado a “track”. ¿Lo has entendido? Espero que sí. Si no ha sido así, dímelo en los comentarios y lo tratamos un poco más a fondo.
Retorna una promesa que nos informará de que el sistema ha comenzado a contar en caso de que se resuelva. En caso de que falle, saldrá por el catch.
La explicación a esta función la hemos visto en el punto anterior, “timeEvent”. Échale un ojo.
Retorna una promesa que hay que controlar. En caso de que todo haya ido bien, se resolverá y con ella llegará el tiempo que ha transcurrido.
Ahora vamos a ver una clase hermana de Mixpanel que nos permite, en conjunto con Mixpanel, crear audiencias.
Aunque no la hayamos visto en las funciones de Mixpanel, si la hemos visto en el ejemplo de código, aunque no lo hayamos usado.
Nos permite crear una propiedad dentro de la audiencia.
Retorna una promesa que hay que controlar. Si todo ha ido guay, se resolverá.
Saca al usuario del dispositivo donde se esté ejecutando la app de la audiencia.
Retorna una promesa que tenemos que controlar.
Nos permite obtener la información que el usuario tiene dentro de la audiencia.
Retorna una promesa que hay que controlar. En caso de que todo haya ido bien se resolverá y con ella llegará la información de este.
Pues esta función nos permite incrementar una propiedad del usuario. Por ejemplo, las partidas que ha jugado a nuestro juego. Sería algo así:
“increment(‘games_playes’)”;
“increment(‘games_playes’, 20)”;
En caso de usar la primera, solo incrementaremos en una unidad la propiedad. Si usamos la segunda, incrementaremos en 20 las partidas jugadas.
Retorna una promesa que tendremos que controlar. Si todo ha ido bien, se resolverá. En caso contrario fallará y saldrá por le catch.
Aunque la propia documentación oficial no tiene nada escrito sobre esto, puedo intuir, y corroborar por que ya lo he usado, que se usa para registrar al usuario a un canal de notificaciones push.
Retorna una promesa para saber si todo ha ido correctamente.
Nos permite setear el valor, y las propiedades, que va a tener el usuario dentro de la audiencia.
Retorna una promesa que nos permitirá saber si todo ha salido bien.
Similar a la función anterior, pero esta vez si la propiedad ya está registrada, no la creará/seteará.
Retorna una promesa que nos permitirá saber si todo ha salido bien.
Aunque no la he utilizado, y mirando la documentación su uso no me ha convencido. Según esta se usa para trackear cobros o reintegros.
Retorna una promesa para saber si todo ha ido bien. En este caso se resolverá y la información de la transacción llegará por el then.
Bueno, pues cómo su nombre indica, eliminar las propiedades que le pasemos cómo parámetro.
Cómo casi todas las funciones de esta clase, devuelve una promesa que hay que controlar.
Pues esta función creará una propiedad en caso de que no la haya, con los valores que le hemos asignado en el par. Pero en caso de que sí que exista, no creará ninguna y unirá los valores de ambas.
Retorna una promesa para saber si todo ha ido correctamente.
Bueno, pues esa ha sido toda la explicación de los campos y funciones. Se me ha hecho un poquito largo el artículo, la verdad. Solo queda el tutorial en vídeo que vamos a ver a continuación:
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, hasta aquí el artículo de hoy. Espero haberte ayudad y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!