React Native应用程序中添加Firebase Analytics

大家好，我们终于推出了一个完整的系列，用于将 Firebase 特性/功能集成到适用于 Android 和 iOS 的 React Native 应用程序中。我相信你们都听说过火力基地，如果没有那么您应该了解它，因为它是创建成功应用程序的完整套件。它可以帮助您加速和扩展应用程序开发，而无需管理基础设施，因此使用 Firebase，您可以专注于应用程序开发而不是管理基础设施。在本系列中，我们将探讨 Firebase Analytics、数据库、身份验证、应用内消息传递、推送通知、AdMob 等。因此，让我们开始第一个示例，在 React Native 应用程序中添加 Firebase 分析。

在这个完整的系列中，我们将使用反应原生 Firebase 这是一个非常简单的集成库并提供了很多功能。 反应原生 Firebase 是官方推荐的软件包集合，为 Android 和 iOS 应用程序上的所有 Firebase 服务带来 React Native 支持。

Firebase 分析

Google Analytics for Firebase 收集您的应用的使用情况和行为数据。 Firebase Analytics 提供最多 500 个不同事件的免费、无限制报告。它的两个主要问题是：

活动：您的应用中发生了什么，例如用户操作、系统事件或错误
用户属性：您定义的用于描述用户群细分的属性，例如语言偏好或地理位置

SDK 自动捕获某些关键事件和用户属性。将 Firebase 分析与您的应用集成后，它就会开始记录一些事件（ad_click、app_clear_data、app_remove、app_update 等）和用户属性（年龄、应用程序版本、国家/地区、设备详细信息等），无需编写任何代码。您还可以定义自己的自定义事件来衡量对您的业务特别重要的事情。 Analytics 提供了许多不同的预定义事件来跟踪用户行为。

自定义、预定义和保留事件

市场上有很多工具可以为您的应用程序提供分析，但 Google Analytics 的优点在于其智能事件捕获功能。有这么多预约活动分析会自动捕获，并为您提供捕获任何您想要的自定义事件的工具。

您可以捕捉任何 自定义事件 非常容易使用 日志事件 您只需在其中传递事件名称和要在该事件上捕获的有效负载即可。请尽量避免使用预留活动，如果您使用任何类似于保留事件名称的事件名称，它将引发错误。

analytics().logEvent('my_custom_event', {
  id: 101,
  item: 'My Product Name',
  description: ('My Product Desc 1', 'My Product Desc 2'),
});

如果我们谈论 预定义事件 那么Firebase提供了很多预定义事件方法这将帮助您从不同类型的应用程序（例如电子商务、旅行和游戏应用程序）捕获事件。您可以轻松使用任何预定义事件，例如

analytics().logAddPaymentInfo({
  coupon: 'OfferZero',
  currency: 'INR',
  items: ('T-Shirt'),
  payment_type: 'Credit Card',
  value: 1000,
});

屏幕追踪

在分析领域，屏幕跟踪发挥着重要作用，因为它显示了应用程序用户对不同功能的兴趣。例如，如果您的应用程序中有 10 个不同的功能，并且每个功能都在不同的屏幕上提供，那么根据屏幕跟踪，您可以轻松找到哪个功能最受欢迎以及哪个功能需要更新。

我们都知道 React Native 应用程序在单个 活动/视图控制器，这意味着本机 Firebase SDK 不会跟踪任何屏幕更改。在 React Native 应用程序中实现导航的方法有很多种，因此没有“万能”的屏幕跟踪解决方案。但是我们有一些预定义的事件可以帮助我们做到这一点，例如 日志屏幕视图。

借助 logScreenView 事件，您可以轻松捕获屏幕的移动

await analytics().logScreenView({
  screen_name: currentRouteName,
  screen_class: currentRouteName,
});

您可以在使用时看到相同的用法反应导航和反应本机导航。

我认为这就足够了，现在我们可以转向代码并了解如何在 React Native 应用程序中集成 Firebase/Google 分析。

制作 React Native 应用程序

React Native 入门将帮助您更多地了解如何制作 React Native 项目。我们将使用 React Native 命令行界面来制作我们的 React Native 应用程序。

如果您之前安装了全局的react-native-cli软件包，请将其删除，因为它可能会导致意外问题：

npm uninstall -g react-native-cli @react-native-community/cli

运行以下命令创建一个新的 React Native 项目

npx react-native init ProjectName

如果你想使用特定的 React Native 版本启动一个新项目，你可以使用 –version 参数：

npx react-native init ProjectName --version X.XX.X

注意如果上述命令失败，您可能使用的是旧版本 react-native 或者 react-native-cli 在您的电脑上全局安装。尝试卸载 cli 并使用 npx 运行 cli。

