Google Flutter

日本システム開発株式会社からGoogle Flutterに関するコラムをお届けします。

車載システムなど豊富な組み込み領域の実績を持つ弊社から、組み込み業界でもホットなFlutterに関する情報を発信します。

日本システム開発の技術、
覗いてみませんか。

Google Flutterコラム第6回「GoogleAnalytics使ってみた」

2022.10.26

はじめに

本コラムシリーズではGoogle Flutterを使ってアプリケーションを作成してきました。

第6回では違うテーマとして2022年7月時点のGoogleAnalyticsを使ってみた内容をお届けします。

GoogleAnalyticsとは

GoogleAnalyticsはGoogleが提供している、Webページ等のアクセス状況やユーザの行動履歴などを解析できるツールです。

アクセス状況や行動履歴を解析することで、より良いコンテンツ作成のヒントが得られます。

例えば、ユーザに人気のコンテンツを調査したり、特定ページへの到達状況からページ内の経路を改善したり、 iPhoneからのアクセスが多ければiPhone向けのコンテンツを充実させたりなどです。

アナリティクスの仕組みを簡単に説明します。

Webページやアプリにアナリティクス用のイベントを送信する処理を実装します。

Googleのサーバが送信されたイベントを記録して解析を実施します。

解析には既存のテンプレートがいくつか用意されており、比較的簡単に実施できます。

◎アナリティクスを使う目的

アナリティクスを使うメリットとして、アクセス状況やユーザの行動履歴などが容易に可視化できるという点が挙げられます。

自前で実装しようとすると送信されたデータを収集して可視化する処理が別途必要となるため、なかなか大変です。

GoogleAnalyticsを使えば、テンプレートを使うだけで簡単に可視化できます。

また、異なるテンプレートを使えば複数のパターンで確認できます。

今回はアナリティクス用に作成したサンプルにGoogleAnalyticsを組み込んで解析してみようと思います。

Webページへの組み込みが一般的のようですが、アプリへの組み込みも可能です。

◎サンプルアプリ

先にサンプルアプリの構成を紹介します。Webブラウザをイメージして作成しています。

【ホームページ】

アプリ起動時に表示される初めの画面です。

検索バーと検索エンジン変更ボタン、設定ボタンがあります。

【設定画面】

各種設定を変更する画面です。リストで項目を表示しています。

今回はアカウントと検索エンジンのみ画面遷移を実施します。他の項目はアナリティクスのイベントを送るだけです。

【検索エンジン画面】

目的の画面その1です。この画面に遷移するまでの経路を解析します。このページに機能はありません。

【アカウント画面】

目的の画面その2です。この画面に遷移しているユーザ数を解析します。このページに機能はありません。

◎解析したい内容

サンプルアプリを使って3つの内容を解析してみようと思います。

どの項目がタップされているか

設定画面でどの項目がたくさんタップされているかを解析します。

解析結果から項目の検討や、表示方法を検討します。

どの経路で目的の画面に遷移しているか

検索エンジン画面に遷移する経路が2通りあります。

各経路について、どのくらいのユーザが使用しているかを解析します。

解析結果から画面遷移の改善を検討します。

アカウント画面に遷移しているか

アカウント画面にどのくらいのユーザが遷移しているかを解析します。

ほかの項目と内容が似ていますが、違った目線でも確認できるという例になるかと思います。

解析結果から画面遷移の改善を検討します。

導入

それでは、アプリにGoogleAnalyticsを導入していきます。

Google Flutterでアナリティクス機能を使用するには、firebase_analyticsというパッケージを使用します。

Firebaseとは

FirebaseはGoogleが提供している、モバイル・Webアプリケーション向けのプラットフォームです。

アナリティクスの機能も有しています。

◎Firebase設定ファイル取得

flutterアプリとFirebaseを接続するために、Firebase設定ファイルを取得、配置する必要があります。

Googleアカウントを使ってFirebaseのコンソールにアクセスし、flutterプロジェクトと紐づけます。

コンソールはこちらからアクセスできます。

Firebaseプロジェクトを作成

表示された内容に従って入力していきます。

Googleアナリティクスを有効にするかどうかを聞かれますので、有効にしてください。

設定ファイルを取得

Firebaseプロジェクトを作成すると、設定ファイルをダウンロードできるようになります。こちらを指定の場所に配置します。

今回は取得したgoogle-services.jsonを「プロジェクトフォルダ/android/app」に配置します。

gradleファイル修正

今まであまり説明しなかったのですが、ここでgradleファイルについて簡単に触れておきます。

gradleはjavaのビルド自動化ツールです。

ビルドの依存関係を管理したり、環境に応じてビルド設定を切り分けたりするそうです。

