本文主要介绍如何实现 React Native 的全埋点,主要是控件点击 $AppClick 事件。该内容,会默认你有一定的 React Native 开发经验,(若没有,也可参与文末赠书)。
■ 作者 ■
王灼洲 合肥研发中心负责人
《Android 全埋点解决方案》和《iOS 全埋点解决方案》一书作者,有 10+ 年 Android & iOS 相关开发经验,是国内第一批从事 Android 研发工作,开发和维护国内第一个商用的开源 Android & iOS 数据埋点 SDK。
温馨提示:文末附赠书。
一、React Native 简介
React Native 是由 Facebook 推出的移动应用开发框架,可以用来开发 iOS、Android、Web 等跨平台应用程序,官网为:
https://facebook.github.io/react-native/。
React Native 和传统的 Hybrid 应用最大的区别就是它抛开了 WebView 控件。React Native 产出的并不是“网页应用”、“HTML5 应用”或者“混合应用”,而是一个真正的移动应用,从使用感受上和用 Objective-C 或 Java 编写的应用相比几乎是没有区分的。React Native 所使用的基础 UI 组件和原生应用完全一致。我们要做的就是把这些基础组件使用 JavaScript 和 React 的方式组合起来。React Native 是一个非常优秀的跨平台框架。
下面我们先用 React Native 创建一个简单的 Demo。
1.1
创建项目
使用 React Native 开发移动应用, 首先需要安装 React Native 相关的组件。具体的安装方法,可以参照 React Native 官方介绍。
React Native 安装完成之后,就可以使用命令行工具创建新项目了。
react-native init AwesomeProject
上面的命令创建了一个名为 AwesomeProject 的项目,然后就可以通过下面的命令进入 AwesomeProject 文件夹并运行 iOS 程序。
cd AwesomeProjectreact-native run-ios
然后等待一会,iOS 模拟器将会启动,就可以看到如下图 1-1 所示的运行结果。
图 1-1 模拟器
在命令行输入下面的命令,Xcode 将会打开上面创建的 AwesomeProject 项目。
open ./ios/AwesomeProject.xcworkspace
Xcode 中,就可以看到 AwesomeProject 项目相关的代码。首先,需要把 SensorsSDK 项目添加进来。Xcode 中,点击 File → Add Files to "AwesomeProject" ...,会弹出如下图 1-2 所示的对话框,选择 SensorsSDK.xcodeproj 文件,并勾选相应的 Target,最后点击 Add 按钮。
图 1-2 添加项目
然后,还需要添加相应的依赖关系。选中 AwesomeProject 项目,在 General 标签的 Frameworks 栏中点击加号(+)按钮,添加 SensorsSDK.framework。
最后, AppDelegate.m 中引入 SensorsSDK,并在 - application:didFinishLaunchingWithOptions: 方法中调用 SensorsAnalyticsSDK 的 - startWithServerURL: 初始化方法初始化 SDK。
#import <SensorsSDK/SensorsSDK.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[SensorsAnalyticsSDK startWithServerURL:@"xxxxx"];
......
return YES;
}
@end
运行 AwesomeProject 项目,我们就可以在 Xcode 控制台中看到 $AppStart 事件信息。
{
"properties": {
"$model": "x86_64",
"$manufacturer": "Apple",
"$lib_version": "1.0.0",
"$os": "iOS",
"$app_version": "1.0",
"$os_version": "12.3",
"$lib": "iOS"
},
"event": "$AppStart",
"time": 1576141146301,
"distinct_id": "D13CE550-1EE4-45B4-AB83-CDF7601C9C77"
}
按 Home 键或上滑 HomeBar 让应用程序进入后台,将会在 Xcode 控制台中看到 $AppEnd 事件。
{
"properties": {
"$model": "x86_64",
"$manufacturer": "Apple",
"$lib_version": "1.0.0",
"$os": "iOS",
"$event_duration": 434917.40625,
"$app_version": "1.0",
"$os_version": "12.3",
"$lib": "iOS"
},
"event": "$AppEnd",
"time": 1576141581203,
"distinct_id": "D13CE550-1EE4-45B4-AB83-CDF7601C9C77"
}
从而也可以说明,对于 React Native 项目的 $AppStart 和 $AppEnd 事件,我们无需做任何特殊处理,即可直接支持。
其实在控制台中也会打印页面浏览($AppViewScreen)事件,但是这个事件在严格意义上来说不应该属于 ReactNative 应用程序的页面浏览事件,这个只是应用程序中的 UIWindow 控件的根视图控制器的页面浏览事件。而实际上在 React Native 中,是使用 react-navigation 进行页面间的跳转。对于 iOS 来说,跳转的新页面并不是一个视图控制器,而是弹出一个视图,因此并不能采集到正确的页面浏览事件。
1.2
基础控件
React Native 支持的控件有很多,详细可以参照 React Native 官网的相关介绍和说明:
https://facebook.github.io/react-native/docs/activityindicator。
下面我们以 React Native 的 Switch 控件为例来做介绍。
可以通过修改 AwesomeProject 项目中的 App.js 文件,在页面中添加一个 Switch 组件。
import React, { Component } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Switch,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
export default class App extends Component {
state = {
value: false,
}
render() {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
c