[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, '11.0'

そして次のコマンドを実行して必要なパッケージをインストールします。

# cd ios
pod install

AndroidのminSdkVersion変更

firebase_analyticsを使うためにはAndroidの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,
    );
  });
}