[Flutter] Firebase Analytics

개요

이번 블로그 포스트에서는 Flutter에서 사용자의 행동을 분석하기 위해 Firebase의 Analytics를 설정하는 방법에 대해서 소개합니다.

firebase_analytics

Firebase의 Analytics를 사용하기 위해 Flutter에 firebase_analytics을 사용할 필요가 있습니다. 이번 블로그 포스트에서는 firebase_analytics을 설정하고 사용하는 방법에 대해서 알아봅시다.

블로그 시리즈

이 블로그는 시리즈로 제작되었습니다. 다음 링크를 통해 다른 블로그 포스트도 확인해 보시기 바랍니다.

Firebase 프로젝트 생성 및 설정

Flutter에서 Firebase를 사용하기 위해서는 Firebase 프로젝트를 생성하고, firebase_core 패키지를 설치할 필요가 있습니다. 아래의 링크를 통해 자세한 내용을 확인하시기 바랍니다.

[Flutter] Firebase Core

firebase_analytics 설치

Flutter 프로젝트에서 Firebase Analytics를 사용하기 위해서는 firebase_analytics 패키지를 설치할 필요가 있습니다. 다음 명령어를 실행하여 firebase_analytics 패키지를 설치합니다.

flutter pub add firebase_analytics

iOS 타겟 SDK 버전 변경

firebase_analytics을 사용하기 위해서는 iOS의 타겟 SDK 버전을 변경할 필요가 있습니다. ios/Podfile 파일을 열고 다음과 같이 수정합니다.

# Uncomment this line to define a global platform for your project
platform :ios, '13.0'

그리고 다음 명령어를 실행하여 필요한 패키지를 설치합니다.

# cd ios
pod install

안드로이드 minSdkVersion 변경

firebase_analytics을 사용하기 위해서는 안드로이드의 minSdkVersion 버전을 변경할 필요가 있습니다. android/app/build.gradle 파일을 열고 다음과 같이 수정합니다.

...
defaultConfig {
  applicationId "com.example.app"
  minSdkVersion 21
  ...
}
...

firebase_analytics 사용법

Flutter에서 다음과 같이 firebase_analytics를 사용하면, 화면이 변경되었을 때, Firebase Analytics에 이를 기록할 수 있습니다.

import 'package:firebase_analytics/firebase_analytics.dart';

class MyApp extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics.instance;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      navigatorObservers: [
        FirebaseAnalyticsObserver(analytics: analytics),
      ],
      initialRoute: 'Category',
      routes: {'Category': (context) => Categories()},
    );
  }
}

커스텀 이벤트

다음과 같이 사용자 정의 이벤트를 만들어서 사용할 수도 있습니다.

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Analytics Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorObservers: [observer],
      home: Home(
        analytics: analytics,
      ),
    );
  }
}

class Home extends StatefulWidget {
  Home({this.analytics})
      : super();

  final FirebaseAnalytics analytics;

  @override
  _HomeState createState() => _HomeState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _message = '';

  void setMessage(String message) {
    setState(() {
      _message = message;
    });
  }

  Future<void> _sendAnalyticsEvent() async {
    await widget.analytics.logEvent(
      name: 'test_event',
      parameters: <String, dynamic>{
        'string': 'string',
        'int': 42,
        'long': 12345678910,
        'double': 42.0,
        'bool': true,
      },
    );
    setMessage('logEvent succeeded');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          MaterialButton(
            onPressed: _sendAnalyticsEvent,
            child: const Text('Test logEvent'),
          ),
          Text(_message,
              style: const TextStyle(color: Color.fromARGB(255, 0, 155, 0))),
        ],
      ),
    );
  }
}

테스트 코드

Firebase Analytics를 테스트하기 위해서는 mockito와 build_runner 패키지를 설치해야 합니다.

다음 명령어를 실행하여 mockito와 build_runner 패키지를 설치합니다.

flutter pub add dev:mockito dev:build_runner

그런 다음 main.dart 파일을 테스트하는 코드를 작성합니다. 이를 위해서 test/main_test.dart 파일을 생성하고 다음과 같이 코드를 작성합니다.

@GenerateMocks([FirebaseAnalytics])
void main() {
  TestWidgetsFlutterBinding.ensureInitialized();

  const testAppName = 'testApp';
  const FirebaseOptions testOptions = FirebaseOptions(
    apiKey: 'apiKey',
    appId: 'appId',
    messagingSenderId: 'messagingSenderId',
    projectId: 'projectId',
  );
  final mockFirebaseCore = MockFirebaseCore();
  final mockFirebaseAnalytics = MockFirebaseAnalytics();

  setUp(() {
    clearInteractions(mockFirebaseCore);
    Firebase.delegatePackingProperty = mockFirebaseCore;
    final FirebaseAppPlatform platformApp =
        FirebaseAppPlatform(testAppName, testOptions);

    when(mockFirebaseCore.initializeApp(
      options: anyNamed('options'),
    )).thenAnswer((_) {
      return Future.value(platformApp);
    });
    app.MyApp.analytics = mockFirebaseAnalytics;
  });

  testWidgets('Main widget is rendered well', (WidgetTester tester) async {
    await app.main();

    verify(mockFirebaseCore.initializeApp(
      options: anyNamed('options'),
    )).called(1);

    final materialApp = tester.widget<GetMaterialApp>(
      find.byType(GetMaterialApp),
    );
    expect(materialApp.navigatorObservers?.length, 1);
    expect(
      materialApp.navigatorObservers![0].runtimeType,
      FirebaseAnalyticsObserver,
    );
  });
}

Firebase Analytics를 테스트하기 위한 코드는 다음과 같습니다.

@GenerateMocks([FirebaseAnalytics])
void main() {
  ...
  final mockFirebaseAnalytics = MockFirebaseAnalytics();

  setUp(() {
    ...
    app.MyApp.analytics = mockFirebaseAnalytics;
  });

  testWidgets('Main widget is rendered well', (WidgetTester tester) async {
    await app.main();
    ...
    final materialApp = tester.widget<GetMaterialApp>(
      find.byType(GetMaterialApp),
    );
    expect(materialApp.navigatorObservers?.length, 1);
    expect(
      materialApp.navigatorObservers![0].runtimeType,
      FirebaseAnalyticsObserver,
    );
  });
}

이것으로 Firebase Analytics가 navigatorObservers를 통해 FirebaseAnalyticsObserver를 사용하는지 확인할 수 있습니다.

완료

이것으로 Flutter에서 Firebase Analytics를 사용하기 위해 Flutter 프로젝트에 firebase_analytics를 설정하는 방법에 대해서 알아보았습니다. 이제 Firebase Analytics를 사용하여 사용자의 앱 행동 패턴을 분석해 보시기 바랍니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!