Bí Kíp Theo Dõi Người Dùng 'Đi Đâu, Về Đâu' Trong Flutter: Screen View và App Close Events

Lê Lân

20/07/2025

Hướng Dẫn Triển Khai Đúng Cách Các Sự Kiện Xem Màn Hình và Đóng Ứng Dụng Trong Flutter

Mở Đầu

Trong phát triển ứng dụng di động, theo dõi tương tác người dùng là yếu tố then chốt giúp hiểu hành vi và cải thiện trải nghiệm người dùng. Hai sự kiện cơ bản cần theo dõi gồm có hoạt động xem màn hình và sự kiện đóng ứng dụng.

Việc ghi nhận chính xác các sự kiện này giúp phát hiện điểm nhấn, các màn hình phổ biến hay vấn đề trên ứng dụng và đo lường thời gian sử dụng cũng như lý do người dùng thoát app. Bài viết này sẽ hướng dẫn chi tiết cách triển khai hiệu quả trên Flutter, từ việc thiết lập dịch vụ phân tích, tạo observer theo dõi điều hướng, đến xử lý các trường hợp đặc biệt như màn hình modal và dialog.

1. Thiết Lập Dịch Vụ Phân Tích

Bạn cần tạo lớp dịch vụ để gửi sự kiện analytics. Ví dụ sau sử dụng Firebase Analytics nhưng dễ dàng áp dụng với các dịch vụ khác.

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:flutter/material.dart';

class AnalyticsService {
  AnalyticsService._(); // Singleton private constructor
  static final instance = AnalyticsService._();

  final _analytics = FirebaseAnalytics.instance;

  // Gửi sự kiện tùy chỉnh
  void logEvent(String name, Map<String, Object> parameters) {
    _analytics.logEvent(name: name, parameters: parameters)
      .then((value) => debugPrint('Event logged: $name'))
      .catchError((e) => debugPrint('Error logging event: $e'));
  }

  // Gửi sự kiện xem màn hình
  void logScreenView(String screenName) {
    _analytics.logScreenView(screenName: screenName);
  }
}

Lưu ý: Việc đóng gói dịch vụ giúp bạn dễ dàng quản lý, thay thế hoặc mở rộng theo dõi các sự kiện khác mà không cần thay đổi nhiều trong phần còn lại của code.

2. Tạo Custom Navigator Observer Để Theo Dõi Màn Hình

Flutter cho phép lắng nghe sự kiện điều hướng qua lớp NavigatorObserver . Bạn mở rộng lớp này để tự động gửi sự kiện xem màn hình khi route thay đổi.

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:flutter/material.dart';

typedef NameExtractor = String? Function(Route<dynamic> route);
typedef RouteFilter = bool Function(Route<dynamic> route);

class CustomAnalyticsObserver extends NavigatorObserver {
  CustomAnalyticsObserver({
    required this.analytics,
    this.nameExtractor,
    this.routeFilter,
  });

  final FirebaseAnalytics analytics;
  final RouteFilter? routeFilter;
  final NameExtractor? nameExtractor;

  String? _currentTabName;

  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPush(route, previousRoute);
    _sendScreenView(route);
  }

  @override
  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    if (newRoute != null) _sendScreenView(newRoute);
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPop(route, previousRoute);
    if (previousRoute != null) _sendScreenView(previousRoute);
  }

  void _sendScreenView(Route<dynamic> route) {
    if (routeFilter != null && !routeFilter!(route)) return;

    final screenName = nameExtractor != null ? nameExtractor!(route) : route.settings.name;

    if (screenName != null) {
      if (pauseScreenView) {
        pauseScreenView = false;
        return;
      }
      analytics.logScreenView(screenName: screenName);
    }
  }

  void trackTabChange(String tabName) {
    if (_currentTabName == tabName) return;
    _currentTabName = tabName;
    analytics.logScreenView(screenName: tabName);
  }
}

Phương pháp này giúp tự động ghi nhận màn hình khi người dùng điều hướng thuận tiện, tránh quên gửi sự kiện thủ công.

3. Xử Lý Vòng Đời Ứng Dụng Để Ghi Nhận Sự Kiện Đóng App

Bạn cần sử dụng lifecycle của Flutter để biết khi nào app bị thu nhỏ hoặc đóng. Ưu tiên sử dụng WidgetsBindingObserver để lắng nghe các trạng thái đời sống ứng dụng.

import 'dart:developer';
import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  Future<String?> getCurrentScreen() async {
    // Cần cài đặt logic lấy tên màn hình hiện tại (ví dụ từ bộ nhớ local)
    return null;
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) async {
    if (state == AppLifecycleState.inactive || state == AppLifecycleState.paused) {
      final screenName = await getCurrentScreen();
      log('App lifecycle changed: $screenName, state: $state');
      if (screenName != null) {
        AnalyticsService.instance.logEvent(
          'app_close',
          {
            'screen_name': screenName,
            'type': 'user_minimised',
          },
        );
      }
    }

    if (state == AppLifecycleState.resumed) {
      final screenName = await getCurrentScreen();
      log('App resumed: $screenName');
      if (screenName != null) {
        AnalyticsService.instance.logScreenView(screenName);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // cấu hình navigator, theme, ...
    );
  }
}

Việc gửi sự kiện khi app bị thu nhỏ giúp bạn biết điểm người dùng thoát hoặc tạm dừng trải nghiệm, rất quan trọng trong phân tích hành vi.

4. Xử Lý Các Màn Hình Đặc Biệt Như Bottom Sheets và Dialogs

