티스토리 뷰

목적

프로젝트 중인 서비스에는 사용자들이 콘텐츠를 다른 사람과 쉽게 공유할 수 있는 공유 버튼이 있다.
앱에서 이 버튼을 누르면 공유되는 링크 끝에 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) 보고서

데이터를 보고하기 위해 좋은 방법은 탐색 분석을 사용하는 것이다.

왼쪽 메뉴에서 '탐색' 클릭 후 비어 있음 클릭

 

 

 

변수에서 '+' 버튼을 클릭하여 측정기준, 측정 항목 추가

 

 

 

변수에 추가된 측정기준 및 항목을 드래그하여 을 추가한다.

 

 

 

 

 

Total
Today
Yesterday