【Flutter】iOSアプリにGoogleAnalyticsを導入する手順を紹介
FlutterにGoogleAnalyticsを導入したいが、方法がわからない。手順を教えて!
ブロガーやエンジニアの方々にはお馴染みのGoogle Analytics(以下、GA4)ですが、Webだけでなくモバイルアプリにも取り入れることができます。
筆者は元々WebでのみGA4を利用していたため、モバイルアプリでも利用できることを知りませんでしたが、モバイルアプリの開発を進める中で、それを知り、実際にFlutterに実装してみました。
今回の記事では、GA4をFlutter製のアプリに導入する手順をご紹介します。
ステップは以下の通りです。
- GoogleAnalyticsとは?
- 導入手順
最後までご覧いただき、参考にしていただけると幸いです。
(宣伝)コミュニティのお知らせ
エンジニア初学者の方がゆるく楽しく学べる場所、リアル大学生コミュニティを紹介します!
以下のような活動を通じて、メンバー同士で交流しています。
- アプリ紹介:メンバーが自身の開発物を紹介できます(開発物がなくてもOK)。
- フィードバックやアドバイス:開発物に対するフィードバックを送り合うことができます。
- ヘルプ:わからないことがあればいつでも質問可能です。
- 雑談:エンジニア関連の話題から、それ以外のことまで自由に話せます。
学生以外やエンジニア初学者以外も大歓迎です!
興味のある方は、ぜひ以下のリンクからご参加ください。お待ちしております✨
👉コミュニティに参加する
GoogleAnalyticsとは?
Google Analyticsは、Webサイトやアプリの利用状況を追跡・分析するためのツールです。
これを利用することで、ユーザーの行動、流入経路、セッションの長さなど、様々なデータを収集できます。例えば、流入者の性別や年齢、アクセス時の所在地(市区町村までであり、住所まで特定されることはありません)、使用しているデバイスや国などの情報を把握することができます。Webマーケティングなどには必須のツールです。
※知ることのできる情報は他にも色々あります。
導入手順
それでは、実際にFlutter製アプリにGA4を導入して分析を行う方法を紹介します。GoogleのFirebaseというサービスを利用して実装します。
大まかな手順は以下の通りです。
- Firebaseにログイン
- プロジェクトを作成
- Flutterに実装
それぞれ解説します。
Firebaseにログイン
まず、GoogleアカウントでFirebaseにログインし、右上の「Go to Console」をクリックして、Firebaseコンソールページに遷移してください。
プロジェクトを作成
次に、プロジェクトの作成を行います。Firebaseコンソールから「プロジェクトの作成」をクリックし、プロジェクト名を設定します。プロジェクト名は自由に設定可能です。
次に、「Google Analytics」を導入するか聞かれるので、「有効にする」を選択して次に進みます。次にGoogle Analyticsのアカウントを指定します。これはFirebaseではなくGA4を扱う際に必要なアカウントです。まだアカウントを持っていない場合は、新しく作成してください。プロジェクトの作成が完了すると、そのプロジェクトのコンソールに遷移します。
Flutterに実装
まず、先ほど開いたプロジェクトコンソールの「アプリにFirebaseを追加して利用を開始しましょう」の選択肢からiOSを選択してください。ここから実際にFlutterに実装していきます。
アプリの登録
まず、「アプリの登録」では「AppleバンドルID」と「App Store ID」を入力します。「AppleバンドルID」はXcodeのRunner Targetの設定のGeneral内のBundle Identifierから確認できます。「App Store ID」は、App Storeに公開済みであれば入力しましょう。App StoreのアプリのURLの末尾にある、idxxxxxxxxのxxxxxxxxの部分が該当します。
設定ファイルのダウンロード
次に、GoogleService-info.plistをダウンロードし、Xcodeでinfo.plistと同じ階層に設置します。
Firebase SDKの追加
Firebase SDKの追加についてはFlutterから実装します。次の手順で進めれば問題ありません。
Flutterの/iosディレクトリ内にあるPodfileのtarget 'Runner' doの中に、以下のように記述します。
target 'Runner' do
# 既存のコードはそのまま
pod 'Firebase/Analytics'
end
その後、/iosディレクトリでpod installを実行すればOKです。
初期化コードの追加
最後に、初期化コードの追加を行います。AppDelegate.swiftに以下の記述を追加してください。
import FirebaseCore // ここを追加
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
FirebaseApp.configure() // ここを追加
return true
}
// 既存のコードはそのまま
}
これで設定は完了です。このアプリにユーザーが訪れることで、GA4が機能するようになります。
GoogleAnalyticsでログイン
最後に、先ほど作成したGA4のアカウントでGoogle Analyticsにログインし、分析情報を確認できます。または、Firebaseコンソールの「Analytics Dashboard」からもデータを確認することができます。
最後に
ここまで、Flutter製のiOSアプリにGA4を導入する方法について紹介しました。GA4の導入は特別難しいわけではなく、手順に従えば比較的簡単に実装することができます。
また、今回GoogleService-info.plistを追加したことで、GA4だけでなく、さまざまなFirebaseの機能を活用できるようになりました。Firebaseで新たな機能を実装する際には、ぜひ記事にして共有したいと考えています。皆さんもぜひ挑戦してみてください。
最後までお読みいただき、ありがとうございました。