구글 애널리틱스 4 (GA4) 맞춤 커스텀 이벤트 설정시 gtag를 사용하는 방법

 지난 포스팅에서 구글애널리틱스 4 (GA4) 보고서 수명주기 메뉴별 의미 대해 알아보았습니다. 

이번 포스팅에서는 GA4 이벤트 설정 방법에 대해 알아보고 설정한 이벤트에 대해 추적하는 방법에 대해 알아봅니다. 애널리틱스의 모든 데이터는 기본적으로 추적코드(Google Analytics Tracking Code, GATC)를 통해 수집됩니다. 추적코드는 페이지가 조회될 때마다 실행이 되기 때문에 페이지 로드가 없으면, 추적코드의 실행도 없고, 데이터의 수집도 없습니다.  구글 애널리틱스4 계정(GA4 추적ID)이 없다면 구글 애널리틱스 4 (GA4) 계정 생성 및 속성 생성하는 방법 포스팅을 참고하여 생성하세요.

구글 애널리틱스에서 이벤트란? 

애널리틱스 고객센터에서 보면 이벤트란 ‘웹페이지 로드와는 별개로 추적할 수 있는 콘텐츠와 사용자의 상호작용’을 말합니다. 다운로드, 링크 클릭, 양식 제출, 동영상 재생 등은 모두 이벤트로 분석할 수 있는 액션들입니다. 이벤트를 측정하기 위해 gtag()를 사용합니다. 미리 설정된 카테고리와 라벨이 있는 기본 Google 애널리틱스 이벤트를 사용해야 합니다.  gtag는 구글 애널리틱스는 분석에 필요한 방문자 데이터를 수집하기 위해 자바스크립트로 된 추적코드(Google Analytics Tracking Code)를 사용합니다. 구글 태그매니저와는 개념이 다릅니다. 구글 애널리틱스는 추적 코드를 ga.js > analytics.js > gtag.js 로 업그레이드 해왔습니다

맞춤 이벤트 만드는 방법

1. 이벤트 코드를 직접 추가 하는 방법

2. 구글 태그 관리자를 이용하는 방법

이벤트 코드를 직접 추가(gtag) 하는 방법

첫번째는 GA4가 제공하는 이벤트 추적 코드(스니펫)를 웹페이지 소스에 직접 추가하는 방법입니다. 이 방법을 사용하려면 html 문서의 수정 권한이 있어야 하고 html 및 자바스크립에 대한 기본 지식이 있어야 합니다.

글로벌 사이트 태그(gtag)는 구글에서 제공하는 사이트 측정, 전환 추적 및 리마케팅 제품을 위한 추적(tracking) 라이브러리입니다. 

Google 애널리틱스 4 속성(gtag.js)을 사용하기 위해서는 Google 애널리틱스 4 속성(gtag.js)을 스크립트를 내 웹사이트(블로그 등)에 추가해 주어야 동작하게 됩니다. 만약 설치하지 않은 경우 혹은 설치여부 확인이 필요한 경우 구글 애널리틱스 4 (GA4) 추적코드를 웹사이트( 블로그 등)에 연동(설치) 하는 방법 포스팅을 참고하세요.

이벤트는 다음과 같이 gtag()라는 event명령어를 사용하여 이벤트 데이터를 전송합니다. 

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

<event_name> 이란?

자동 이벤트 또는 맞춤 이벤트 중에 하나로 값을 설정할 수 있습니다. 맞춤 이벤트는 사용자가 비즈니스 목적에 따라 임으로 추가한 이벤트를 의미합니다.

<event_params>는?

하나 이상의 매개변수-값 쌍이며, 각 쌍은 쉼표로 구분됩니다.

다음 event 명령어는 두 매개변수(app_name 및 screen_name)를 사용하여 추천 이벤트 screen_view를 실행합니다.

다음 event 명령어는 두 매개변수(app_name 및 screen_name)를 사용하여 추천 이벤트 screen_view를 실행합니다. 

gtag('event', 'screen_view', {  'app_name': '카카오톡', 'screen_name': 'Home'} );

이벤트 전송 방법

웹페이지에서 Google 애널리틱스 이벤트를 전송하려면 아래와 같은 gtag.js event 명령어를 사용합니다. <category> 또는 <label>를 생략할 수 있으며, 생략시 "(not set)"의 기본값으로 설정됩니다.

 gtag('event', <action>, {

  'event_category': <category>,

  'event_label': <label>,

  'value': <value>

});

