3. GA4 이벤트의 이해 및 이벤트 설정 - gtag.js 기반

3.1 구글 애널리틱스4 이벤트의 이해

• GA4에서는 이벤트가 거의 시작과 끝이라고 할만큼 이벤트가 굉장히 중요해졌다.
• 사용자의 '행동'을 이벤트로 정의하고 이벤트에 수집할 데이터를 설계해야 한다. (수집한 시점부터 수집한 데이터만을 볼 수 있다.)

이벤트 구성요소

• 이벤트라는 것은 사용자의 행동이다.
• 이벤트: 사용자가 상품을 조회했다!
• 이벤트 매개변수: 어떤 상품을 조회했는지, 그 상품의 ID는 무엇인지, 이름은 무엇인지, 카테고리는 무엇인지 등 이벤의 세부 데이터를 말함.
• 이벤트 트리거: 이벤트가 언제 실행될 것인지. 정확하게 지정하는 것이 중요함.

 

예시

• 실제로 사용할 때는 한글이 아니라 영어로 구성해야 한다.
• view_article, id, title, author, date, tags 등등...

 

---

3.2 이벤트 기획하기

1. 이벤트 수집 목표 정의하기 - 이벤트를 왜 수집하는지?

 

2. 사용자 여정을 기반으로 이벤트 설계하기

• 우리가 세운 목표에 기반해서 사용자들이 목표를 달성하려면 어떻게 움직이는지, 사용자 여정을 살펴보고 그것을 토대로 이벤트를 설계한다.
• 가장 중요한 이벤트를 먼저 생각한다.
  우리 서비스에서 중요한 이벤트(전환)를 먼저 생각하고 그 이벤트에 도달하는 과정 생각해보기

if '회원가입 프로세스에서 주로 이탈하는 구간이 어딘지 파악하고 싶어!'
가장 중요한 이벤트, 즉 전환은 회원가입 완료! 이다. 이게 목표이니까.
회원가입 완료에 해당하는 액션(이벤트)를 가장 먼저 작성하고, 회원가입 완료하는 과정을 거꾸로 생각하기

 

이벤트, 트리거 정의하기

• 회원가입의 계정 정보 입력 단계가 이벤트라면, 이 이벤트가 언제 실행될 지 시점을 정하는 게 트리거다.

이벤트 이름 규칙 지정하기

• 띄어쓰기 쓰지 않기
• 대부분 동사+명사 규칙을 사용함. 가장 추천함.

 

우선순위 지정하기

• 이벤트가 정해졌으면 세팅을 해야 하는데 (세팅을 할 때에도 작업이 계속 돌아가기 때문에) 시간이나 인력 여유가 부족한 상황이라면?
• 가장 중요한 이벤트가 먼저 세팅이 될 수 있도록 우선순위를 정해서 세팅하기
• 이벤트는 돈이다. 이벤트를 기록할 수록 비용은 올라간다.

이벤트 문서화하기

 

 

---

3.3 자동 수집 이벤트와 추천 이벤트

• 자동수집 이벤트? GA를 설치만 하더라도 자동적으로 알아서 저장되는 이벤트
• 추천 이벤트? 우리가 이벤트를 설정할 때 이렇게 이름을 짓고, '이렇게 매개변수를 넣으면 좋다'라고 추천해주는 표준이벤트

자동 수집 이벤트

https://support.google.com/analytics/answer/9234069?hl=ko

[GA4] 자동 수집 이벤트 - 애널리틱스 고객센터

• first_open : 앱 설치 또는 재설치 후 처음으로 앱을 실행할 때
• first_visit : 사용자가 웹사이트를 처음 방문하거나 애널리틱스를 사용하는 Android 인스턴트 앱을 처음으로 실행할 때
• in_app_purchase : 사용자가 Apple App Store 또는 Google Play 스토어에서 최초 구독을 포함한 인앱 구매를 완료할 때
• page_view(웹) : 페이지가 로드되거나 활성 사이트에서 브라우저 기록 상태가 변할 때
• screen_view(앱) : 화면 전환이 발생하고 다음 기준 중 하나가 충족될 때
  -- 이전에 설정된 화면이 없음
  -- 새 화면 이름이 이전 화면 이름과 다름
  -- 새 화면 클래스 이름이 이전 화면 클래스 이름과 다름
  -- 새 화면 ID가 이전 화면 ID와 다름
• session_start : 새로운 세션이 시작될 때, 사용자가 앱 또는 웹사이트에 참여할 때

 

추천 이벤트

https://support.google.com/analytics/answer/9267735?hl=ko&ref_topic=13367566&sjid=15155956565268945565-AP

[GA4] 추천 이벤트 - 애널리틱스 고객센터

• 자동으로 설정해주는 이벤트는 아니고, 직접 설정을 해야하는데 그 중에서 GA에서 '이 이벤트를 사용해보세요!'라고 권장하는 것

 

---

3.4 구글 애널리틱스4 이벤트 설정 - gtag.js 기반

https://developers.google.com/analytics/devguides/collection/ga4/events?hl=ko&client_type=gtag

이벤트 설정  |  Google Analytics  |  Google for Developers

• 구글태그 설정으로 선택

• 이 코드가 GA에서 이벤트를 설정하는 코드다.
• 모든 이벤트는 이 형태로 이루어져 있다.

 

이벤트 설정 실습

'햄버거 사이트의 [버거 메뉴 다운로드] 버튼을 클릭했을 때 이벤트를 수집하도록 한다.'

 

1.

• 우선 이벤트 이름, 이벤트 매개변수를 설정한다.

2.

• index.html body 마지막 부분에 이벤트 설정 코드 작성
• 이 상태로만 끝내면 이 이벤트가 웹사이트가 실행되자마자 실행된다.
• 따라서 해당 버튼이 클릭되었을 때 이 이벤트가 실행되게 해줘야 함

 

3.

• document.querySelector('#buger-menu') 이 코드를 추가하면 버튼 요소를 선택한 코드가 된다.

4.

• 액션 추가
• 이 buger-menu id를 가진 요소를 click했을 때 특정한 코드가 실행되도록 한다. 즉, gtag가 실행되도록 한다.
• html 파일을 저장한 뒤 netlify에 새로 업로드한다.
• GA의 DebugView에서 button_click의 액션 살펴보기.