GA4 이벤트 설정 직접 코딩 방법

GA4로 전환하면서 많은 개발자 마케터들에게 새로운 시련이 찾아왔다. 바로 기존 UA에 있던 이벤트들의 GA4로의 이전.
GA4 이벤트 설정 방법은 직접 코딩과 태그 매니저를 활용하는 두 가지 방법이 있는데 우리는 이 중 직접 코딩하는 방법에 대해 알아보도록 하겠다.

에슬레저 운동복계의 샤넬(?) 룰루레몬 웹사이트를 예시로 들어보았다.

웹사이트의 버튼 영역을 잡아서 진행해보자.

우선, 웹사이트 수정권한이 있어야 한다.

웹 또는 앱에 이벤트를 밀어 넣기 위해서는 적어도 소스코드를 수정할 수 있거나 GA서버로 데이터를 보낼 수 있어야 한다.
이런 케이스는 오늘 소개하는 방법으로는 이벤트 수정이 안되니 확인하고 진행하자.

1. G-XXXXXXXX 혹은 UA-XXXXXXXX 기입만 가능한 웹사이트

기본 코드 블럭이 잡혀있고 애널리틱스 속성 번호만 넣도록 되어 있는 사이트들이 있다. 이 경우에는 이벤트 수정이 어려울 수 있다. 특히 그누보드 기반 웹사이트들에서 가장 많이 보이는 현상 이러한 경우에는 태그 매니저를 설치해서 진행하거나 웹사이트 개발자를 통해 직접 수정하는 방식으로 진행해야 한다.

우피로 웹사이트를 만드는 경우도 당연~ 이벤트 추적은 어렵다!

 

2. 네이버 블로그, 네이버 스마트 스토어등 일부 HTML 소스 변경만 가능한 웹사이트

이미지 소스나, 위젯등으로 구현하시는 분들이 간혹 있는데 어차피 분석 능률이 떨어질뿐더러 링크에 대한 유입이나 클릭 통계 등은 다른 방법으로 구하는 것이 훨씬 경제적이다. 부가적으로는 애널리틱스 정보를 괜히 한 곳에 관리하다가 이도 저도 아닌 분석을 하게 될지도 모른다.

3. 앱인 경우

당연한 이야기일 수도 있지만, 현재 앱용 애널리틱스 코딩은 상당히 차이가 크며, 이벤트 데이터를 밀어 넣는 것 또한 안드로이드와 IOS간의 차이가 존재한다. 다만 기본적인 설치는 파이어 베이스 코드 몇 줄로 가능한 점, 파이어 베이스 자체 내의 화면 클래스 등으로도 추적이 어느 정도 용이한 점 등 구글 애널리틱스의 활용성은 매우 높은 편.

추적 코드 생김새를 다시 한번 봐야 한다.

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-H8C1GL046V');
</script>

여기서 주목해야 할 점은 gtag('    ', '    '); 의 구조.
우리가 이벤트를 보낼 때도 똑같다.

gtag('event' , 'screen_view', {
<event_params>
});

이런 이벤트를 사용하면, 페이지뷰 역할을 하는 screen view 이벤트를 GA4 서버로 보내줄 수 있다.

구글에서 다루는 예제는 여기에 파라미터를 앱 이름과 스크린 명으로 구분한다.

gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

이렇게 하면 어떻게 데이터가 집계되는지 설명해볼 수 있어야 한다.

1. 스크린뷰 이벤트가 생성
2. 파라미터로 app_name, screen_name을 생성
3. 생성된 파라미터에 값 myAppName과 Home이 배정됨.

새로운 사용자가 웹사이트 방문 -> GA4 신규 쿠키 생성 -> 이벤트 할당 ex) 스크린 뷰 -> 파라미터로 값 전달.

위의 기본적인 내용들은 GA4가 추적하고 있는 기본값으로 보고서에서 심심찮게 만나볼 수 있는 이벤트이다. 위 구조를 정확히 이해해야 아래 이어지는 버튼 클릭 이벤트를 이해할 수 있다.

실제 웹사이트에 코딩한다면?

룰루레몬에서 잡아보려고 하는 버튼 같은 경우에는 아이디가 없고 클래스 명만 있다 이런 경우에는 중복되는 엘리먼트 중에 해당하는 속성 값을 정해줘야 한다.

document.getElementsByClassName("btn btn-primary ctaButton buttonTertiary ")[0].addEventListener("click", 
function () {
  gtag("event", "main_women_new", {
	content_type: "product",
    item_id: "ICID=fy22"
  });
});

getElementsByClassName("btn btn-primary ctaButton buttonTertiary ")[0]가 가지는 의미.

룰루레몬 사이트의 여성 신제품 구매 버튼의 경우에는 고유 ID값이 없고, 클래스명으로 이루어져 있다. 주의해야할 점은 해당 클래스 또한 고윳값이 아니고 무려 13개의 버튼이 동일한 클래스로...... 되어 있기 때문에 13개 중 가장 첫 번째라는 의미에서 [0]을 붙여주어야 한다.

아무튼 위의 스크립트를 추가한다면 메인페이지에서 해당 버튼을 클릭할 때마다 main_women_new라는 이벤트 이름 안에 콘텐츠 타입과 아이템 아이디가 함께 들어가게 된다.

나는 이벤트 이름을 내 마음대로 지정했지만 구글에서 추천하는 이벤트 이름은 다음과 같다.

add_payment_info
add_shipping_info
add_to_cart
add_to_wishlist
begin_checkout
earn_virtual_currency
generate_lead
join_group
level_end
level_start
level_up
login
post_score
purchase
refund
remove_from_cart
search
select_content
select_item
select_promotion
share
sign_up
spend_virtual_currency
tutorial_begin
tutorial_complete
unlock_achievement
view_cart
view_item
view_item_list
view_promotion

공식 문서에는 사용상황 및 파라미터에 대한 부분도 제대로 정의되어 있기 때문에 위 이벤트 중 유사한 이벤트를 활용할 계획이 있다면 아래의 문서를 확인하자.

https://developers.google.com/analytics/devguides/collection/ga4/reference/events#add_to_cart

Google 애널리틱스 4 이벤트  |  Google 애널리틱스 4 속성  |  Google Developers