Google 애널리틱스 4는 추가 구성 없이 기본적으로 여러 이벤트를 자동으로 추적합니다 . 웹 속성 추적과 관련된 이러한 이벤트 중 일부는 다음과 같습니다.

add_payment_info, add_to_cart, add_to_wishlist, begin_checkout, checkout_progress, generate_lead, login, purchase, refund, remove_from_cart, search, select_content, set_checkout_option, share, sign_up, view_item, view_item_list, view_promotion, view_search_results

이벤트 액션(Event name) 값으로 purchase를 입력하면 ecommerce란 카테고리 값이 자동으로 적용되며, sign_up이란 액션 값을 입력하면 카테고리 값으로 engagement가 적용됩니다.

일반적으로 이벤트 액션 값만으로는 이벤트 유형을 우리가 원하는 대로 분류하기 어렵기 때문에 카테고리, 액션, 라벨 세 가지 항목을 모두 사용하는 것을 권장합니다.

참고로 내장 이벤트는 <category>, <label>, <value>를 사용하지 않습니다. 이러한 이벤트를 전송할 때는 올바른 키를 사용해야 합니다.

이론적인 내용으로는 잘 이해되지 않는 부분들이 발생합니다.  이해도를 높이기 위해 다음의 예를 통해 하나씩 알아봅니다.

내 웹사이트(블로그)에 이벤트 설정해보기

현재 보고 계신 웹사이트에서 우측에 "블로그 보관함" 의 6월 2023(글수) 클릭시 이벤트 설정 방법을 예로 테스트를 해봅니다.

1. 6월 2023(글수) 위에 마우스 커서를 올리고 마우스 오른쪽 버튼을 클릭합니다. (구글 크롬브라우저 기준)

2. 팝업메뉴가 나타나면, 아래쪽에 "검사" 메뉴를 선택하세요.

3. 개발자 도구창이 나타나고, 검색 버튼에 대한 HTML 태그를 확인할 수 있습니다.

위 개발자 도구에서 본 부분의 html 태그 부분입니다.

<li class='archivedate'>

        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)

</li>

이 태그부분에 아래와 같이 이벤트 정보를 추가해봅시다.

<li class='archivedate'>

        <a expr:href='data:i.url' onclick="gtag('event', '블로그 보관함 클릭', {'event_category' : '2023년 6월', 'event_label' :'눌렀어'});">

          <data:i.name/>

        </a> (<data:i.post-count/>)

</li>

4. 구글 블로그에 로그인 후 왼쪽 메뉴에서 "테마"를 선택합니다.

5. "맞춤설정" 버튼을 클릭 후 HTML 편집 메뉴를 클릭합니다.

6. HTML태그 편집기가 열리면 "archivedate" 이름으로 검색하여 해당 HTML 태그 위치를 찾아서 추가해줍니다.

7. 우측 상단 디스켓 모양의 아이콘을 눌러 "저장"합니다.

8. 테스트를 위해 새로운 창에서 내 웹사이트(블로그)를 띄운 후 6월 2023(8) 을 3회 클릭해주었습니다. 태그에 보면 onclick 이벤트가 추가된 것이 보이죠??

이제 블로그에서 검색 버튼이 클릭 될 때마다 해당 이벤트 정보가 수집 됩니다. 실시간으로 확인이 가능합니다. 그럼 구글 애널리틱스 보고서에 확인을 해봐야겠죠? 

애널리틱스 보고서 이벤트 데이터 보는 방법

이벤트 보고서를 보는 방법은 다음과 같습니다.

1. Google 애널리틱스에 로그인합니다.

2. 왼쪽 메뉴에서 보고서를 클릭합니다.

3. 실시간 메뉴를 클릭합니다.

4. "블로그 보관함 클릭" 이라는 이벤트 이름을 확인합니다.

5. "블로그 보관함 클릭"을 클릭해보세요. 그런다음  이벤트 매개변수 키 중에 설정했던 "event_category, event_label" 을 클릭해보시면 우리가 설정한 값을 확인할 수 있습니다.

오늘은 구글애널리틱스 4 (GA4) 맞춤(커스텀) 이벤트 설정시 사용하는 방법 중에 첫 번째로  gtag를 사용하는 방법에 대해 알아보았습니다. 다음 포스팅에서는 맞춤(커스텀) 이벤트 설정시 구글태그관리자를 이용하여 설정하는 방법에 대해 알아봅니다.

[REFERENCE]

• Google 애널리틱스 이벤트 측정
• Google Tag API 참조

Share this

마케터