分析在改善用户体验方面起着重要作用,它尝试了解用户行为和应用程序中的互动。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
。
打开该文件,复制并粘贴下面的代码到我们刚刚创建的文件中。
<?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
里面的内容应该如下图所示。
为了初始化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按钮。
一个新的窗口出现,提示我们输入iOS捆绑标识符的信息,以注册我们的应用程序。
为了获得捆绑标识符,在Xcode中打开项目,打开General标签,并复制Bundle Identifier字段中的文本。
点击注册应用程序后,包含Firebase凭证的GoogleService-Info.plist
文件会自动生成;我们现在可以下载该文件。
然后,在Xcode的project
目录中复制并粘贴该文件。
在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控制台的仪表板上看到日志和见解。然而,可能需要一些时间来填充数据。
运行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中是一样的,这使得过渡更容易。
为了找到我们将使用的方法,请看下图所示的事件标签中的事件日志。
我们也可以通过谷歌分析本身看一下洞察力。然而,我们必须为Firebase设置与Google Analytics账户相同的账户。
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 AnalyticsrecordScreenViews
追踪用户查看屏幕的次数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中的应用分析更容易、更有效。