android studioでflutterプロジェクトを触っていると主に以下2つのgradleファイルを触るかと思います。

プロジェクト直下のbuild.gradleファイル
android下のbuild.gradleファイル

プロジェクト直下のファイルはプロジェクト共通の設定を記載、android下のファイルはandroid固有の設定を記載しているようです。

今回は以下のように修正します。

android/app/build.gradle

1.	apply plugin: ‘com.google.gms.google-services’

android/build.gradle

1.	#dependenciesに以下を追加する。バージョンは適宜修正
2.	classpath ‘com.google.gms:google-services:4.3.10’

パッケージ追加

次に、firebase_analyticsのパッケージを追加します。

今回pubspec.yamlへ追加したパッケージおよびバージョンは以下の通りです。

1.	dependencies:
2.	firebase_analytics: ^9.0.0

また、追加したパッケージが参照する別のパッケージのバージョンについて不具合があったため、以下のように修正しています。

こちらは導入するバージョンによっては不要になります。

1.	dependency_overrides:
2.	firebase_messaging_platform_interface: 3.1.6
3.	firebase_crashlytics_platform_interface: 3.1.13
4.	cloud_firestore_platform_interface: 5.4.13
5.	firebase_auth_platform_interface: 6.1.11
6.	firebase_storage_platform_interface: 4.0.14
7.	cloud_functions_platform_interface: 5.0.21
8.	firebase_analytics_platform_interface: 3.0.5
9.	firebase_remote_config_platform_interface: 1.0.5
10.	firebase_dynamic_links_platform_interface: 0.2.0+5
11.	firebase_performance_platform_interface: 0.1.0+5
12.	firebase_app_installations_platform_interface: 0.1.0+6

アナリティクス用コード

準備ができましたので、いよいよアプリにアナリティクス用のコードを実装していきます。

今回は以下の2種類を紹介します。

イベント送信

任意のイベント、パラメータを送信できます。

GoogleAnalyticsで準備されているイベントや、自分で作ったイベントを使用できます。

下記コードを実行することで、GoogleAnalyticsへイベントを送信できます。

1.	// アナリティクス用の変数準備
2.	FirebaseAnalytics analytics = FirebaseAnalytics.instance;
3.
4.	（中略）
5.
6.	// イベント送信したいところで以下を記載
7.	analytics.logEvent(name:“イベント名”, parameters:<String,Object>{“キー”:{“パラメータ”});

今回はボタンを押した際にそれぞれのボタン名のイベントを送信するようにします。

パラメータは不要なので省略しています。

observer

observerは画面遷移を監視する仕組みで下記関数による画面遷移を監視します。

Navigator.pushNamed
Navigator.push
Navigator.pushReplacement
Navigator.pop

上記による画面遷移時にscreen_viewというイベントを自動で送信します。

pushNamed等で画面名を設定する場合は、firebase_screenというパラメータに設定されます。

下記コードでは、4行目、5行目でアナリティクス用のインスタンスとそれに紐づくobserverを準備しています。

14行目でNavigatorの遷移を監視するためのobserverにアナリティクス用のobserverを設定します。

これで上記の遷移を実施した際に自動でイベントを送信するようになります。

1.	class MyApp extends StatelessWidget {
2.	const MyApp({Key? key}) : super(key: key);
3.
4.	static FirebaseAnalytics analytics = FirebaseAnalytics.instance;
5.	static FirebaseAnalyticsObserver observer = FirebaseAnalyticsObserver(analytics: analytics);
6.
7.	@override
8.	Widget build(BuildContext context) {
9.	return MaterialApp(
10.	title: ‘Firebase Analytics Demo’,
11.	theme: ThemeData(
12.	primarySwatch: Colors.blue,
13.	),
14.	navigatorObservers: [observer],
15.	initialRoute: MyHomePage,
16.	routes : {
17.	”MyHomePage”, (BuildContext context) =>
18.	MyHomePage(
19.	title: ‘Firebase Analytics Demo’,
20.	analytics: analytics,
21.	observer: observer,
22.	),
23.	}
24.	);
25.	}
26.	}

開発していく中で、実際にイベントが送信されているかをリアルタイムで確認したいことがあると思います。

Googleアナリティクスには「設定」タブの中に「DebugView」という機能があります。

DebugViewでデバイスを認識させるには、下記コマンドを実行します。

1.	#リアルタイムの確認を有効にする場合
2.	adb shell setprop debug.firebase.analytics.app パッケージ名
3.
4.	#リアルタイムの確認を無効にする場合
5.	adb shell setprop debug.firebase.analytics.app .none.

以下実際の画面です。タイムライン上に通知されたイベントが並んでいる様子を確認できます。