Các màn hình dạng modal không tạo route mới, nên observer mặc định không theo dõi được. Giải pháp là lưu tên màn hình hiện tại vào bộ nhớ cục bộ khi mở/modal và phục hồi khi đóng.

// Khi mở bottom sheet
GestureDetector(
  onTap: () {
    LocalStoreService.instance.saveUserPref(
      'current_screen',
      ScreenNames.filterScreen,
    );

    showModalBottomSheet(
      isScrollControlled: true,
      useSafeArea: true,
      context: context,
      useRootNavigator: true,
      routeSettings: const RouteSettings(name: FilterBottomSheet.routeName),
      builder: (_) => FilterBottomSheet(searchId: searchId),
    ).then((_) {
      LocalStoreService.instance.saveUserPref(
        'current_screen',
        ScreenNames.resultScreen,
      );
    });
  },
  child: YourButtonWidget(),
)

Sau đó bạn cài đặt hàm lấy tên màn hình hiện tại ưu tiên kiểm tra giá trị lưu trong bộ nhớ lưu trữ trước, giúp báo cáo chính xác ngay cả khi app đóng ở dialog/modal.

Future<String?> getCurrentScreen() async {
  try {
    final storedScreen = LocalStoreService.instance.getUserPref(Strings.currentScreen);
    if (storedScreen == ScreenNames.filterScreen) {
      log('Filter screen đang hiển thị (từ local storage)');
      return ScreenNames.filterScreen;
    }

    // Lấy tên route hiện tại từ GoRouter hoặc phương thức điều hướng bạn dùng
    ...
  } catch (e) {
    log('Lỗi lấy route hiện tại: $e');
  }
  return null;
}

Cách làm này đảm bảo không bỏ sót màn hình modal khi phân tích các sự kiện xem màn hình và app close.

5. Ngăn Ngừa Các Sự Kiện Xem Màn Hình Không Cần Thiết

Khi ứng dụng có điều hướng phức tạp hoặc nhiều chuyển đổi nhanh, rất dễ bị gửi trùng hoặc dư thừa event. Giải pháp dùng flag tạm dừng ghi nhận screen view:

bool pauseScreenView = false;

void _sendScreenView(Route<dynamic> route) {
  final screenName = route.settings.name;
  if (screenName != null) {
    if (pauseScreenView) {
      pauseScreenView = false;
      return;
    }
    analytics.logScreenView(screenName: screenName);
  }
}

void navigateWithoutLogging() {
  pauseScreenView = true;
  Navigator.of(context).pushNamed('/next-screen');
}

Tính năng này cực kỳ hữu ích khi bạn tự động điều hướng chuyển tiếp (redirects), deep linking hay trong các luồng xác thực người dùng.

6. Các Thực Hành Tốt Nhất

Định nghĩa hằng số cho tên sự kiện, màn hình để tránh sai lệch khi gọi:

class FirebaseEventsNames {
  static const String appClose = 'app_close';
  static const String searchClick = 'search_button_clicked';
  static const String resultFound = 'result_found';
}

class ScreenNames {
  static const String homeScreen = 'home_screen';
  static const String detailScreen = 'detail_screen';
  static const String filterScreen = 'filter_screen';
}

Ghi log debug: Sử dụng log('Screen view: $screenName') để theo dõi và debug.

Tránh trùng lặp sự kiện: Đặc biệt với các tab trong bottom navigation.

Kiểm thử kỹ: Dùng Firebase Analytics DebugView hoặc công cụ bên analytics provider để đảm bảo sự kiện được gửi đúng.

7. Tổng Hợp Toàn Bộ Vào main.dart

Dưới đây một ví dụ tích hợp đầy đủ các phần quan trọng trong file chính:

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:flutter/material.dart';

bool pauseScreenView = false;

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // Khởi tạo Firebase ở đây nếu có
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  final analytics = FirebaseAnalytics.instance;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  Future<String?> getCurrentScreen() async {
    // Logic lấy tên màn hình hiện tại tương tự như phần 4
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) async {
    if (state == AppLifecycleState.inactive || state == AppLifecycleState.paused) {
      final screenName = await getCurrentScreen();
      if (screenName != null) {
        AnalyticsService.instance.logEvent(
          'app_close',
          {
            'screen_name': screenName,
            'type': 'user_minimised',
          },
        );
      }
    }
    if (state == AppLifecycleState.resumed) {
      final screenName = await getCurrentScreen();
      if (screenName != null) {
        AnalyticsService.instance.logScreenView(screenName);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [
        CustomAnalyticsObserver(analytics: analytics),
      ],
      // cấu hình routes, theme,...
    );
  }
}

Kết Luận

Việc triển khai đúng cách các sự kiện xem màn hình và đóng app giúp doanh nghiệp cũng như nhà phát triển có cái nhìn sâu sắc về hành vi người dùng, từ đó cải thiện trải nghiệm và tăng sự gắn bó. Với Flutter, bằng cách tận dụng NavigatorObserver cùng quản lý vòng đời app, bạn có thể dễ dàng tích hợp hệ thống analytics hiệu quả. Đừng quên kiểm thử kỹ và duy trì code sạch để hệ thống hoạt động ổn định.

Chúc bạn thành công trong việc phát triển ứng dụng Flutter với hệ thống phân tích mạnh mẽ và chính xác!

Tham Khảo

Firebase Analytics Official Docs: https://firebase.google.com/docs/analytics

Flutter NavigatorObserver: https://api.flutter.dev/flutter/widgets/NavigatorObserver-class.html

GoRouter Documentation: https://pub.dev/packages/go_router

Medium article: "Properly Implementing Screen View and App Close Events in Flutter" by Sajith Lal March 10, 2024