Flutter for WebをGoogle Analytics for Firebaseで分析する

以前Flutter for Webを使ってPWAサイトを作りました
iOSやAndroidアプリとは違いWebにはアプリストアがないので、アクセス解析が欲しいところです

ということでFlutter for Webで作ったサイトにGoogle Analytics for Firebaseを追加してみました！

Google Analyticsを準備する

プロジェクトを作成する

まずはFirebaseにプロジェクトを追加します。以前作ったPWAサイトをベースにするため、名前はFlutterPwaSampleとします

プロジェクトを追加したら、赤枠の「Webアプリを追加」をします

Webアプリを追加する

アプリ名は適当に設定

すると、WebにFirebaseSDKを追加するためのコードを貼れと言われます
このコードは公開用なのでユーザに見えても問題ないようです

これをFlutterプロジェクト内のindex.htmlのbodyタグ内に貼り付けます
↓index.htmlはここですね

FlutterSDKを使う

先程のコードをindex.htmlに追加した上で、FlutterにFirebaseAnalyticsSDKを追加します

dependenciesを追加

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_analytics: ^8.0.2. # <<< 追加

main.dartにログコードを追加

main.dartにFirebaseAnalyticsのobserverを追加します

main.dart

import 'package:firebase_analytics/firebase_analytics.dart'; // <<< 追加
import 'package:firebase_analytics/observer.dart';  // <<< 追加
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 追加
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  static FirebaseAnalyticsObserver observer = FirebaseAnalyticsObserver(analytics: analytics);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      navigatorObservers: [  // <<< 追加
        observer,            // <<< 追加
      ],                     // <<< 追加
    );
  }
}

webにデプロイする

flutter build webコマンドを叩きflutterアプリをビルド、今回はS3上にアップロードしました
公開の手順は以前の記事を参照

$ flutter build web

動作確認

試しに公開したWebサイトにアクセスして、Analyticsダッシュボードを見てみます
すると、リアルタイムユーザに自分がカウントされていることがわかります

まとめ

ということで、Flutter for Webで作ったウェブサイトにGoogle Analytics for Firebaseを追加することに成功しました！
ただ現状だとSPAには対応していないので、画面ごとのアクセス率や各種イベントを収集することはできません

とりあえずアクセス数カウンターとしては十分ですが、色々と使いこなしていきたいですね