Firebase Analytics React Native app

Firebase Integration

To seamlessly incorporate Google Analytics for Firebase into your React Native app, you’ll leverage a critical component known as RNFirebase, a JavaScript bridge facilitating communication between your app and Firebase Analytics.

GitHub - invertase/react-native-firebase: 🔥 A well-tested feature-rich modular Firebase…

In technical terms, RNFirebase acts as an interface, allowing your React Native codebase to interact with the native Firebase SDKs, ensuring a smooth flow of data and analytics insights. This integration allows you to track various events, analyze user engagement, and extract valuable metrics to enhance your app’s performance.

Follow the step-by-step instructions outlined in the article to harness the power of RNFirebase, creating a robust connection between your React Native app and Firebase Analytics. This technical synergy enables you to unlock a plethora of analytical capabilities, providing a data-driven approach to refining and optimizing your app’s user experience.

To add Firebase to your React Native app, you need to create a Firebase project and then follow the steps for both Android and iOS. Setting Up Firebase for Your React Native App.

Setting Up Firebase for Your React Native App

Step 1: Create a Firebase Project

1. Go to the Firebase Console: Visit the Firebase Console and sign in with your Google account. https://console.firebase.google.com/
2. Click on “Add Project”: Create a new project for your React Native app. Follow the on-screen instructions to configure your project.

Step 2: Configure Android

1. Add Android App:

• In the Firebase Console, select your project.
• Click “Add app” and choose the Android icon.

2. Provide Package Name:

• Enter your Android app’s package name (found in android/app/src/main/AndroidManifest.xml).

3. Download Config File:

• Download the google-services.json file and place it in the android/app directory.

4. Add Firebase SDK to Your App:

• Open android/build.gradle and add the classpath for the Google services plugin.

classpath 'com.google.gms:google-services:4.3.10'

• Open android/app/build.gradle and apply the Google services plugin

apply plugin: 'com.google.gms.google-services'

Step 3: Configure iOS

1. Add iOS App:

• In the Firebase Console, select your project.
• Click “Add app” and choose the iOS icon.

2. Provide Bundle ID:

• Enter your iOS app’s bundle identifier.

3. Download Config File:

• Download the GoogleService-Info.plist file and add it to the ios/ directory of your React Native project.

4. Install Cocoapods Dependencies:

• Navigate to ios/ and run:

pod install

1) Setting the current screen name

Setting the current screen name in the context of a React Native app using Firebase Analytics involves updating the screen name dynamically as users navigate through different parts of the application. Firebase Analytics allows you to track user interactions with screens, providing valuable insights into user engagement.

Assuming you have successfully integrated Firebase into your React Native app using RNFirebase, you can set the current screen name using the following code snippets:

React Navigation Example

If you’re using React Navigation to manage your app’s navigation, you can utilize the navigation listeners to update the screen name dynamically. Add the following code to your component:

import { useFocusEffect } from '@react-navigation/native';
import analytics from '@react-native-firebase/analytics';

const YourScreenComponent = ({ navigation }) => {
  useFocusEffect(
    React.useCallback(() => {
      const screenName = 'YourScreenName'; // Set the desired screen name
      analytics().setCurrentScreen(screenName, screenName);
    }, [])
  );

  // Your component logic goes here

  return (
    // Your component UI
  );
};

export default YourScreenComponent;

Setting the current screen name in the context of a React Native app using Firebase Analytics involves updating the screen name dynamically as users navigate through different parts of the application. Firebase Analytics allows you to track user interactions with screens, providing valuable insights into user engagement.

Assuming you have successfully integrated Firebase into your React Native app using RNFirebase, you can set the current screen name using the following code snippets:

React Navigation Example

If you’re using React Navigation to manage your app’s navigation, you can utilize the navigation listeners to update the screen name dynamically. Add the following code in your component:

import { useFocusEffect } from '@react-navigation/native';
import analytics from '@react-native-firebase/analytics';

const YourScreenComponent = ({ navigation }) => {
  useFocusEffect(
    React.useEffect(() => {
      const screenName = 'YourScreenName'; // Set the desired screen name
      analytics().setCurrentScreen(screenName, screenName);
      return () => {};
    }, [])
  );

  // Your component logic goes here

  return (
    // Your component UI
  );
};

export default YourScreenComponent;

In this example, you can use the useEffect hook, ensure you’ve imported the necessary modules (analytics from @react-native-firebase/analytics). Adjust the screen name and integrate the code into the components where you want to track screen changes.

2) Setting User Properties

Setting user properties in Firebase Analytics helps you collect additional information about your users, allowing for more targeted analysis. User properties can be used to segment and analyze your audience based on various attributes.

Assuming you’ve integrated Firebase into your React Native app, you can set user properties using the following code:

import analytics from '@react-native-firebase/analytics';

