Flutter Web Appから送信されるFirebase AnalyticsのイベントをDebug Viewでリアルタイムに確認する

#Firebase Analytics

#Flutter

若槻龍太

2022.10.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

Firebase AnalyticsではDebug Viewを使用することにより、アプリから送信されるイベントログをリアルタイムでコンソールから確認することができます。

Firebase Analyticsの通常のダッシュボードからもイベントログの送信を確認はできなくは無いですが、多少の遅延（平均1時間とのこと）があるため、デバッグしながらの開発だとDebug Viewは是非とも使えるようにしたいところです。

Generally, events logged by your app are batched together over the period of approximately one hour and uploaded together.

そこで今回は、Flutter Web Appから送信されるFirebase AnalyticsのイベントをDebug Viewで確認してみました。

やってみた

環境準備

以前のエントリを参考に環境を準備します。

Flutter Web AppにFirebase Analyticsによるアクセス解析を導入してみた | DevelopersIO

これにより次の準備を完了させます。

Flutterプロジェクトの作成
FirebaseプロジェクトへのFlutter App登録
Firebase Analytics Pluginの導入

実装

main.dartを次のように編集します。

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

void main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  await FirebaseAnalytics.instance.logScreenView(screenName: 'home');

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() async {
    await FirebaseAnalytics.instance.logEvent(name: 'buttonClicked');
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}