对比React Native分析工具

分析在改善用户体验方面起着重要作用，它尝试了解用户行为和应用程序中的互动。React Native与三个主要的分析工具兼容，有助于改善React Native应用的体验，分别是微软的App Center Analytics，谷歌的Firebase Analytics，以及Segment。

在这篇文章中，我们将探讨每个工具的优势，以及它们如何帮助开发者在React Native中导航和利用分析。

微软的App Center Analytics

由微软创建的App Center Analytics是App Center SDK的一部分，它可以捕获用户会话并跟踪与应用程序的所有互动，同时收集设备和操作系统信息。

App Center Analytics的使用

要使用App Center Analytics，我们必须安装App Center React Native SDK。

必须在appcenter.ms上创建一个账户和一个新的应用程序。React Native文档显示了如何安装包和集成iOS和Android的SDK。本文将介绍一个高层次的安装概述。

应用中心分析的安装

首先，使用Yarn安装SDK。

yarn add appcenter appcenter-analytics appcenter-crashes --exact

在app 目录内，运行cd ios && pod install --repo-update 来安装iOS的依赖性。

接下来，使用Xcode创建一个新的文件，并将其命名为AppCenter-Config.plist 。右键单击根文件夹；选择添加新文件和Property List file 。

Create New File In Xcode

打开该文件，复制并粘贴下面的代码到我们刚刚创建的文件中。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    <key>AppSecret</key>
    <string>{APP_SECRET_VALUE}</string>
    </dict>
</plist>

用我们在appcenter.ms中创建的应用程序中的APP_SECRET 键来改变{APP_SECRET_VALUE} 。

AppCenter-Config.plist 里面的内容应该如下图所示。

AppCenter-Config.plist Content

为了初始化SDK，在AppDelegate.m 文件的顶部添加这几行代码。

#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>

在didFinishLaunchingWithOptions ，添加这些行。

[AppCenterReactNative register];
  [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
  [AppCenterReactNativeCrashes registerWithAutomaticProcessing];

现在，点击Build图标或输入Command + B来构建应用程序。

安卓系统的安装差异

对于Android应用程序，在android/app/src/main/assets 内添加appcenter-config.json 文件。

该文件内的内容应该像下面的代码一样；我们还必须用有效的应用秘密替换{APP_SECRET_VALUE} 。

{
    "app_secret": "{APP_SECRET_VALUE}"
}

安卓应用程序的最后一步是将这些行添加到res/values/strings.xml 。

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

为了使SDK正常工作，除了AppCenter SDK，避免使用任何其他服务。

使用App Center Analytics的方法来收集数据

安装完成后，在React Native代码中使用AppCenter Analytics方法来收集用户数据。

在这个例子中，我们将报告销售额，并跟踪用户如何使用trackEvent() 方法浏览在线商店应用程序。

这个方法会在用户采取某种行动时触发，比如点击购买按钮。然后，它报告并跟踪该事件，收集有关用户购买的数据，如购买产品的类型、价格和数量。

在代码中，trackEvent() ，就像下面这样使用。

import {View,Text, TouchableOpacity, TouchableHighlight} from 'react-native';
import Analytics from 'appcenter-analytics';

export default App(){
const __OnBuyButtonPressed=()=>{

  Analytics.trackEvent('Purchase', { price: '9.99', type: 'cloth' });
}
return(
  <View>
        <TouchableHighlight  onPress={__OnBuyButtonPressed}>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-around"
            }}
          >
            <Text style={styles.signInButtonTextStyle}>Continue</Text>
          </View>
        </TouchableHighlight>
      </View>
)}

自定义事件也可以收集独特的数据。例如，我们可以为导航动作创建一个自定义事件，以查看用户如何在应用程序中导航。

通过收集到的事件数据并发送至App Center仪表盘，我们可以看到所有的日志、事件、操作系统数据、设备信息等，这些数据可以帮助我们确定如何最好地服务于用户的体验。

使用AppCenter Analytics的另一个好处是，数据可以被链接并导出到Azure，这使用户可以使用Azure Application Insights等功能来帮助分析数据。

