Adding firebase analytics to Ionic

Adding firebase analytics to Ionic

STARTING AN IONIC PROJECT

  • Create a folder in which you are going to save your project
  • Open your favourite terminal and go to the folder you created
  • The first thing is to create the ionic project, the command below creates an App called MyGoogleDevApp with a blank template

ionic start MyGoogleDevApp blank

Add firebase cordova plugin

  • To add firebase cordova plugin the following the commands are run

    ionic cordova plugin add cordova-plugin-firebase

    npm install –save @ionic-native/firebase

  • Add the plugins the the apps module

Add provider to implement firebase analytics

  • The next step is to create a provider that will implement firebase analytics, you will use this provider to log events to firebase in your app

ionic generate provider FirebaseLogger

  • Add the provider the the app modules, if its not already there
  • Implement the code to call firebase using ionic native

 

constructor(public http: Http,private firebase:Firebase) {
console.log(‘Hello FirebaseLoggerProvider Provider’);
}

logEvent(tag,event){
this.firebase.logEvent(tag,event).then();
}

The next step is to call the provider you created in you app,

You can start by calling it in your home.ts

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { FirebaseLoggerProvider } from “../../providers/firebase-logger/firebase-logger”;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

constructor(public navCtrl: NavController,private firebaselogger: FirebaseLoggerProvider) {
this.firebaselogger.logEvent(“welcome”,”app_open”);
}

}