Zenn
🧑‍💻

GoogleAnalyticsを使ってみた

2023/04/15に公開
Flutter
Google Analytics
tech

どんなことができるのか?

FlutterとFirebaseを使用して、GoogleAnalyticsを使用することができるそうなのですが、使ったことがなかったので、キャッチアップしたいことから、やってみました。

こちらが公式ページ
https://firebase.google.com/docs/analytics?hl=ja

わかりやすく説明すると、ボタンを押すイベントが起きたら、ユーザーがアプリを使用している情報を収集することができたり、すごい機能だと、購入ボタンを押すと、ユーザーが例えばですけど、北欧製のオシャレな椅子を４個購入している情報を収集できます。
ＥＣアプリは作ったことないので、イメージはできませんが、何らかのイベントが発生したらアプリから情報を収集してくれる機能だと解釈すれば良いかなと思います。

早速使ってみた

それでは、いつも通りにFlutterとFirebaseのプロジェクトを作成して、設定をしていきましょう。デモアプリは、Riverpod2.0を使用して状態管理をしています。

こちらのパッケージを追加してください
https://pub.dev/packages/firebase_core
https://pub.dev/packages/firebase_core
https://pub.dev/packages/firebase_analytics

FlutterでGoogleAnalyticsを使用するためのロジックを作ります。analytics_provider.dartを作成して、以下のコードを記述してください。

analytics_provider.dart
import 'package:anlytics_tutorial/main.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// AnalyticsServiceを読み込むためのプロバイダー
final analyticsServiceProvider = Provider<AnalyticsService>((ref) => AnalyticsService());

// GoogleAnalyticsを使用するためのサービスクラス
class AnalyticsService {
  // ボタンイベント
  Future<void> eventPush() async {
    await analytics.logEvent(
      name: '押したよ!',
      parameters: <String, dynamic>{
        'button_name': 'example_button',
      },
    );
  }

  // 好きな食べ物の情報を収集する
  Future<void> foodEvent() async {
    const favoriteFood = 'Apple';
    await FirebaseAnalytics.instance.setUserProperty(
      name: 'favorite_food',
      value: favoriteFood,
    );
  }
}

次にアプリを実行するコードを書きます。main.dartのコードを以下のコードに修正してください。
ボタンを押すと、イベントが発生してGoogleAnalyticsで、ユーザーがアプリを使用しているか確認をすることができます。
イベントが起きたのを検知して、結果が表示されるまで、時間がかかるので、Firebaseのコンソールで確認するときは、長く待たないと確認できないようです。

main.dart
// ignore_for_file: unused_local_variable

import 'package:anlytics_tutorial/analytics_provider.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(ProviderScope(child: MyApp()));
}

// FirebaseAnalytics の instance ゲッターを呼び出して、
//Firebase 向け Google アナリティクスの新しいインスタンスを作成します。
final FirebaseAnalytics analytics = FirebaseAnalytics.instance;

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      // FirebaseAnalyticsObserverは、Navigatorのイベントを監視し、
      //Firebase Analyticsに画面遷移を報告します。
      // 今回は、画面遷移をしないので、必要ないかなと思います。
      navigatorObservers: [
        FirebaseAnalyticsObserver(analytics: analytics),
      ],
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final analyticsService = ref.read(analyticsServiceProvider);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Analytics'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // ボタンを押すとイベントを検知して、GoogleAnalyticsに
            // ユーザーがアプリを使用していることが通知される
            ElevatedButton(
              child: const Text('ボタンを押してね'),
              onPressed: () async {
                analyticsService.eventPush();
              },
            ),
            const SizedBox(height: 20.0),
            ElevatedButton(
              child: const Text('好きなたべもの'),
              onPressed: () async {
                analyticsService.foodEvent();
              },
            ),
          ],
        ),
      ),
    );
  }
}

こちらが表示された結果です

画面左のメニューの分析のところから印をつけているところ、Realtime Analyticsを選択してください。そこから、どこに住んでいるユーザーが、何人ぐらいアプリを使用しているか確認することができます。

最後に

いかがでしたでしょうか皆様。これで多分、GoogleAnalyticsの導入の仕方と使い方を理解することができるようになったと思います。

今回学習の参考になった動画
https://www.youtube.com/watch?v=BWTQkkLC-Mo

riverpodを使用したパターン

２０２４年４月２０日に更新
riverpod2.0でもし使用したい場合は、このように書きます。

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'analytics.g.dart';

/// [fvmでバージョン管理をしている場合のコマンド]
/// fvm flutter pub run build_runner watch --delete-conflicting-outputs

// FirebaseAnalyticsを提供するProvider
@riverpod
FirebaseAnalytics firebaseAnalytics(FirebaseAnalyticsRef ref) {
  return FirebaseAnalytics.instance;
}

// GoogleAnalyticsの機能を実装したクラスを使用するProvider
@Riverpod(keepAlive: true)
AnalyticsService analyticsService(AnalyticsServiceRef ref) {
  return AnalyticsServiceImp(ref: ref);
}

// AnalyticsService interfaceを定義
abstract interface class AnalyticsService {
  Future<void> signInEvent();
  Future<void> signUpEvent();
  Future<void> logOutEvent();
}

// interfaceを実装
class AnalyticsServiceImp implements AnalyticsService {
  AnalyticsServiceImp({required this.ref});
  final Ref ref;

  // ログインしたか情報を取集する
  @override
  Future<void> signInEvent() async {
    await ref.read(firebaseAnalyticsProvider).logEvent(
      name: 'ユーザーがログインしました',
      parameters: <String, dynamic>{
        'button_name': 'login_button',
      },
    );
  }

  // 新規登録したか情報を取集する
  @override
  Future<void> signUpEvent() async {
    await ref.read(firebaseAnalyticsProvider).logEvent(
      name: 'ユーザーが新規登録しました',
      parameters: <String, dynamic>{
        'button_name': 'sign_up_button',
      },
    );
  }

  // ログアウトしたか情報を取集する
  @override
  Future<void> logOutEvent() async {
    await ref.read(firebaseAnalyticsProvider).logEvent(
      name: 'ユーザーがログアウトしました',
      parameters: <String, dynamic>{
        'button_name': 'logout_button',
      },
    );
  }
}

Discussion