Flutter追踪分析插件tracker_flutter的使用
Flutter追踪分析插件tracker_flutter的使用
安装
添加依赖到你的pubspec.yaml
文件
在你的pubspec.yaml
文件中添加tracker_flutter
作为依赖。
dependencies:
tracker_flutter: ^版本号
Android
打开项目中的android
文件夹内的Android Studio
项目。
1. 添加token以获取Terra库
在local.properties
文件中添加TekoGoogleRegistryToken
(联系trung.cs@teko.vn
获取token)。
TekoGoogleRegistry.password=你的token
在项目的build.gradle
文件中添加以下代码:
allprojects {
repositories {
...
Properties properties = new Properties()
properties.load(project.rootProject.file('local.properties').newDataInputStream())
maven {
setUrl("https://asia-southeast1-maven.pkg.dev/teko-development/teko-mobile-sdks")
authentication {
basic(BasicAuthentication)
}
credentials {
username = "_json_key_base64"
password = properties.getProperty('TekoGoogleRegistry.password')
}
}
}
}
iOS
打开项目中的ios
文件夹内的Xcode
项目。
1. 设置GitHub访问令牌以访问Terra iOS框架
请与Terra团队联系以获取令牌。在你的计算机上添加一个环境变量,键为GITHUB_USER_TOKEN
。
2. 配置Podfile
在Podfile的开头定义源:
source 'https://github.com/teko-vn/Specs-ios.git'
// 在CI环境中
source 'https://' + ENV['GITHUB_USER_TOKEN'] + '@github.com/teko-vn/Specs-ios.git'
配置目标框架:
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
# 设置有效架构
config.build_settings['VALID_ARCHS'] = 'arm64 armv7 armv7s x86_64'
# Xcode12需要排除模拟器架构中的arm64
config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
config.build_settings["BUILD_LIBRARY_FOR_DISTRIBUTION"] = "YES"
end
end
end
正常情况下,Podfile中的代码如下:
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
end
end
更新现有代码:
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
# 新代码
target.build_configurations.each do |config|
# 设置有效架构
config.build_settings['VALID_ARCHS'] = 'arm64 armv7 armv7s x86_64'
# Xcode12需要排除模拟器架构中的arm64
config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
config.build_settings["BUILD_LIBRARY_FOR_DISTRIBUTION"] = "YES"
end
# 结束新代码
end
end
注意:请勿将<your_token_secret>
提交到GitHub,否则它会被撤销
库的使用
初始化/获取TerraTracker实例
静态方法:TerraTracker.getInstance(String appName) → Future<TerraTracker>
应该在应用初始化阶段调用,并且必须在成功初始化TerraApp之后调用。
设置用户信息
方法:TerraTracker.setUserInfo({String userId, String? phoneNumber}) → void
这些信息会在每个事件中跟踪。你应该尽早向跟踪库传递userId
。phoneNumber
是可选的,它将被发送到事件的network.phoneNumber
参数中。
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.setUserInfo(userId: "user-id", phoneNumber: "0912345678");
跟踪警报事件
这些事件表示弹出消息正在显示,需要用户点击以关闭或做出决定。
方法:TerraTracker.trackAlertEvent(AlertEventBody body) → void
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.trackAlertEvent(
AlertEventBody(
alertType: AlertType.popUp,
alertMessage: "testAlertMessage",
),
);
跟踪购物车事件
这些事件表示用户与购物车的交互。
方法:TerraTracker.trackCartEvent(CartEventBody body) → void
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.trackCartEvent(
CartEventBody(
eventName: CartEventName.addToCart,
cartId: "testCartId",
skuId: "210801335",
skuName: "testSkuName",
price: 100000,
quantity: 10,
status: Status.success,
),
);
跟踪结账事件
这些事件表示用户与购物车的交互。
方法:TerraTracker.trackCheckoutEvent(CheckoutEventBody body) → void
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.trackCheckoutEvent(
CheckoutEventBody(
orderId: "orderId",
amountBeforeDiscount: 100000.0,
amountAfterDiscount: 90000.0,
discountAmount: 10000.0,
products: [
Product(
skuId: "skuId_1",
skuName: "skuName_1",
price: 25500.0,
promotionPrice: 25500.0,
quantity: 10),
Product(
skuId: "skuId_2",
skuName: "skuName_2",
price: 50000.0,
promotionPrice: 50000.0,
quantity: 2),
],
paymentMethod: PaymentMethod.cash,
status: Status.success,
tax: 10.0,
shippingFee: 25000.00,
shippingAddressCode: "1000",
note: "test note",
),
);
跟踪自定义事件
使用此事件跟踪你需要的任何内容。
方法:TerraTracker.trackCustomEvent(CustomEventBody body) → void
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.trackCustomEvent(
CustomEventBody(
category: "testCategory",
action: "testAction",
label: "testLabel",
property: "testProperty",
value: 99,
),
);
跟踪错误事件
这些事件表示网络异常已发生。
方法:TerraTracker.trackErrorEvent(ErrorEventBody body) → void
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.trackErrorEvent(
ErrorEventBody(
apiCall: "https://error-api.abc",
httpResponseCode: 200,
errorSource: ErrorSource.http,
errorCode: "40001",
errorMessage: "testErrorMessage",
apiPayload: "{\"sku\":\"123456\"}",
responseJson: "{\"code\":\"403\",\"message\":\"No permission to access\"}",
),
);
跟踪交互事件
这些事件表示用户与应用程序的交互,如点击按钮。
方法:TerraTracker.trackInteractionEvent(InteractionContentEventBody body) → void
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.trackInteractionEvent(
InteractionContentEventBody(
interaction: Interaction.click,
regionName: "testRegionName",
contentName: "testContentName",
target: "testTarget",
payload: "{\"example\":\"payload\"}",
),
);
跟踪支付事件
这些事件表示与支付相关的用户操作。
方法:TerraTracker.trackPaymentEvent(PaymentEventBody body) → void
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.trackPaymentEvent(
PaymentEventBody(
orderId: "orderId",
amount: 1000000,
paymentMethod: PaymentMethod.cash,
status: Status.failed,
statusCode: 10000,
),
);
跟踪扫描事件
这些事件表示与扫描相关的用户操作。
方法:TerraTracker.trackScanEvent(ScanEventBody body) → void
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.trackScanEvent(
ScanEventBody(
scanId: "scanId",
regionName: "testRegionName",
target: "testTarget",
),
);
跟踪屏幕视图事件
这些事件表示用户查看/退出应用程序中的屏幕。
方法:TerraTracker.trackScreenViewEvent(ScreenViewEventBody body) → void
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.trackScreenViewEvent(
ScreenViewEventBody(
eventName: ScreenEventName.enterScreenView, // 进入或退出屏幕
screenName: "home", // 新屏幕刚刚展示给用户
contentType: "banner", // 屏幕类型,大致属于哪个组
referrer: "refererScreen", // 我们进入此屏幕之前所在的屏幕
),
);
跟踪页面加载时间
这些事件表示特定页面的加载时间。
方法:TerraTracker.trackPageLoadingTime()
final startTimeInMilis = currentTime;
// 加载页面
final loadingTime = currentTime - startTimeInMilis;
// 跟踪加载时间
terraTracker.trackPageLoadingTime(
screenName: 'Test Screen Name',
pageLoadTimeInMillis: loadingTime,
sdkId: "...",
sdkVersion: "...",
);
示例代码
import 'package:flutter/material.dart';
import 'package:terra_flutter/terra_app.dart';
import 'package:tracker_flutter/event_body/event_body.dart';
import 'package:tracker_flutter/terra_tracker.dart';
const terraAppName = "tracker-flutter";
void main() {
runApp(const MyApp());
}
RouteObserver<Route> routeObserver = RouteObserver<Route>();
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isTerraInitialized = false;
String? errorMessage;
[@override](/user/override)
void initState() {
super.initState();
_initTerraTracker();
}
void _initTerraTracker() async {
try {
await TerraApp.initTerraApp(appName: terraAppName);
final terraTracker = await TerraTracker.getInstance(terraAppName);
terraTracker.setUserInfo(userId: "user-id", phoneNumber: "0912345678");
setState(() {
isTerraInitialized = true;
});
} on Exception catch (error) {
setState(() {
errorMessage = error.toString();
});
}
}
// This widget is the root of your application.
[@override](/user/override)
Widget build(BuildContext context) {
if (!isTerraInitialized) {
return Container(
color: Colors.white,
child: Column(
children: [if (errorMessage != null) Text(errorMessage ?? "")],
),
);
}
return MaterialApp(
title: 'Tracker Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
navigatorObservers: [routeObserver],
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
abstract class BaseAppState<T extends StatefulWidget> extends State<T> {
Future<TerraTracker> getTerraTracker() async {
return TerraTracker.getInstance(terraAppName);
}
}
class _MyHomePageState extends BaseAppState<MyHomePage> with RouteAware {
void _trackAlert() async {
final terraTracker = await getTerraTracker();
terraTracker.trackAlertEvent(
AlertEventBody(
alertType: AlertType.popUp,
alertMessage: "testAlertMessage",
attr2: "testAttr2",
),
);
}
void _trackCart() async {
final terraTracker = await getTerraTracker();
terraTracker.trackCartEvent(
CartEventBody(
eventName: CartEventName.addToCart,
cartId: "testCartId",
skuId: "210801335",
skuName: "testSkuName",
price: 100000,
quantity: 10,
status: Status.success,
sdkId: "tracker_flutter_demo",
sdkVersion: "0.0.1",
attr3: "testAttr3",
),
);
}
void _trackCheckout() async {
final terraTracker = await getTerraTracker();
terraTracker.trackCheckoutEvent(
CheckoutEventBody(
orderId: "orderId",
amountBeforeDiscount: 100000.0,
amountAfterDiscount: 90000.0,
discountAmount: 10000.0,
products: [
Product(
skuId: "skuId_1",
skuName: "skuName_1",
price: 25500.0,
promotionPrice: 25500.0,
quantity: 10),
Product(
skuId: "skuId_2",
skuName: "skuName_2",
price: 50000.0,
promotionPrice: 50000.0,
quantity: 2),
],
paymentMethod: PaymentMethod.cash,
status: Status.success,
tax: 10.0,
shippingFee: 25000.00,
shippingAddressCode: "1000",
note: "test note",
attr3: "testAttr3",
),
);
}
void _trackCustom() async {
final terraTracker = await getTerraTracker();
terraTracker.trackCustomEvent(
CustomEventBody(
category: "testCategory",
action: "testAction",
label: "testLabel",
property: "testProperty",
value: 99,
),
);
}
void _trackError() async {
final terraTracker = await getTerraTracker();
terraTracker.trackErrorEvent(
ErrorEventBody(
apiCall: "https://error-api.abc",
httpResponseCode: 200,
errorSource: ErrorSource.http,
errorCode: "40001",
errorMessage: "testErrorMessage",
apiPayload: "{\"sku\":\"123456\"}",
responseJson: "{\"code\":\"403\",\"message\":\"No permission to access\"}",
attr4: "testAttr4",
attr5: "testAttr5",
),
);
}
void _trackInteraction() async {
final terraTracker = await getTerraTracker();
terraTracker.trackInteractionEvent(
InteractionContentEventBody(
interaction: Interaction.click,
regionName: "testRegionName",
contentName: "testContentName",
target: "testTarget",
payload: "{\"example\":\"payload\"}",
sdkId: "tracker-flutter",
sdkVersion: "0.0.1",
),
);
}
void _trackPayment() async {
final terraTracker = await getTerraTracker();
terraTracker.trackPaymentEvent(
PaymentEventBody(
orderId: "orderId",
amount: 1000000,
paymentMethod: PaymentMethod.cash,
status: Status.failed,
statusCode: 10000,
attr5: "testAttr5",
),
);
}
void _trackScan() async {
final terraTracker = await getTerraTracker();
terraTracker.trackScanEvent(
ScanEventBody(
scanId: "scanId",
regionName: "testRegionName",
target: "testTarget",
attr1: "testAttr1",
),
);
}
void _trackSearch() async {
final terraTracker = await getTerraTracker();
terraTracker.trackSearchEvent(
SearchEventBody(
params: SearchParams(
channel: "channel", terminal: "terminal", keyword: "keyword", page: 3, limit: 10),
keywords: ["a", "b"],
order: ["price_ascending"],
sort: ["price", "promotionPrice"],
),
);
}
void _trackVisible() async {
final terraTracker = await getTerraTracker();
terraTracker.trackVisibleContentEvent(
[
VisibleContentEventBody(
index: 0,
contentName: "testContentName1",
regionName: "testRegionName",
sdkVersion: "0.0.1",
payload: "1100"
),
VisibleContentEventBody(
index: 1,
contentName: "testContentName2",
regionName: "testRegionName",
sdkVersion: "0.0.1",
sdkId: "flutter-tracker",
payload: "1100"
)
],
);
}
void _trackScreenViewForceTrack() async {
final terraTracker = await getTerraTracker();
terraTracker.trackScreenViewEvent(
ScreenViewEventBody(
eventName: ScreenEventName.enterScreenView, // 进入或退出屏幕
screenName: "home", // 新屏幕刚刚展示给用户
contentType: "banner", // 屏幕类型,大致属于哪个组
referrer: "refererScreen", // 我们进入此屏幕之前所在的屏幕
forceTrack: true,
),
);
final startTime = await terraTracker.getCurrentTime();
await Future.delayed(const Duration(milliseconds: 2000));
final endTime = await terraTracker.getCurrentTime();
print("loadingTime: ${endTime - startTime}");
terraTracker.trackCustomEvent(
CustomEventBody(
attr1: (endTime - startTime).toString(),
attr2: "home",
attr3: "page_load_time",
),
);
}
void _trackPageLoadingTime() async {
final terraTracker = await getTerraTracker();
terraTracker.trackPageLoadingTime(
screenName: 'Test Screen Name',
pageLoadTimeInMillis: 1110,
sdkId: "213",
sdkVersion: "2321",
);
}
[@override](/user/override)
void didChangeDependencies() {
super.didChangeDependencies();
routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);
}
[@override](/user/override)
void didPush() async {
final terraTracker = await getTerraTracker();
terraTracker.trackScreenViewEvent(
ScreenViewEventBody(
eventName: ScreenEventName.enterScreenView,
screenName: "home",
contentType: "banner",
forceTrack: false,
),
);
}
[@override](/user/override)
void didPop() async {
final terraTracker = await getTerraTracker();
terraTracker.trackScreenViewEvent(
ScreenViewEventBody(
eventName: ScreenEventName.exitScreenView,
screenName: "home",
contentType: "banner",
),
);
}
[@override](/user/override)
Widget build(BuildContext context) {
void _goToNextScreen() {
Navigator.push(context, MaterialPageRoute(builder: (context) => const SecondPage()));
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [
IconButton(
icon: const Icon(
Icons.arrow_forward,
color: Colors.white,
),
onPressed: _goToNextScreen,
)
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: _trackAlert,
child: const Text('track alert')),
TextButton(
onPressed: _trackCart,
child: const Text('track cart')),
TextButton(
onPressed: _trackCheckout,
child: const Text('track checkout')),
TextButton(
onPressed: _trackCustom,
child: const Text('track custom')),
TextButton(
onPressed: _trackError,
child: const Text('track error')),
TextButton(
onPressed: _trackInteraction,
child: const Text('track interaction')),
TextButton(
onPressed: _trackPayment,
child: const Text('track payment')),
TextButton(
onPressed: _trackScan,
child: const Text('track scan')),
TextButton(
onPressed: _trackSearch,
child: const Text('track search')),
TextButton(
onPressed: _trackVisible,
child: const Text('track visible')),
TextButton(
onPressed: _trackScreenViewForceTrack,
child: const Text('track screen view - force track')),
TextButton(
onPressed: _trackPageLoadingTime,
child: const Text('track page loading time')),
],
),
),
);
}
}
class SecondPage extends StatefulWidget {
const SecondPage({Key? key}) : super(key: key);
[@override](/user/override)
State<SecondPage> createState() => _SecondPageState();
}
class _SecondPageState extends BaseAppState<SecondPage> with RouteAware {
[@override](/user/override)
void didChangeDependencies() {
super.didChangeDependencies();
routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);
}
[@override](/user/override)
void didPush() async {
final terraTracker = await getTerraTracker();
terraTracker.trackScreenViewEvent(
ScreenViewEventBody(
eventName: ScreenEventName.enterScreenView,
screenName: "second",
contentType: "banner",
),
);
}
[@override](/user/override)
void didPop() async {
final terraTracker = await getTerraTracker();
terraTracker.trackScreenViewEvent(
ScreenViewEventBody(
eventName: ScreenEventName.exitScreenView,
screenName: "second",
contentType: "banner",
),
);
}
[@override](/user/override)
Widget build(BuildContext context) {
void _goBack() {
Navigator.pop(context);
}
return Scaffold(
appBar: AppBar(
title: const Text("Second Page"),
leading: IconButton(
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
),
onPressed: _goBack,
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('This is the second screen'),
],
),
),
);
}
}
更多关于Flutter追踪分析插件tracker_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter追踪分析插件tracker_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
tracker_flutter
是一个用于在 Flutter 应用中追踪用户行为和分析事件的插件。它可以帮助开发者收集用户交互数据、页面访问信息、应用崩溃日志等,以便进行数据分析和优化应用体验。
以下是使用 tracker_flutter
插件的基本步骤:
1. 添加依赖
首先,在 pubspec.yaml
文件中添加 tracker_flutter
插件的依赖:
dependencies:
flutter:
sdk: flutter
tracker_flutter: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get
来安装依赖。
2. 初始化插件
在应用的 main.dart
文件中初始化 tracker_flutter
插件。通常,你需要在应用启动时进行初始化。
import 'package:flutter/material.dart';
import 'package:tracker_flutter/tracker_flutter.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
// 初始化 tracker_flutter
await TrackerFlutter.init(
appKey: 'YOUR_APP_KEY', // 替换为你的应用密钥
serverUrl: 'https://your-tracking-server.com', // 替换为你的追踪服务器地址
);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Tracker Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
3. 设置用户信息(可选)
如果你需要追踪特定用户的行为,可以设置用户信息:
TrackerFlutter.setUserInfo(
userId: '12345', // 用户ID
userName: 'John Doe', // 用户名
userEmail: 'john.doe@example.com', // 用户邮箱
);
4. 追踪事件
你可以使用 TrackerFlutter.trackEvent
方法来追踪自定义事件。例如,追踪一个按钮点击事件:
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tracker Flutter Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// 追踪按钮点击事件
TrackerFlutter.trackEvent(
eventName: 'button_click',
properties: {
'button_name': 'start_button',
'click_time': DateTime.now().toString(),
},
);
},
child: Text('Click Me'),
),
),
);
}
}
5. 追踪页面访问
你可以使用 TrackerFlutter.trackPageView
方法来追踪页面访问。通常,你可以在页面构建时调用这个方法:
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 追踪页面访问
TrackerFlutter.trackPageView(
pageName: 'HomePage',
properties: {
'visit_time': DateTime.now().toString(),
},
);
return Scaffold(
appBar: AppBar(
title: Text('Tracker Flutter Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// 追踪按钮点击事件
TrackerFlutter.trackEvent(
eventName: 'button_click',
properties: {
'button_name': 'start_button',
'click_time': DateTime.now().toString(),
},
);
},
child: Text('Click Me'),
),
),
);
}
}
6. 追踪应用崩溃(可选)
tracker_flutter
还可以自动追踪应用的崩溃信息。你只需要在初始化时启用崩溃追踪:
await TrackerFlutter.init(
appKey: 'YOUR_APP_KEY',
serverUrl: 'https://your-tracking-server.com',
enableCrashTracking: true, // 启用崩溃追踪
);
7. 调试模式(可选)
在开发过程中,你可以启用调试模式来查看插件的日志输出:
await TrackerFlutter.init(
appKey: 'YOUR_APP_KEY',
serverUrl: 'https://your-tracking-server.com',
debugMode: true, // 启用调试模式
);
8. 上传数据(可选)
如果你需要手动上传数据,可以调用 TrackerFlutter.upload()
方法:
TrackerFlutter.upload();
9. 清理用户信息(可选)
当用户注销时,你可以清理用户信息:
TrackerFlutter.clearUserInfo();
10. 销毁插件(可选)
在应用关闭时,你可以销毁插件以释放资源:
TrackerFlutter.destroy();