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:
<platform name="android">
<resource-file src="google-services.json" target="..\platforms\android\app\google-services.json" />
…
</platform>
<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.
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:
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!