Instalar Analytics Firebase en ionic

Hoy nos hemos levantado con ganas de compartir algunas tareas que realizamos a diario en el departamento de diseño de aplicaciones móviles. Así que si tú eres de los autodidactas seguro que te interesa saber un poco más sobre el desarrollo de una app.

¿Cómo instalar Analytics FireBase en Ionic?

Lo primero que debemos hacer es crear un proyecto en Firebase, donde deberemos indicar el nombre del proyecto, su ubicación y aceptar los términos pertinentes. Los proyectos abarcan las distintas aplicaciones, por lo que un proyecto puede tener asociadas varias apps.

Una vez creado, añadiremos una aplicación a elegir entre IOS, Android y aplicación web. Para instalar Analytics Firebase en nuestra app en Ionic deberemos añadir dos aplicaciones en Firebase, una para Android y otra para IOS.

Necesitaremos añadir lo siguiente por este orden:

- El paquete de GoogleService-Info.plist o google-services.json en IOS y Android. Lo obtendremos una vez añadido el nombre de paquete que te solicita Firebase al añadir un tipo de app.

- Una vez descargado GoogleService-Info.plist o google-services.json, deberemos colocarlo dentro de nuestro proyecto de ionic, al mismo nivel que la carpeta src, www o resources.

Es importante destacar que es necesario añadirlo también dentro de la plataforma específica de IOS y Android.

En Android lo añadiremos en la siguiente ruta: platforms\android\app\google-services.json y deberemos indicarlo en nuestro proyecto ionic de la siguiente forma:

• En el archivo Config.xml, dentro de la sección de Android:

<platform name="android">
<resource-file src="google-services.json" target="..\platforms\android\app\google-services.json" />
…
</platform>

• En el archivo Config.xml, dentro de la sección para IOS:

<platform name="ios">
<resource-file src="GoogleService-Info.plist" />
...
</platform>

- Una vez colocado el JSON de Google services comenzaremos a instalar el plugin de Firebase Analytics, que aunque es una versión beta, numerosos usuarios comentan que funciona.

• ionic cordova plugin add cordova-plugin-firebase-analytics

•  npm install --save @ionic-native/firebase-analytics

•  Recuerda añadir sudo delante de ambos comandos en IOS.

•  Una vez instalados deberemos añadirlo a Providers de nuestro proyecto en ionic, dentro del archivo app.module.ts

 import { FirebaseAnalytics } from '@ionic-native/firebase-analytics';
 providers: [
MobileAccessibility,
FirebaseAnalytics,
InAppBrowser
]

- Por último, dentro de las páginas que deseemos deberemos añadir el siguiente código:

• import { FirebaseAnalytics } from '@ionic-native/firebase-analytics';

• declaramos en el constructor:

constructor(private firebaseAnalytics: FirebaseAnalytics) {

this.firebaseAnalytics.logEvent('page_view', {page:"dashboard"})
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
}

Para más información consultar la documentación oficial donde podremos ver también una Repo en Github.

Y hasta aquí este sencillo tutorial. Si queréis saber más sobre desarrollo web o desarrollo de aplicaciones móviles seguid atentos a nuestras noticias. y, si, lo que queréis es hacer una aplicación móvil, ¡contad con nuestra empresa de diseño de aplicaciones móviles!