// Set user properties
analytics().setUserProperties({
  favorite_genre: 'Action',
  subscription_type: 'Premium',
  // Add more user properties as needed
});

In this example, two user properties are set: favorite_genre and subscription_type. You can customize these properties based on the information you want to track about your users. User properties can be strings, numbers, or booleans.

It’s important to note that user properties are persistent and associated with a user’s device until they are explicitly cleared or changed. Make sure to set user properties appropriately in relevant parts of your app, such as during user authentication or when user preferences are updated.

For instance, you might set user properties when a user logs in:

import analytics from '@react-native-firebase/analytics';

// Assume user preferences are available after login
const userPreferences = {
  favorite_genre: 'Drama',
  subscription_type: 'Free',
};

// Set user properties after login
analytics().setUserProperties(userPreferences);

By incorporating user properties into your analytics setup, you’ll gain deeper insights into user behavior and be able to tailor your analysis to specific user segments within your React Native app.

3) Setting User Properties

Logging events in Firebase Analytics allows you to track user interactions, behaviors, and other important occurrences within your React Native app. Here’s how you can log an event using Firebase Analytics:

Assuming you have Firebase integrated into your React Native app, use the following code to log an event:

import analytics from '@react-native-firebase/analytics';

// Log a custom event
analytics().logEvent('custom_event_name', {
  // Additional event parameters (optional)
  parameter_name: 'parameter_value',
  // Add more parameters as needed
});

In this example, replace 'custom_event_name' with the name of the event you want to log in. You can also include additional parameters specific to the event. Event parameters can be strings, numbers, or booleans.

For instance, if you want to log an event when a user makes a purchase:

import analytics from '@react-native-firebase/analytics';

// Log a purchase event with additional parameters
analytics().logEvent('purchase', {
  item_id: 'ABC123',
  item_name: 'Product XYZ',
  quantity: 2,
  price: 209.99,
  currency: 'INR',
  // Add more parameters as needed
});

Make sure to choose meaningful event names and include relevant parameters to capture essential details. The logged events will be available in your Firebase Analytics dashboard, enabling you to analyze user interactions and make data-driven decisions.

Logging events at key points in your app allows you to measure user engagement, understand feature usage, and track conversion events, contributing to a comprehensive understanding of your app’s performance.

Logging a simple event named “buttonPressed” using Firebase Analytics in a React Native app.

import analytics from '@react-native-firebase/analytics';

// Log the "buttonPressed" event
analytics().logEvent('buttonPressed');

// Log the "buttonPressed" event with additional parameters
analytics().logEvent('buttonPressed', {
  button_type: 'primary',
  screen_name: 'HomeScreen',
  user_id: '123456',
  // Add more parameters as needed
});

In this modified example, you include additional parameters like “button_type,” “screen_name,” and “user_id” to provide more context to the event. These details can be valuable for later analysis in the Firebase Analytics dashboard.

Debugging Firebase Analytics

The events recorded are not automatically sent to Firebase. Instead, they are cached and periodically sent to the servers. You can however enable debug mode in Firebase for both Android and iOS.

For Android devices, you have to run the following command:

adb shell setprop debug.firebase.analytics.app <package_name>

For iOS you have to pass the following argument in Xcode:

• FIRDebugEnabled

Enable Debug Mode:

• Open your React Native app’s code.
• In your entry file or where Firebase is initialized, set the analytics debug mode to true:

import analytics from '@react-native-firebase/analytics';

// Enable debug mode
analytics().setAnalyticsCollectionEnabled(true);

1. View Debug Information:

Run your React Native app on an emulator or physical device.

• Open the app and perform actions that trigger Firebase Analytics events, such as logging events or setting user properties

2. Access Debug View in Firebase Console:

• Go to the Firebase Console.
• Select your project.
• Navigate to “Analytics” in the left-hand menu.
• Click on the “DebugView” tab.

3. Analyze Debug Information:

• In the DebugView, you should see real-time events logged from your app.
• Inspect each event to ensure that the events and parameters are being sent correctly.

4. Check Console Logs:

• While running your React Native app, check the console logs for any potential error messages related to Firebase Analytics.
• Debugging information may be logged to the console, providing insights into potential issues.

5. Verify Initialization:

• Ensure that Firebase Analytics is correctly initialized in your app. Check the initialization code and confirm that it runs without errors.

import analytics from '@react-native-firebase/analytics';

// Initialize Firebase Analytics
analytics();

1. Verify Internet Connection:

• Ensure that your device or emulator has a stable internet connection. Firebase Analytics relies on internet connectivity to send events to the Firebase servers.

2. Check for Code Errors:

• Review the code where you log events or set user properties. Ensure that there are no syntax errors or logical issues.

By following these steps, you can effectively debug Firebase Analytics in your React Native app. The real-time DebugView in the Firebase Console and console logs in your development environment should provide valuable information to identify and resolve any issues.