[GA4] 이벤트 데이터 디버그뷰 (DebugView)

구글애널리틱스4 (GA4) 에는 사용 환경이 비슷한 실시간 보고서와 디버그뷰 (DebugView) 보고서가 있습니다.

이중에서 이벤트 정보 수집을 실시간으로 파악할 수 있는 디버그뷰 (DebugView) 에 관해 살펴보겠습니다.

일단, 디버그뷰의 정의를 살펴보면…

“디버그뷰(DebugView) 보고서를 사용하면 디버그 모드를 사용 설정한 기기 또는 브라우저에서 발생하는 이벤트를 모니터링 할 수 있습니다”

즉, 디버그뷰 보고서는 각종 이벤트에 대한 디테일한 정보를 실시간으로 파악할 수 있는 중요한 보고서 중 하나 입니다.

그럼, 디버그뷰 사용 설정방법 부터 알아보도록 하겠습니다.

1. 디버그뷰 (DebugView)

① GA4 메뉴 중 [구성] > [DebugView] 메뉴를 클릭하면 위와 같은 보고서를 확인할 수 있습니다.

② 분 스트림

최근 30분 동안 보관처리된 이벤트가 표시됩니다. 원의 숫자는 각 1분에 수신된 이벤트의 수를 나타내고 원 하나를 클릭하면 해당 1분 동안 기록된 이벤트가 초 스트림에 표시됩니다.

③ 초스트림

최근 60초 동안 기록된 이벤트가 표시됩니다. 해당 이벤트를 클릭하면 매개변수 목록과 사용자 속성을 확인할 수 있습니다. (⑤번 참고)

④ 인기 이벤트 및 현재 사용자 속성

인기 이벤트 표에는 30분 동안 가장 많이 기록된 이벤트가 표시됩니다. 위의 이미지에는 잘 안보이나 인기 이벤트 하단 현재 적용된 사용자 속성 표에서는 사용자 속성 세트의 최신 상태가 표시됩니다.

2. 디버그뷰 (DebugView) 설정 방법

지난번 말씀드렸던 구글 애널리틱스 4 (GA4) 설치하기에서 생성한 구글 태그 관리자 (GTM) 를 활용하여 설정하는 방법을 말씀 드리겠습니다.

2.1 구글애널리틱스4 디버거 Chrome 확장 프로그램 설치

링크를 통해 크롭 웹 스토어에 접속하시거나 또는, 구글에서 “크롬 웹 스토어” 를 검색합니다.

① “크롬 웹스토어” 를 검색하고 사이트에 방문합니다.

① “Google Analytics Debugger” 를 검색창에서 검색합니다.

① 검색결과에서 Google Analytics Debugger 를 선택합니다.

① [Chrome에 추가] 버튼을 클릭합니다.

② 확인 창에서 [확장 프로그램 추가] 버튼을 클릭합니다.

① 확장 프로그램을 설치하고 나면 아이콘이 갑자기 사라집니다. 이 때 당황하지 마시고 ①을 클릭합니다.

② 팝업 창이 나오면 Google Analytics Debugger 확장프로그램 Pin을 클릭해서 고정합니다.

③ 고정 된 Google Analytics Debugger 확장프로그램을 확인하고 클릭합니다.

④ Google Analytics Debugger 확장프로그램에 “ON” 이라는 문구가 노출됩니다. (On/Off 기능)

설치가 완료되면 웹페이지를 새로고침 합니다.

2.2 구글 태그 관리자 변수 설정

구글 태그 관리자에서 [Debug Mode] 변수를 추가해야 합니다.

① 구글 태그 관리자 (GTM) > [변수] 메뉴 클릭합니다.

② [기본 제공 변수] 화면에서 [구성] 버튼을 클릭합니다.

③ 카테고리 중 [오류] 카테고리에서 [Debug Mode] 를 체크 합니다.

① 구글 태그 관리자 (GTM) > [태그] 메뉴를 클릭합니다.

② 태그 중 전에 설정했던 GA4 Setup 태그 (GA4 구성 태그 이름이 다를 수 있습니다. 직접 만드신 태그가 있으면 해당 태그를 선택하시면 됩니다)를 클릭합니다.

① [태그 구성] 을 선택합니다. (태그 구성 박스 아무곳이나 누르셔도 됩니다)

② [태그 구성] 에서 [설정할 필드]를 클릭합니다.

③ [설정할 필드] 에서 [행 추가] 버튼을 클릭합니다.

④ [필드 이름]에서 저장된 변수를 불러오는 버튼을 클릭합니다.

① [변수 선택] 창에서 [Debug Mode] 를 선택합니다.

① [Debug Mode] 변수를 선택하면 입력박스에 ‘{{Debug Mode}}’ 가 입력됩니다.

② [값] 입력박스에는 ‘true’ 를 직접 입력합니다.

그리고, 저장 버튼을 클릭하면 태그 수정이 완료 됩니다.

2.3 디버그뷰(DebugView) 실행

2.1 에서 설치한 “Google Analytics Debugger” 확장프로그램이 “ON” 상태 인지 확인합니다.

확인 후 GA4 > [구성] > [DebugView] 를 선택합니다.

이제 웹 사이트에서 이벤트가 일어나면 DebugView에 표시되는 것을 확인할 수 있습니다.

향후, 이벤트를 새로 생성하거나 이벤트 값을 확인하고 싶으실 때 위의 순서대로 설정하시면 이벤트 값을 쉽게 확인하실 수 있으실 것입니다.

FAQ

---

---