[플러터, 애널리틱스] flutter로 만든 안드로이드 앱 analytics 연결하기

애널리틱스는 안드로이드나 iOS 앱을 만들고 유저들이 어떤 행동을 하는지 알 수 있게 하여 앱을 더 발전 시킬 수 있게 해주는 서비스 입니다.

 

이 애널리틱스(analytics)를 이용하면 사용자들이 어떤 부분을 많이 이용하고 어떤 기능을 잘 쓰지 않는지 파악 할 수 있어 앱 개발에 집중할 부분을 파악할 수 있게 해주는 유용한 서비스 입니다. 

이번에는 플러터(Flutter)를 이용해서 파이어베이스 애널리틱스를 연결하고 사용하는 법을 간단하게 살펴 보겠습니다. 

 

목차

1. go_router(고라우터)와 애널리틱스(analytics) 연결하기: FirebaseAnalyticsObserver

2. 유저가 버튼을 누르면 어떤 버튼 눌러는지 알아보기: logEvent

---

사용전 main.dart 기본 설정하기

애널리틱스 사용 전 main.dart에 main함수에 아래와 같이 코드를 수정해야 합니다. 

1. WidgetsFlutterBinding.ensureInitialized();

2. await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

두 줄을 추가하면 기본 세팅은 끝입니다. 

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

---

Go_router와 애널리틱스 연결하기

go_router에 애널리틱스를 연결하면 사용자가 어떤 스크린(화면)에 많이 머무르는지 알수 있습니다. 

기본적으로 애널리틱스를 사용하기 위해서는final analytics = FirebaseAnalytics.instance 이 코드가 시작입니다. 

 

GoRouter에 observers:[FirebaseAnalyticsObserver(analytics: analytics)] 이것만 추가해주면 됩니다. 

 

GoRoute에 name 파라메터는 필수

GoRoute에 name를 넣어야 현재 페이지의 이름이 애널리틱스로 보이게 됩니다. 

전체코드

final analytics = FirebaseAnalytics.instance

final router = GoRouter(initialLocation: "/",

      observers: [FirebaseAnalyticsObserver(analytics: analytics)],
      routes: [
    GoRoute(
        name: "home",
        path: "/",
        builder: (_, state) => const MemoListView(),
        routes: [
          GoRoute(
              name: "folder",
              path: "folder",
              builder: (_, state) {
                return const CategoryScreen();
              }),
          GoRoute(
              name: "write",
              path: "write",
              builder: (_, state) {
                return WriteScreen();
              }),
          GoRoute(
              name: "edit",
              path: "edit",
              builder: (_, state) {
                final memo = state.extra as Memo;
                return WriteScreen(memo: memo);
              }),
          GoRoute(
              path: "search",
              name: "search",
              builder: (_, state) {
                return SearchScreen();
              }),
          GoRoute(
              path: ":category",
              name: "category",
              builder: (_, state) {
                return MemoListView(title: state.pathParameters["category"]);
              }),
        ]),
  ]);

---

유저가 버튼을 누르면 어떤 버튼 눌러는지 알아보기: logEvent  

플러터의 애널리틱스 패키지에는 사람들이 자주 사용하는 이벤트은 이미 메소드로 만들어 두었습니다. 하지만 저는 그냥 단순히 어떤 버튼을 눌렀고 그 버튼을 눌렀을때 간단한 파라미터 값을 받아오는 방법인 logEvent  메소드를 사용해 보겠습니다. 

 

간단하게 저장하기 버튼을 눌렀을때 CLICK_SAVE와 어떤 내용을 적었는지 받아오도록 해보겠습니다. 

전체 코드

FirebaseAnalytics.instance.logEvent(
	name: "CLICK_SAVE",
	parameters: {"contents": contents, "category": category});

 

자주 사용하는 기능들은 이미 만들어져 있어서 가령 logAddToCart 메소드를 이용해서 장바구니에 담는 이벤트를 전송할 수도 있으니 확인해보시면 좋을거 같습니다. 

---

디버그뷰(DebugView) 사용법

마지막으로 애널리틱스가 잘 작동하는지 알아보는 방법인 디버그뷰 사용법은 아래 링크로 가셔서 패키지 네임이라는 곳에 플러터 패키지 이름을 적고 프로젝트 경로의 터미널에 넣고 엔터 치시면 디버그 뷰를 사용 하실수 있습니다.  

 

- 디버그 뷰 사용 하기 : PACKAGE_NAME에 만드신 패키지 이름을 넣으시면 됩니다. 

adb shell setprop debug.firebase.analytics.app PACKAGE_NAME

- 디버그 뷰 사용 중지 :

adb shell setprop debug.firebase.analytics.app .none.

 

https://firebase.google.com/docs/analytics/debugview#android

디버깅 이벤트  |  Google Analytics for Firebase

---

여기 나온 내용은 공식문서를 참조하여 작성하였습니다. 

 

https://firebase.google.com/docs/analytics?hl=ko 

Google Analytics for Firebase