Integrating React Native Expo with Firebase Analytics
What is Firebase Analytics?
Firebase Analytics is a free, robust analytics tool from Google that helps you measure user engagement with your mobile apps. It collects data on user interactions, events, demographics, and more. Firebase Analytics automatically tracks some events (e.g., app installs, app opens, etc.) and allows you to log custom events for specific user actions.
Firebase Analytics also integrates seamlessly with other Firebase services, such as Firebase Crashlytics, Firebase Remote Config, and Firebase Cloud Messaging, giving you comprehensive insights into your app's performance and user engagement.
Prerequisites
Before you begin the integration, ensure that you have the following:
React Native Expo App: If you haven’t already, create a new React Native project using Expo.
Firebase Account: Create a Firebase project from the Firebase console.
Install Firebase and Expo Firebase Analytics Libraries
npx expo install expo-build-properties @react-native-firebase/app @react-native-firebase/analytics
Setting Up Firebase Project
- Go to Firebase Console:
Navigate to Firebase Console and create a new project or use an existing one.
- Add Your App to Firebase
Click "Add app" in the Firebase project dashboard.
For React Native, select iOS or Android (depending on your platform).
Follow the instructions to download the google-services.json (for Android) or GoogleService-Info.plist (for iOS) and add these to your project directory
- Enable Analytics in Firebase
In the Firebase Console, navigate to the Analytics section and enable it. You’ll be able to view events and user behavior here once you start logging them from your app.
Configure React Native Firebase modules
{
"expo": {
"ios": {
"googleServicesFile": "./GoogleService-Info.plist",
"bundleIdentifier": "com.mycorp.myapp"
},
"android": {
"googleServicesFile": "./google-services.json",
"package": "com.mycorp.myapp"
},
"plugins": [
"@react-native-firebase/app",
[
"expo-build-properties",
{
"ios": {
"useFrameworks": "static"
}
}
]
]
}
}
Rebuild Your App
After modifying app.json, make sure to rebuild your app so that the new configurations take effect.
If you're using Expo without EAS, run the following commands:
# For iOS
npx expo prebuild
npx expo run:ios
# For Android
npx expo prebuild
npx expo run:android
After running npx expo prebuild, it will generate the native iOS and Android configurations.
Using Firebase Analytics
Firebase Analytics is most useful when you start tracking user actions. You can log custom events and set user properties to gather more detailed analytics.
Here are some useful methods you can call on the Firebase Analytics instance:
logEvent(name, parameters): Log custom events with parameters.
import analytics from "@react-native-firebase/analytics";
analytics().logEvent("purchase", {
item_id: "123",
item_name: "Shoes",
price: 100,
});
setUserId(userId): Set a unique ID for the user. This is useful for identifying specific users in your analytics.
import analytics from "@react-native-firebase/analytics";
analytics().setUserId("user123");
setUserProperties(properties): Set custom properties for a user, such as preferences or demographics.
import analytics from "@react-native-firebase/analytics";
analytics().setUserProperties({ favorite_color: "blue" });
Testing
After setting up Firebase Analytics, you’ll want to test that events are being logged correctly.
Check Firebase Console: Go to the Firebase Console and look for events in the Analytics section. It might take a few hours for the data to appear in the console.
Conclusion
Firebase Analytics helps track user behavior and provide insights to improve your app.
Once set up, you can start logging events, setting user properties, and monitoring the impact of changes or features directly from the Firebase Console.
Remember to test your events and make sure everything is working as expected before deploying to production.