[Flutter] Firebase Analytics

2021-05-12 hit count image

今回のブログポストではFlutterでFirebaseのAnalyticsを連動する方法について説明します。

概要

今回のブログポストではFlutterでユーザの動きを分析するためFirebaseAnalyticsを設定する方法について説明します。

FirebaseAnalyticsを使うためFlutterでfirebase_analyticsを使う必要があります。今回のブログポストではfirebase_analyticsを設定して、使う方法について説明します。

ブログシリーズ

このブログはシリーズで作成されております。次のリンクを使って他のブログポストは下記のリンクで確認できます。

Firebaseプロジェクト生成や設定

FlutterでFirebaseを使うためにはFirebaseプロジェクトを生成して、firebase_coreパッケージをインストールする必要があります。下記のリンクで詳しい内容を確認してください。

firebase_analyticsインストール

FlutterプロジェクトでFirebase Analyticsを使うためにはfirebase_analyticsパッケージをインストールする必要があります。次のコマンドを実行してfirebase_analyticsパッケージをインストールします。

flutter pub pub add firebase_analytics

firebase_analyticsの使い方

Flutterで次のようにfirebase_analyticsを使うと、画面が変更された時、Firebase Analyticsへこれを記録することができます。

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';

class MyApp extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics();

  @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))),
        ],
      ),
    );
  }
}

完了

これでFlutterでFirebase Analyticsを使うためFlutterプロジェクトでfirebase_analyticsを設定する方法について説明しました。これからFirebase Analyticsを使ってユーザのアプリ内行動パターンを分析してみてください。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

Posts