Tracking React Native Mobile Apps using Google Analytics for Firebase

At the heart of Firebase is Google Analytics for Firebase, a free and unlimited analytics solution also referred to as Firebase Analytics. Firebase Analytics integrates across Firebase features and provides you with unlimited reporting for up to 500 distinct events that you can define using the Firebase SDK. Analytics reports help you understand clearly how your users behave, which enables you to make informed decisions regarding app marketing and performance optimizations.

The Firebase Analytics SDK doesn’t support JavaScript mobile frameworks (e.g., React Native) directly; we have to have something like a bridge to help us to write the tracking code snippets in JavaScript and translate it to the Native code the SDK can understand. Sometimes this extra functional component that you add to your app is called a plugin, or sometimes it is called a module as is the case for React Native.

Before we dig deeper into the technical aspects of tracking React Native Mobile Apps using Google Analytics for Firebase, what is React Native?

What Is React Native?

React Native is a JavaScript framework for writing real, natively rendered mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

Source: hackernoon.com
Image Link: https://hackernoon.com/react-native-for-beginners-fb3095968acf

Enabling Firebase Analytics in React Native App

To enable Firebase Analytics tracking in a React Native app, we are going to use React Native Firebase (aka RNFirebase). RNFirebase is a well-tested feature-rich modular Firebase implementation for React Native. It supports iOS & Android platforms for over 15 Firebase services (including Firebase Analytics). Using the RNFirebase Analytics Module, we can implement Firebase Analytics to track React Native mobile apps. During the opening keynote at the Firebase Summit in Prague, Google openly announced its working relationship with the RNFirebase team – check it out here.

RNFirebase provides a light-weight layer on top of the native Firebase SDKs (iOS & Android). RNFirebase supports a vast majority of Firebase services; each module is optional – only install what you require. In our case, we are going to install Google Analytics for Firebase module.

Installing the Google Analytics for Firebase Module of RNFirebase

The steps below start with creating a Firebase Project and detail how to add your app to the Firebase project and RNFirebase to your app.

Step 1: Assuming you have your React Native App up and running, open your terminal, redirect to your project directory, and run the following command to add RNFirebase to your project:

npm install –save react-native-firebase

Step 2: Go to console.firebase.google.com and create your Firebase Project.

Creating a Firebase project

Note: Android and iOS each require specific installation steps; below we are providing the Android installation steps specifically.

Step 3: Add your app to the Firebase project. In the android version of your app, go to the AndroidManifest.xml file to get the Android package name to use it while you are adding the Android app to the Firebase project.

Copying the Android package name of your app to add to the Firebase project.

Specifying the Android app to associate with your Firebase project

Step 4: Click the “Register App” button and download the google-services.json file and move it to the android/app folder.

Downloading the google-services.json file from Firebase to add to your Android app

Step 5: To link the RNFirebase to your app, in your terminal, make sure to redirect to your project folder and run the following command:

react-native link react-native-firebase

Step 6: Add Firebase SDK to your Android App as shown in the following screenshot:

Instructions from modifying your gradle files to load the Firebase SDK

Step 7: After adding the RNFirebase to your project, to be able to use it, you need to import it in the JS files as follows so you then log events:

import firebase from ‘react-native-firebase’;

Sending Data to Firebase with RNFirebase

To log a custom event, you can use the firebase.analytics() instance provisioned by the RNFirebase JavaScript library. In the example below, we’re logging a custom event with a custom param:

firebase.analytics().logEvent(“your_custom_event”, {“custom_parm”: “cp_value”});

To verify tracking, use the DebugView to see your events logged into the Firebase console in real-time.

Viewing Firebase DebugView to verify tracking sent by RNFirebase

DebugView

During development, it is important to validate your Analytics configuration. Once you have enabled Debug mode on your development device, you can see your app’s events being logged in the DebugView report.

To enable Analytics Debug mode on an emulated Android device, execute the following command line:

adb shell setprop debug.firebase.analytics.app

This behavior persists until you explicitly disable Debug mode by executing the following command line:

adb shell setprop debug.firebase.analytics.app .none.

To enable Analytics Debug mode on your iOS development device, specify the following command line argument in Xcode:

-FIRDebugEnabled

This behavior persists until you explicitly disable Debug mode by specifying the following command line argument:

-FIRDebugDisabled

Don’t Sacrifice Tracking for React Native

If you opt to build your mobile apps with React Native, you can still take advantage of tracking in Firebase Analytics. RNFirebase provides the JavaScript bridge to accomplish the same rich Firebase Analytics tracking that we enjoy in a native Android or iOS app.

To learn more about mobile app tracking strategies, contact us.

CP Marketing