用于Firebase的谷歌分析

以前被称为简单的Firebase分析，Google Analytics for Firebase也支持React Native。它使用自定义和预定义事件跟踪用户行为，并可以与Firebase SDK集成。

作为移动开发中最受欢迎的云服务之一，Firebase支持大多数平台，可以在任何地方使用。它很容易与React Native集成，其简单的功能使它在开发者社区中很受欢迎。

Firebase的使用

为了在React Native中使用Firebase SDK的功能，我们将安装 [react-native-firebase](https://rnfirebase.io/analytics/usage)，这是一个开源项目，将Firebase SDK集成到React Native中。

Firebase的设置

首先，我们必须在Firebase控制台创建一个新的应用程序并生成证书。在控制台中，选择创建一个项目来创建一个新的应用，并按照提示操作。

一旦项目创建完毕，点击iOS按钮。

Set Up Firebase iOS

一个新的窗口出现，提示我们输入iOS捆绑标识符的信息，以注册我们的应用程序。

为了获得捆绑标识符，在Xcode中打开项目，打开General标签，并复制Bundle Identifier字段中的文本。

Get The Bundle Identifier

点击注册应用程序后，包含Firebase凭证的GoogleService-Info.plist 文件会自动生成；我们现在可以下载该文件。

Download File

然后，在Xcode的project 目录中复制并粘贴该文件。

Save The File Project In The Directory

在Firebase中安装React Native依赖项

在Firebase控制台创建了新的应用程序后，我们准备安装React Native的依赖项。

使用Yarn或npm添加软件包，如下所示。

yarn add @react-native-firebase/app
// with npm
npm install @react-native-firebase/app

接下来，添加分析模块。

yarn add @react-native-firebase/analytics

如果使用比0.60更早的React Native版本，请运行react-native link 来链接这些包。否则，使用较新的版本会自动链接这些包。

在链接软件包后，通过运行下面的命令在project 目录中安装iOS pods。

cd iOS && pod install

这就安装了iOS所需的依赖项。

为了初始化Firebase应用，在AppDelegate.m 中添加以下几行代码。

@import UIKit;
@import Firebase;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [FIRApp configure];
  return YES;
}

现在，点击Build图标或在Xcode中输入Command + B。如果没有问题，我们可以在Firebase控制台的仪表板上看到日志和见解。然而，可能需要一些时间来填充数据。

Logs And Insights Dashboard

运行Google Analytics for Firebase

Google Analytics for Firebase与React Native代码的基本用法与我们在这篇文章中谈到的其他分析工具类似。然而，区别在于方法的名称。

因为Firebase有许多内置的方法，并为事件起了有意义的名字，所以开发者在使用这些方法时有更容易、更有效的体验。

下面展示的是React Native代码里面的基本用法。通过模拟用户点击购买按钮时的Purchase 事件，Analytics().logEvent() 方法记录了购买细节。

import Analytics from '@react-native-firebase/analytics';
import {View,Text, TouchableOpacity, TouchableHighlight} from 'react-native';
import Analytics from 'appcenter-analytics';

export default App(){
const __OnBuyButtonPressed= async()=>{
   await Analytics().logEvent('Purchase', { price: '9.99', type: 'cloth' });
}
return(
  <View>
        <TouchableHighlight  onPress={__OnBuyButtonPressed}>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-around"
            }}
          >
            <Text style={styles.signInButtonTextStyle}>Continue</Text>
          </View>
        </TouchableHighlight>
      </View>
)}

举个例子，如果我们的应用提供了电子商务服务或在线商店，Firebase提供了特定的方法来跟踪在线商店事件，比如添加到购物车事件，它使用了logAddToCart() 方法。

其他的方法包括。

logLogin() 追踪登录事件
logAppOpen() 在应用程序打开时被调用
logShare() 追踪应用内的分享活动

你可以在这里找到所有其他预定义的Firebase方法。

因为Firebase支持许多跨平台的应用程序，所以即使从一种编程语言切换到另一种，Firebase的方法也很容易使用。例如，在Swift中使用Firebase的代码和方法与在JavaScript中是一样的，这使得过渡更容易。

