对比React Native分析工具

1146

分析在改善用户体验方面起着重要作用,它尝试了解用户行为和应用程序中的互动。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捆绑标识符的信息,以注册我们的应用程序。

Register The App Page

为了获得捆绑标识符,在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…