这将在项目目录中创建一个带有名为 App.js 的索引文件的项目结构。

Firebase SDK 集成

要从任何 React Native Firebase 示例开始，您需要将 Firebase 集成到您的应用程序中，我专门为此详细制作了一篇单独的文章，您将在其中看到在 Android 版 React Native 应用程序中添加 Firebase 的点对点过程，以及iOS 两者都有。

请访问如何在 Android 和 iOS 应用程序中集成 Firebase，然后返回执行下一步。

完成 Firebase 集成后，您可以安装更多依赖项。

安装依赖项

要安装依赖项，请打开终端并使用以下命令跳转到您的项目

cd ProjectName

对于 React Native Firebase，我们需要安装和设置应用程序模块

npm install @react-native-firebase/app --save

现在安装分析模块

npm install @react-native-firebase/analytics --save

此命令会将所有依赖项复制到您的 node_module 目录中。 –save 是可选的，它只是更新 package.json 文件中的依赖项。

CocoaPods 安装

React Native 0.60 更新后，他们引入了自动链接，因此我们不需要链接库，但对于 iOS，我们需要安装 pod。因此要安装 pod，请使用

cd ios/ && pod install --repo-update && cd ..

集成 Firebase Analytics 的代码

请在任何代码编辑器中打开 App.js 并将代码替换为以下代码

应用程序.js

// React Native Firebase
// #1 Add Firebase Analytics in React Native App
//https://aboutreact.com/react-native-firebase-analytics

// Import React in our code
import React from 'react';

// Import all the components we are going to use
import {
  SafeAreaView,
  TouchableOpacity,
  StyleSheet,
  View,
  Text,
} from 'react-native';

// Import Firebase Analytics
import analytics from '@react-native-firebase/analytics';

const App = () => {
  const realtimeLogContent = () => {
    analytics().logSelectContent({
      content_type: 'Button Clicked',
      item_id: 'button1',
    });
  };

  const logCustomeEvent = () => {
    analytics().logEvent('my_custom_event', {
      id: 101,
      item: 'My Product Name',
      description: ('My Product Desc 1', 'My Product Desc 2'),
    });
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <Text style={styles.heading}>
          React Native Firebase
        </Text>
        <Text style={styles.normalTextStyle}>
          #1 Firebase Analytics
        </Text>
        <View style={styles.innerContainer}>
          <Text style={styles.normalTextStyle}>
            Log React Time Content
          </Text>
          <TouchableOpacity
            activeOpacity={0.7}
            style={styles.buttonStyle}
            onPress={realtimeLogContent}>
            <Text style={styles.buttonTextStyle}>
              Click Button
            </Text>
          </TouchableOpacity>
          <Text style={styles.normalTextStyle}>
            Trigger My Custom Event
          </Text>
          <TouchableOpacity
            activeOpacity={0.7}
            style={styles.buttonStyle}
            onPress={logCustomeEvent}>
            <Text style={styles.buttonTextStyle}>
              Create Custom Event
            </Text>
          </TouchableOpacity>
        </View>
      </View>
      <Text
        style={{
          fontSize: 16,
          textAlign: 'center',
          color: 'grey',
        }}>
        www.aboutreact.com
      </Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    padding: 10,
    alignItems: 'center',
  },
  innerContainer: {
    flex: 1,
    alignItems: 'center',
  },
  heading: {
    fontSize: 30,
  },
  buttonStyle: {
    minWidth: 300,
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#8ad24e',
  },
  buttonTextStyle: {
    color: 'white',
    textAlign: 'center',
  },
  normalTextStyle: {
    color: 'black',
    textAlign: 'center',
    marginVertical: 20,
    fontSize: 18,
  },
});

export default App;

运行 React Native 应用程序

再次打开终端并使用跳转到您的项目。

cd ProjectName

1. 启动 Metro Bundler

首先，您需要启动 Metro，React Native 附带的 JavaScript 捆绑器。要启动 Metro 捆绑程序，请运行以下命令

npx react-native start

一旦您启动 Metro Bundler，它将永远在您的终端上运行，直到您将其关闭。让 Metro Bundler 在自己的终端中运行。打开一个新终端并运行该应用程序。

2.启动React Native应用程序

在 Android 虚拟设备或真实调试设备上运行项目

npx react-native run-android

或在 iOS 模拟器上运行（仅限 macOS）

npx react-native run-ios

输出截图

这就是您如何将 Firebase Analytics 集成到适用于 Android 和 iOS 的 React Native 应用程序中。如果你想禁用Firebase的自动初始化，你可以看到。如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们。

React Native应用程序中添加Firebase Analytics