为了找到我们将使用的方法，请看下图所示的事件标签中的事件日志。

The Events Tab

我们也可以通过谷歌分析本身看一下洞察力。然而，我们必须为Firebase设置与Google Analytics账户相同的账户。

Google Analytics Dashboard

Segment分析

Segment是一个数据收集器和分析平台，其API支持跨平台和流行技术，如iOS、Android、.NET和Python。通过我们选择的主机在任何地方托管数据，Segment可以将收集的数据发送到其服务器或任何其他支持的Segment服务，如Google Analytics。

通过Segment，我们可以使用下面这样的SQL查询来获取数据。

/*
@copyright https://github.com/segmentio/analytics-react-native
*/
select * from app.order_completed
order by price desc

使用Segment的其他好处之一是能够控制数据。例如，如果我们想关注用户隐私，Segment允许我们控制和设置哪些数据应该被收集的规则，并对特定类型的数据进行分类和限制访问。

Segment的设置和使用

要安装Segment的analytics-react-native包，我们可以使用Yarn或npm。

在这个例子中，我们将使用Yarn，将下面的代码安装到我们的终端。

yarn add @segment/analytics-react-native-firebase
// install pods
 cd ios && pod install

为了启动和连接Segment的API，在app.js 或其他任何使用Segment分析模块的文件中添加以下代码。

await analytics.setup('YOUR_WRITE_KEY', {
  // Record screen views automatically!
  recordScreenViews: true,
  // Record certain application events automatically!
  trackAppLifecycleEvents: true
})

查看Segment的文档以生成写入密钥。

然后，我们可以自定义设置，定义如何收集数据，并启用一些基于平台的功能，如下面的代码所示。

// @ https://github.com/segmentio/analytics-react-native#cloud-based-connection-modes

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

analytics
    .setup('writeKey', {
        using: [mixpanel, firebase],
        recordScreenViews: true,
        trackAppLifecycleEvents: true,

        android: {
            flushInterval: 60000, // 60 seconds
            collectDeviceId: true
        },
        ios: {
            trackAdvertising: true,
            trackDeepLinks: true
        }
    })
    .then(() =>
        console.log('Analytics is ready')
    )
    .catch(err =>
        console.error('Something went wrong', err)
    )

analytics.track('Pizza Eaten')
analytics.screen('Home')

让我们来分解一些属性和它们的作用。

Using 是一个与Segment一起使用的外部分析工具阵列，它可以将数据发送到第三方分析服务，如Google Analytics
recordScreenViews 追踪用户查看屏幕的次数
trackAppLifecycleEvents 追踪应用的生命周期事件，如应用何时被安装，或应用是在后台还是在前台。

在自定义设置后，我们可以开始使用Analytics.track() 方法来调度事件。

analytics.track('Purchase',null,context:{price:"9.99",productType:"auto"})
analytics.screen('Product')

Segment提供了许多其他的跟踪方法，如analytics.identify() ，它将一个事件附加到一个特定的用户身上，在跟踪独特的用户时可以起到帮助作用。

# /*https://segment.com/docs/connections/sources/catalog/libraries/mobile/react-native/#tracking-methods */
analytics.identify("userId", {
  email: "jsmith@example.com"
  name: "John Smith"
})

奖励工具 Facebook Analytics

由于它在React Native中的早期直接支持，Facebook Analytics成为最受欢迎的React Native分析工具之一。不幸的是，用于React Native的Facebook SDK现在已被废弃，并将在2021年6月30日不再支持。然而，仍然有一个社区分叉，你可以用它作为替代：react-native-dbsdk-next。

总结

对于这些流行的React Native分析工具，每一个都有好处，但选择使用哪种工具取决于项目的类型和项目的需求。Segment是控制数据和隐私的最佳工具，而Google Analytics for Firebase在React Native中有更好的支持，App Center Analytics可以访问Azure的功能。通过这些分析工具，它们不同的功能使React Native中的应用分析更容易、更有效。

原文链接：blog.logrocket.com/comparing-r…