How to Add Firebase Analytics to Your NativeScript Mobile App
tns plugin add nativescript-plugin-firebase
reference links:
Prerequisites
Before starting, you need to create a new Firebase application using your Google account. This happens with just a few clicks. Firebase provides a free tier which covers entirely all Analytics services, so you don't need to take out your credit card. Navigate to https://firebase.google.com, authenticate with your Google credentials and follow the "Add project" wizard. In general, you don't need to change any of the default options in "Step 3," unless you have specific requirements related to services other than "Analytics."
In your newly created project, you have to navigate to the project settings and add iOS and Android applications. For the Bundle ID in iOS or the Package name in Android, use the value of the
applicationId property set in the package.json of your NativeScript app. As a result, you should have GoogleServices-Info.plist and google-services.json files. These files contain configuration properties that are used by the Firebase SDK to properly relate user interactions with your Analytics project. You can safely skip the instructions about how to add Firebase SDK and how to add initialization code to your app, as this set up will be handled by the plugin. Here is how the process looks for iOS (Android is very similar):
Set Up
As a first step, you need to install the nativescript-plugin-firebase plugin. Follow the installation steps provided by Eddy Vebruggen (the author of this awesome plugin). You need to place the
GoogleServices-Info.plist file in the App_Resources/iOS folder and the google-services.json in the App_Resources/Android folder. One additional file, firebase.nativescript.json, will be added to the root of your project, once the installation of the plugin is completed. During the installation, you will have to answer several questions about what part of the Firebase plugin you are planning to use. The output is a firebase.nativescript.json file which should look similar to this:{
"using_ios": true,
"using_android": true,
"firestore": false,
"realtimedb": false,
"remote_config": false,
"messaging": false,
"crashlytics": true,
"crash_reporting": false,
"storage": false,
"facebook_auth": false,
"google_auth": false,
"admob": false,
"invites": false,
"dynamic_links": false,
"ml_kit": false
}
Note: You should never commit your GoogleServices-Info.plist and google-services.json file to a public repository. They contain your secrets and other people will be able to exploit the data from your account if they are not properly protected. Ideally, they should be inserted build time by your CI infrastructure for production builds.
Your next step is to initialize the plugin in your application. The most appropriate place to do this is in the root component of your Angular application, as explained in the start-up wiring instructions. It is as simple as:
app.component.ts
import * as firebase from "nativescript-plugin-firebase";
ngOnInit(): void {
firebase.init({
}).then(
instance => {
console.log("firebase.init done");
},
error => {
console.log(`firebase.init error: ${error}`);
}
);
};
If you are using the {N} Core Framework you can use the application's launch event and attach to it:
app.js
application.on(application.launchEvent, (args) => {
firebase.init({
}).then(
instance => {
console.log("firebase.init done");
},
error => {
console.log(`firebase.init error: ${error}`);
}
);
};
});
When you are done with the installation, run the
tns run command. When your application starts on your devices, you should see some movements in the "Users in last 30 minutes" tile of your Analytics Dashboard. Another indication that wheels are starting to spin is that the red dots next to the iOS and Android projects will disappear as soon as the first data is registered:
With all this done, you are already ahead in the game and will have much more insights than those exposed in the Android and iOS developer consoles. Firebase will start to track some events out of the box for you like:
first_open, screen_view, and session_start (full list with automatically tracked events can be found in the documentation). It will also report some demographic information about your users — which country they are located in, gender, age, interests, what devices are they using and which devices they are not using. Additionally, your users will be automatically reported as new or returning. This will allow you to understand your audience and their interests better, and adjust your application to be even more appealing to them. You can easily add additional information for your users, using the setUserProperty method and further group your user base into segments.Tracking Page Views
Although Firebase will track events called "
screen_view" automatically, they won't prove very useful because of the architecture of NativeScript. All users' engagements will be reported in a single Activity for Android or ViewController for iOS. So, to better understand how our application is being used, we need to implement a custom event with some properties added to it.
For the purpose of this post, I will call such events "page views." This term can be quite ambiguous and, depending on your app, the specifics might mean different things. Furthermore, we want to track not only that a page was viewed, but also which page so that we can then analyze which pages are the most useful.
All this can be easily achieved using the API exposed by the nativescript-plugin-firebase plugin. The analytics object provides the
logEvent method, which will do exactly what we need. Here is a sample snippet:import * as firebase from "nativescript-plugin-firebase";
firebase.analytics.logEvent({
key: "page_view",
parameters: [
{
key: "page_id",
value: “Home”
}
// Add additional parameters here if needed
]
});
This will log an event called "
page_view" with a parameter "page_id" with a value of "Home". One way would be to add manual calls on every Component initialization. That would be a very tedious and error-prone task, we could do much better than this. Let's leverage the events exposed by the Angular router and log the event there, like this:
app.component.ts
this.router.events
.pipe(filter((event: any) => event instanceof NavigationEnd))
.subscribe((event: NavigationEnd) => {
firebase.analytics.logEvent({
key: "page_view",
parameters: [{
key: "page_id",
value: event.urlAfterRedirects
}]
});
});
Note: If you are using the {N} Core Framework, you can use the navigatedTo event and implement similar logic.
This will use the URL as the
page_id value. In most cases, it will give a nice representation of which URLs are visited and how often. Of course, you can fit it to your needs if your URL schema is not appropriate.
One pitfall is that you need to register your parameter in the Firebase Console before starting to use it. To do this, open your project in the Firebase Console, open the "Events" screen, click on the "
page_view" event and there is an "Add event parameters" button. From there, add the parameter that you want to track — in our case this is the 'page_id.'
At this point, you will know what parts of your applications are most useful. With this addition, you will have a full map of your users and how they interact with your mobile app. Here is how it can look in the Firebase Console:
Tracking Conversions
Depending on your application's purpose, there might be different things that you want to track as a conversion. By default, there are events like ecommerce_purchase and in_app_purchase. You are free to mark any of your existing events as a conversion as well, depending on your users' flow and business logic. To do this, just navigate to the Conversions screen and follow the "New conversion event" wizard.
Additionally, you can create Funnels to track how well your conversions are happening and identify areas for improvements in your users' journey. This is, again, very easy to achieve from the Funnels screen.
As a very oversimplified example, I prepared a sample application. On the homepage, there are two buttons: "Add to Shopping Cart" and "Purchase." The "Purchase" button will log a new event using one of the built-in keys that Firebase considers conversions, called "ecommerce_purchase." The other button, "Add to Shopping Cart," is logging a new event called "add_to_cart," which I can mark as conversion from the Firebase console. This way I can easily build a funnel to track my conversions, e.g. "first_open" -> "add_to_cart" -> "ecommerce_purchase." This will give me insights into where should I improve my users' experience and conversion. Here is how a funnel can look after these steps are taken:
Obviously, now there is something broken in my dummy funnel that I need to work on!
Troubleshooting
Events logged from your applications will not be immediately visible in the Firebase console. It can take up to 24 hours for the data to be available. From my experience, it takes at least several hours. This might make debugging difficult as you have to wait for a long time to test your changes.
Luckily, there is a view in the Firebase console called "DebugView." You need to enable it for your application or devices and, after that, events from your devices will be visible as soon as they are reported. For Android, this is as easy as running:
adb shell setprop debug.firebase.analytics.app test.obf.com.
test.obf.com is package Id.
For iOS, you will have to open your project in XCode and add the
-FIRDebugEnabled parameter to be passed on launch. More info on how to achieve this can be found out in the Firebase Documentation.Summary
To wrap up, adding Analytics is easy, makes you smarter, can save you time and money, and there is absolutely no reason not to start doing it. Firebase provides excellent features at no price, but there are other great Analytics services that you can also explore. The hardest thing that you need to do is think about what it means for your app to be successful and define how to measure it. The actual measuring is now easy.
How to add Google Analytics to Firebase Console(firebase analytics)
step 1) create google analytics account.
step 2) same gmail account to create firebase console account.
step 3) create new project In firebaseconsole.
set name of the project and next click on continue add google analytics for your firebase project.then click on continue.
if you already have Google Analytics account select account name and then click on continue project created successfully.
after creating project select android app.
add your app package Id and then next download google json file add json file in app->App_Resources->android->paste here.
and firebase.nativescript.json file to project path.(path like node-modules)
firebase.nativescript.json contain:::
{
"external_push_client_only": false,
"using_ios": false,
"using_android": true,
"firestore": false,
"realtimedb": false,
"authentication": true,
"remote_config": false,
"performance_monitoring": false,
"messaging": true,
"in_app_messaging": false,
"crashlytics": true,
"crash_reporting": false,
"storage": false,
"functions": false,
"facebook_auth": false,
"google_auth": true,
"admob": false,
"invites": false,
"dynamic_links": false,
"ml_kit": false
}
if you already installed tns plugin add nativescript-plugin-firebase
add above firebase.nativescript.json file and then
simply rerun npm run config in node_modules/nativescript-plugin-firebase.
after running command in your terminal asking some yes or no condition.
if your above firebase funaction is true you click yes otherwise click on no.
How to acces firebase authentication:
below code is for firebase initialization and authentication
firebase.init({
}).then(
instance => {
console.log("firebase.init done");
//authentication
firebase.login(
{
type: firebase.LoginType.ANONYMOUS
})
.then(user => console.log("User uid: " + user.uid))
.catch(error => console.log("Trouble in paradise: " + error));
//authentication
},
error => {
console.log(`firebase.init error: ${error}`);
}
);
How to call events in firebase
import * as firebase from"nativescript-plugin-firebase";
firebase.analytics.logEvent({
key:"Recharge", //event name
parameters: [
{
key:"page_id",
value: "prepaid"
}
// Add additional parameters here if needed
]
});
Thanks for sharing this important blog, how to add firebase in analytics. If you are Hire Nativescript Developers then you must aware about the nativescript technology for mobile app development.
ReplyDelete