[Flutter] GA4 디버깅하기

Flutter 프로젝트에 GA4 이벤트를 잘 만들어보셨나요?

이번 글에서는 프로젝트에 심은 GA4 코드가 제대로 데이터를 수집하고 있는 지 확인하는 방법을 알려드리려고 합니다.

Firebase와 GA4 사이트는 각각 DebugView기능을 제공합니다.

둘 중 원하는 곳에 접속한 후, 아래 내용을 따라 디버깅 세팅을 해주시면 됩니다.

디버깅 세팅하기

1. adb(안드로이드 디버그 브릿지) 설치하기

adb(Android Debug Bridge)는 안드로이드 기기와 컴퓨터를 연결해 디버깅 및 다양한 명령을 전송할 수 있는 도구입니다. Android Studio 속 시뮬레이터를 Firebase/GA4 사이트에 연결하기 위해 adb설치가 필요합니다.

이 글에서는 homebrew를 활용해서 adb를 설치하려고 합니다.

1. Homebrew 설치: 아직 Homebrew가 설치되어 있지 않다면, 먼저 설치해야 합니다. macOS 터미널을 열고 다음 명령어를 실행하여 Homebrew를 설치하세요.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

1. adb 설치: 터미널에서 다음 명령어를 실행하여 adb를 설치해주세요

brew install android-platform-tools

1. adb 설치 확인: 해당 명령어를 실행하여 adb 버전 정보가 표시되는지 확인해보세요

adb version 

버젼 정보가 정상적으로 표시된다면, adb를 성공적으로 설치하신 겁니다.

2. 디버그 모드 사용 설정

다음 명령어에서 패키지이름 부분을 자신의 패키지 이름으로 바꾼 후 터미널에서 실행하시면 디버그 모드가 설정됩니다.

adb shell setprop debug.firebase.analytics.app 패키지이름

이 상태는 다음 명령어를 실행하여 디버그 모드를 사용 중지할 때까지 유지됩니다.

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

3. 시뮬레이터 실행하기

시뮬레이터를 실행하고 중지 버튼 왼쪽의 버그 모양 버튼을 누릅니다.

디버그 모드가 2번에서 제대로 이루어졌다면, 이 창에 com.패키지이름이 보일 것입니다.

이것을 선택하고, OK를 주르면 Firebase/GA4 속 DebugView에 시뮬레이터가 연결됩니다.

디버깅하기

앞선 과정을 잘 수행했다면, 이렇게 시뮬레이터에서 했던 활동들이 DebugView를 통해 보여지는 것을 확인할 수 있습니다.

시뮬레이터 화면과 DebugView를 번갈아 보며, 각 기능에 심은 GA4코드가 제대로 작동하는 지 시험해보시면 됩니다.

참고로 DebugView에 시뮬레이터에서 한 행동이 표시되기 까지는 10초에서 30초까지도 걸릴 수 있습니다.

마무리

만약 안드로이드가 아닌, iOS에서 디버깅이 필요하신 분은 해당 링크를 확인해보시면 될 것 같습니다.

디버깅 이벤트  |  Firebase용 Google 애널리틱스

이번 게시물에서는 adb를 활용하여 디버깅하는 방법을 알아보았습니다.

이후 페이지 추적 방법, 사용자 ID에 대해서도 이어서 소개해드릴게요!