Skip to main content

Firebase Analytics For Ionic Apps – Logging Custom Events

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial, we will take a look at how you can use Firebase Analytics with your Ionic apps. We will take a look at how you can log custom events and track them using firebase.Knowing what happens in your app is a great way to improve a feature if it’s getting too much activity or get rid of certain features if it’s getting too less. Firebase has become my favorite when it comes to handling all my backend needs. Analytics is one such need that firebase does exceptionally well and it’s free.

Although, Firebase has an AngularFire library that can be used for the web-based apps, analytics, however, does not work with web-based apps. So in order to use Firebase analytics, we will need to use a Cordova plugin.

We will create an app that will log an event whenever a button is clicked. As this is just an example, I am logging a button click, what you decide to log is up to you and your app.

Step 1)

Let’s start off by creating a new app with the blank Ionic template.

Notice, that we are creating an app with the bundle id as com.myapp.appName. This will come in handy later on.

Step 2)

Now, we will install the cordova-plugin-firebase-analytics plugin. To do that run the following commands.

Here we are npm installing the ionic native wrapper for firebase analytics.

Step 3)

As we are still using the command prompt, we will generate a provider that will have all of our logging methods. To generate a provider in Ionic run the following command.

 

Step 4)

Head over to firebase.google.com and create a new project (You can use your existing one as well).  Then click Add Firebase to your Android app, if you are using iOS the click on Add Firebase to iOS app as shown below.

You will be then prompted to add an app package name. This is where you should enter the bundle id. In my case, it is com.myapp.appName.

If you have created an app without the --bundle-id flag in the command. You can find your Bundle id in the config.xml file in the widget tag as shown below.

Important Note: If you create apps with ionic without using the --bundle-id option then ionic will have the default id of io.ioinc.starter. Make sure to replace it with your own. You can read more about App id in my post here.

 

After entering the bundle Id, you will then be asked to download the google-services.json file.

Download the file and place it inside your project folder as shown below.

 

Step 5)

Now that we are done with all the configuration, it’s time to get started with coding our app. Open up src\pages\home\home.html and code it as follows.

Note that here we have just created a button and we have wired up the click event to the logClick() function.

Step 6)

In our app\pages\home\home.ts file we will code up the functionality for the logClick() function as follows.

We are importing the EventLoggerProvider provider, injecting it into the constructor and then using it inside the logClick() function. Inside the function we have the this.logger.logButton() method that accepts a string and an object as parameters. We are passing the appropriate values here.

 

Step 7)

Now let’s code up the provider which will have our logButton() method. Open up src\provider\event-logger\event-logger.ts and code it as follows.

This is where we are using the Firebase Analytics to log our event. We are importing firebase-analytics ionic native wrapper then injecting it into our consturctor. Inside the logButton() method we are using the logEvent() method of firebase analytics.

The logEvent() method accepts two parameters, one its the event name that you want to log as a string, the other is parameters that you want to log to that event. Alternatively, can use any of the predefined event names and parameter names as well.

As mentioned in the doc here, you can have 500 different event names per app and have 25 different parameters per event. Also, if you are creating custom events make sure to follow the naming convention mentioned in the docs.

Important Note

One last thing to keep in mind is that firebase automatically logs some events for you. This happens when you include the firebase SDK and have paced the google-services.json file. As this happens automatically there is no-code required for you to code. You can know more about some of the automatically logged events here.

 

Step 8)

Now that the event has been logged, it’s now time to view them in the firebase dashboard. So open up your firebase dashboard for your app and click on events.

You will see all of the automatic events along with the event you logged. Click on the event name to get more data about it along with the passed parameters. Keep in mind that custom events take some time to show up in analytics, by some time I mean around 24 hrs. This is the case with almost all analytics providers. So do not panic if the event that you logged does not show up right away.

 

Conclusion

All in all Firebase Analytics is a great way to know where your users are coming from and what are they doing in your app. Keep one thing in mind though, don’t get carried away and try to log each and every event that your app has. To have an effective understanding of your app make sure that you log important events only.

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: