티스토리 뷰
목적
프로젝트 중인 서비스에는 사용자들이 콘텐츠를 다른 사람과 쉽게 공유할 수 있는 공유 버튼이 있다.
앱에서 이 버튼을 누르면 공유되는 링크 끝에 tab=app이라는 값이 붙도록 설정했고 이 링크를 클릭하면 앱과 비슷한 형태의 웹 페이지가 열린다.
앱을 설치하지 않은 사용자가 이 링크를 받아서 다시 다른 사람에게 공유할 경우엔 tab=web이라는 값이 붙은 링크가 공유되도록 설정했다.
공유된 링크가 어떤 환경(앱 or 웹)에서 만들어졌는지 구분해서 사용자들이 앱과 웹 중 어디에서 더 활발하게 공유하는지 파악하고 싶었다.
Google Analytics를 통해 이벤트 데이터를 수집하여 tab=web과 tab=app 값에 따라 사용자의 공유 행동을 분석해보자.
이 글에서 실시간으로 디버깅하면서 GA에 이벤트가 제대로 수집되는지 확인하는 방법을 공유하겠다.
실시간 디버깅 과정을 보기 전, 한국어로 설정하고 싶거나 GA 도입해야 한다면 이전 글을 참고해주세요 : )
2025.03.31 - [기술 스택/Etc] - Google Play Console 한국어 설정하기
2025.03.16 - [기술 스택/Tool] - [Google Analytics] 구글 애널리틱스 도입 + 추적코드 설치
1. 관리자 페이지 이동
Google Analytics에 로그인 후 홈 화면에서 왼쪽 하단의 관리 메뉴 클릭
2. 맞춤 정의(Custom Definitions)
2-1. 속성 설정 > 데이터 표시 > 맞춤 정의(Custom Definitions) 이동
2-2. 맞춤 측정기준 만들기
2-3. 새 맞춤 측정기준
목적에 맞게 내용을 작성한다.
필자는 아래와 같이 작성했다.
ex.
측정기준 | share_source |
범위 | 이벤트 |
설명 | 공유 출처(app/web) |
이벤트 매개변수 | share_source |
코드에서 전송하는 매개변수 이름(share_source)과 GA 맞춤 측정기준에서 등록한 이벤트 매개변수(share_source)가 일치해야 한다.
설정을 정확히 해야 GA에서 share_source 매개변수 값을 기반으로 데이터를 수집한다.
gtag('event', 'share', {
share_source: 'web',
url: modifiedUrl,
});
3. Google Analytics Debugger 설치
https://chromewebstore.google.com/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna
Google Analytics Debugger - Chrome 웹 스토어
Prints useful information to the JavaScript console by enabling the debug version of the Google Analytics Javascript.
chromewebstore.google.com
설치 후 확장 프로그램에 고정해두었다. Debugger 아이콘을 한번 클릭하면 ON이 표시되면서 디버그가 활성화된다. (한번 더 누르면 디버그 비활성화)
4. 브라우저에서 디버그 모드 활성화
GA는 URL의 debug_mode=true 쿼리 파라미터를 감지하여 자동으로 디버그 데이터를 전송한다.
브라우저에서 웹페이지를 열고 URL 끝에 ?debug_mode=true를 추가한 뒤 페이지를 새로고침한다.
콘솔에 아래와 같이 뜬다면 실시간으로 디버깅이 잘 되고 있다는 뜻이다.
5. 브라우저 콘솔에서 네트워크 요청 확인
공유 버튼을 클릭하면 요청 성공 시 아래처럼 매개변수가 포함된다.
en: share
ep.share_source: web
ep.url: ...
6. DebugView 데이터 확인
DebugView에서 share 이벤트가 표시되고 share_source 값도 "web"으로 잘 전송되고 있다!
참고
https://trend21c.tistory.com/2290
https://like-or-like.tistory.com/6
추가) 탐색(Explore) 보고서
데이터를 보고하기 위해 좋은 방법은 탐색 분석을 사용하는 것이다.
왼쪽 메뉴에서 '탐색' 클릭 후 비어 있음 클릭
변수에서 '+' 버튼을 클릭하여 측정기준, 측정 항목 추가
변수에 추가된 측정기준 및 항목을 드래그하여 행과 값을 추가한다.
'기술 스택 > Tool' 카테고리의 다른 글
[Google Analytics] 구글 애널리틱스 도입 + 추적코드 설치 (0) | 2025.03.16 |
---|---|
[DBeaver] DBeaver에 AWS RDS 연결하기 (5) | 2024.10.09 |
[DBeaver] DBeaver 설치하기(for macOS) (0) | 2024.05.02 |
[Eclipse] 이클립스에 코틀린 셋팅하기 (0) | 2024.05.02 |
[Eclipse] 이클립스 설치하기(for macOS) (0) | 2024.05.02 |
- Total
- Today
- Yesterday