FirebaseAnalytics

This is the only Firebase Analytics package for React Native that has universal platform support (iOS, Android, Web, and Electron).

Installation

Configuration

Expo client: Limitations & configuration

{
  "expo": {
    "web": {
      "config": {
        "firebase": {
          "apiKey": "AIzaXXXXXXXX-xxxxxxxxxxxxxxxxxxx",
          ...
          "measurementId": "G-XXXXXXXXX"
        }
      }
    }
  }
}

This limitation only applies to the Expo client in the App/Play store, standalone builds, custom clients & bare apps support the full native Firebase Analytics experience.

Optional: Enable AdSupport in Bare Workflow

• In your Xcode project, select your project's target
• Select the General tab for your target
• Expand the Linked Frameworks and Libraries section
• Click + to add a framework
• Select AdSupport.framework

API

import * as Analytics from 'expo-firebase-analytics';

Methods

logEvent

logEvent(name: string, properties?: { [key: string]: any }): Promise<void>

• ad_activeview
• ad_click
• ad_exposure
• ad_impression
• ad_query
• adunit_exposure
• app_clear_data
• app_remove
• app_update
• error
• first_open
• in_app_purchase
• notification_dismiss
• notification_foreground
• notification_open
• notification_receive
• os_update
• screen_view
• session_start
• user_engagement

Parameters

Example

await Analytics.logEvent('ButtonTapped', {
  name: 'settings',
  screen: 'profile',
  purpose: 'Opens the internal settings',
});

setAnalyticsCollectionEnabled

setAnalyticsCollectionEnabled(isEnabled: boolean): Promise<void>

Parameters

Example

await Analytics.setAnalyticsCollectionEnabled(false);

setCurrentScreen

setCurrentScreen(screenName: string, screenClassOverride?: string): Promise<void>

Parameters

Example

await Analytics.setCurrentScreen('GiveGithubStarsScreen');

setSessionTimeoutDuration

setSessionTimeoutDuration(milliseconds: number): Promise<void>

Parameters

Example

// 15 mins
await Analytics.setSessionTimeoutDuration(900000);

setUserId

setUserId(userId: string | null): Promise<void>

Parameters

Example

await Analytics.setUserId('my_user_uid');

setUserProperty

setUserProperty(name: string, value: string | null): Promise<void>

• first_open_time
• last_deep_link_referrer
• user_id

Parameters

Example

await Analytics.setUserProperty('favorite_batmobile', '1989 Burton-mobile');

resetAnalyticsData

resetAnalyticsData(): Promise<void>

Example

await Analytics.resetAnalyticsData();

setUserProperties

setUserProperties(properties: { [key: string]: string }): Promise<void>

Parameters

Example

await Analytics.setUserProperties({
  loves_expo: 'a lot',
});

setUnavailabilityLogging

setUnavailabilityLogging(isEnabled: boolean): void

Parameters

Example

// Disable the warning & log messages on the Expo client
Analytics.setUnavailabilityLogging(false);

setDebugModeEnabled

setDebugModeEnabled(isEnabled: boolean): Promise<void>

Examples

How do people use my app?

/*
 * Say we are in a tinder clone, and a user presses the card to view more
 * information on a user. We should track this event so we can see if people
 * are even using it.
 *
 * If lots of users are opening the card then swiping through photos, just
 * to dismiss again, then we should consider making it possible to look
 * through photos without having to enter the profile.
 */
onPressProfileButton = uid => {
  Analytics.logEvent('ExpandProfile', {
    /*
     * We want to know if the user came from from the swipe card as
     * opposed to from chat or a deep link.
     */
    sender: 'card',
    /*
     * This may be too specific and not very useful, but maybe down the line * we could investigate why a certain user is more popular than others.
     */
    user: uid,
    /*
     * We can use this information later to compare against other events.
     */
    screen: 'profile',
    purpose: 'Viewing more info on a user',
  });
};

React Navigation

import React from 'react';
// Import Navigation
import { createBottomTabNavigator } from 'react-navigation';
// Import Firebase
import * as Analytics from 'expo-firebase-analytics';
// Import some screens
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
// Create a generic Navigator
const AppNavigator = createBottomTabNavigator({
  // The name `Profile` or `Home` are what will appear in Firebase Analytics.
  Profile: ProfileScreen,
  Home: HomeScreen,
});
// Get the current screen from the navigation state
function getActiveRouteName(navigationState) {
  if (!navigationState) return null;
  const route = navigationState.routes[navigationState.index];
  // Parse the nested navigators
  if (route.routes) return getActiveRouteName(route);
  return route.routeName;
}

export default () => (
  <AppNavigator
    onNavigationStateChange={(prevState, currentState) => {
      const currentScreen = getActiveRouteName(currentState);
      const prevScreen = getActiveRouteName(prevState);
      if (prevScreen !== currentScreen) {
        // Update Firebase with the name of your screen
        Analytics.setCurrentScreen(currentScreen);
      }
    }}
  />
);