Flutter實現Firebase埋點功能

前言:

         Flutter 使用第三方插件 firebase_analytics 完成了 Firebase 埋點功能,本人簡單整理了 Flutter 在 Android/iOS 端完成 Firebase 埋點的功能,有需要的話可以參考。

實現的效果:

實現的步驟:

1. Google 官網註冊應用

在 Google 官方網址註冊自己的應用,並下載 google-services.json 的文件,把它放到項目的 app / 目錄。

2. Android 集成

2.1 Project 的 build.gradle

classpath 'com.google.gms:google-services:4.3.14'

2.2 Module 的 build.gradle

apply plugin: 'com.android.application'
//添加
apply plugin: 'com.google.gms.google-services'  

dependencies {
  //添加
  implementation 'com.google.firebase:firebase-analytics:17.6.0'
}

3. iOS 集成 

參考:https://firebase.flutter.dev/docs/analytics/get-started

4. 在 pubspec.yaml 文件添加插件

cupertino_icons: ^1.0.2
firebase_analytics: ^10.1.0 #目前最新版本

5.在Application封裝全局的analytics

class Application {
  static late FirebaseAnalytics analytics;
  
  // Firebase Analytics
  static FirebaseAnalytics getFirebaseAnalytics() {
    return analytics;
  }
}

6.在main封裝和調用初始化firebase analytics的方法

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  //Firebase
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  FlutterError.onError = (errorDetails) {
    FirebaseCrashlytics.instance.recordFlutterFatalError(errorDetails);
  };
  PlatformDispatcher.instance.onError = (error, stack) {
    FirebaseCrashlytics.instance.recordError(error, stack, fatal: true);
    return true;
  };
  
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  //封裝初始化firebase analytics方法
  Future<void> _initializeFlutterFire() async {
    await FirebaseCrashlytics.instance
        .setCrashlyticsCollectionEnabled(!kDebugMode);
  }

  static FirebaseAnalytics analytics = FirebaseAnalytics.instance;
  static FirebaseAnalyticsObserver observer = FirebaseAnalyticsObserver(analytics: analytics);

  @override
  void initState() {
    super.initState();
    _initializeFlutterFire();
    Application.analytics = analytics;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        navigatorObservers: <NavigatorObserver>[observer],
        home: const DashboardPage());
  }
}

7.封裝firebase analytics的工具類

class AnalyticsUtils {
  static logCurrentScreen(Widget screen) {
    String screenName = screen.runtimeType.toString();
    Application.getFirebaseAnalytics().setCurrentScreen(screenName: screenName);
  }
}

8.在頁面處理埋點數據

class DashboardPage extends StatefulWidget {
  const DashboardPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => DashboardPageState();
}

class DashboardPageState extends State<DashboardPage>{

  @override
  void initState() {
    super.initState();
    //處理埋點數據
    AnalyticsUtils.logCurrentScreen(widget);
  }

   @override
  Widget build(BuildContext context) {
     return SafeArea();
  }
}

9.總結:Flutter 使用第三方插件 firebase_analytics 完成了 Firebase 埋點功能,如果大家有什麼疑問的話,歡迎留言聯繫我。整理不易,轉載請標明出處,謝謝!  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章