앱을 개발하다 보면, 사용자의 사용 지표에 대해서 궁금해지기 마련이다. 기획 의도한대로 사용자가 서비스를 사용하고 있는지, 화면 별 체류시간과 이벤트는 얼마나 발생하는지. 어떤 곳에서 중도 포기하는지 등등...
현재 Flutter로 앱을 개발하고 있기 때문에, Flutter로 어떻게 이벤트를 수집하고 로그를 기록했는지 간단히 정리해보았다.
기본적인 세팅(패키지 설치, Firebase console 연동)은 되었다고 생각하고 글을 작성했습니다.
로그 기록하기
나는 아래와 같은 정보를 수집하고 싶었다.
- 연령별, 성별 별 사용자 수
- 회원가입 중도 포기율
- 화면 별 조회수 및 체류 시간
- ...
실제로 로그를 기록하는 방법은 간단하다.
import 'package:firebase_core/firebase_core.dart';
Future main() async {
...
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const ProviderScope(child: MyApp()));
}firebase_core를 이용해 앱에 초기화 코드를 추가하고,
import 'package:firebase_analytics/firebase_analytics.dart';
FirebaseAnalytics analytics = FirebaseAnalytics.instance;
analytics.logLogin();위와 같이 FirebaseAnalytics의 instance를 불러와 사용하면 끝이다.
참고
FirebaseAnalytics 클래스 문서를 보면 공통적인 이벤트를 기록할 수 있게 정의된 메서드들이 존재하는데 확인하고 사용하는 것을 추천한다. (
logLogin,logAppOpen,logSignUp,logScreenView등)정의되어 있지 않다면
logEvent()메서드를 이용해 커스텀 이벤트를 만들고 기록할 수 있다.예를 들어 친구 초대 와 관련한 커스텀 로그를 만드는데 초대 방법과 어떤 친구가 초대받았는지 알고 싶다면 아래와 같이 코드를 작성할 수 있겠다.
logEvent(name: 'invite_friend', parameters: { 'invite_method': inviteMethod, // 초대 방법(SMS, 링크 공유 등) 'friend_id': friendId // 사용자 ID });
나는 페이지마다 불러오기 번거로워 유틸리티 클래스를 별도로 만들어주었다. (아래는 로그인 로그에 대한 예시 코드이다)
import 'package:firebase_analytics/firebase_analytics.dart';
class FirebaseLogUtils {
static final FirebaseAnalytics instance = FirebaseAnalytics.instance;
static Future<void> logLogin(LoginMethod loginMethod) async {
await instance.logLogin(loginMethod: loginMethod.value);
}
...
}
enum LoginMethod {
pinCode('비밀번호'),
bioAuth('생체인증');
final String value;
const LoginMethod(this.value);
}연령, 성별은 자동으로 수집해주기 때문에 별도로 설정은 필요 없다. (다만, 수집된 데이터가 적을 때는 개인이 식별될 수 있기 때문에 해당 분포를 공개하지 않는다)
화면 조회수 및 체류시간 기록하기
여러 가지 방법이 존재하기 때문에, 프로젝트에 따라서 맞는 방법을 채택하거나 여러 방법을 같이 사용하는 것이 좋을 것 같다.
1. logScreenView 메서드 이용
logScreenView 메서드를 통해 편하게 화면 전환과 체류시간을 기록할 수 있다. (전환과 체류시간을 자동으로 추적해준다)
FirebaseAnalytics.instance.logScreenView(
screenClass: 'MyHomePage'
screenName: 'HomePage'
);커스텀이 필요하거나 수동으로 화면을 추적해야한다면 아래 코드를 이용할 수 있다고 하는데, 현재는 그럴 필요가 없어졌으니 참고 바란다. (logScreenView 내의 parameter에 값을 추가해 원하는대로 추적하고 기록할 수 있다)
// 사용하지 않아도 된다.
await FirebaseAnalytics.instance.logEvent(
name: 'screen_view',
parameters: {
'firebase_screen': screenName,
'firebase_screen_class': screenClass,
... // 파라미터 추가는 logScreenView에서도 가능
},
);Docs 에서는
logScreenView대신, deprecated 된setCurrentScreen를 사용하라고 적혀있는데setCurrentScreen메서드는 별도의 파라미터를 넣을 수 없게 되어 있어 위의 코드를 별도로 안내한 것 같다.
2. FirebaseAnalyticsObserver 이용
return MaterialApp(
...
navigatorObservers: [
FirebaseAnalyticsObserver(analytics: FirebaseAnalytics.instance)
],
);간단히, MyApp의 MaterialApp의 navigatorObservers 에 FirebaseAnalyticsObserver(analytics: instance)를 넣어주면 된다.
이렇게 넣으면 라우팅할 때 넣은 경로의 이름이 기록된다.
이 방법은 추가적으로 체류 시간도 user_engagement를 통해 화면 별로 자동으로 기록되며 확인할 수 있다.
이 때 주의할 점이 있는데, 바텀 네비게이션 바가 존재하고 아래와 같이 관리하고 있다면 실제 home, chat, healthcare, mypage 등이 보이지 않기 때문에 (1)에서 소개했던 logScreenView을 적용해야 한다.
// 아래와 같이 구성되어 있다면 (1)logScreenView 방법을 추가로 적용해야 한다.
class AppNavigator extends ConsumerWidget {
AppNavigator({super.key});
final _selectedIndexProvider = StateProvider<int>((ref) {
return 0;
});
final List<Widget> _screen = [
const HomeScreen(),
const ChatScreen(),
const HealthcareScreen(),
const MyPageScreen()
];
Widget build(BuildContext context, WidgetRef ref) {
final selectedIndex = ref.watch(_selectedIndexProvider);
...
}
}나는 아래와 같이 화면을 기록하는 함수를 추가로 만들어 어떤 화면으로 이동했는지 기록해주었다.
Future<void> _logScreenView(int index) async {
String screenName;
// 각 인덱스에 맞는 화면 이름 설정
switch (index) {
case 0:
screenName = Routes.home;
break;
case 1:
screenName = Routes.chat;
break;
case 2:
screenName = Routes.healthcare;
break;
case 3:
screenName = Routes.myPage;
break;
default:
screenName = 'Unknown';
}
await FirebaseLogUtils.logScreenView(screenName: screenName);
}이렇게, 간단히 Firebase Analytics를 사용하기 위한 준비를 마쳐보았다. 적용하시는 분들께 작은 도움이라도 되었으면 좋겠다.
틀린 점이나 궁금한 점이 있으시면 댓글이나 연락 부탁드리겠습니다. 정말 감사드립니다.
참고:
https://firebase.flutter.dev/docs/analytics/events
https://firebase.flutter.dev/docs/analytics/screenviews
https://firebase.google.com/docs/analytics/screenviews?_gl=1*l08qh*_up*MQ..*_ga*ODkwMjE3NjYzLjE3MjkwNTY1NzI.*_ga_CW55HF8NVT*MTcyOTA1NjU3MS4xLjAuMTcyOTA1NjU3MS4wLjAuMA..#dart
https://github.com/firebase/flutterfire/tree/master/packages/firebase_analytics/firebase_analytics/example
