이 도움말에서는 Google 애널리틱스 4 속성에 대해 설명합니다. 2023년 7월 1일(애널리틱스 360 속성의 경우 2023년 10월 1일)부터 데이터 처리가 중단되는 유니버설 애널리틱스 속성을 아직 사용하고 있다면 유니버설 애널리틱스 섹션을 참고하세요.

[GA4] 이벤트 설정하기

이벤트를 통해 웹사이트나 앱에서 추가 정보 수집하기

Google 애널리틱스에서는 웹사이트에서 전체 사이트 태그 또는 태그 관리자 스니펫을 설정할 때, 앱에서 Firebase용 Google 애널리틱스 SDK를 설정할 때 일부 정보를 기본 수집합니다. 수집하려는 추가 정보가 있다면 추천 또는 맞춤 이벤트를 설정하세요.

이 도움말에서는 Google 애널리틱스에서 내 비즈니스에 도움되는 정보를 추가할 수 있도록 웹사이트나 앱에서 이벤트를 설정하는 방법을 다룹니다. 기존 이벤트를 수정하려면 사용자 인터페이스를 통해 이벤트를 수정하고 만들기를 참고하세요.

이벤트 설정하기

맞춤 이벤트를 설정하는 동안 이벤트 이름의 대소문자를 구분해야 합니다. 이름의 대소문자가 다르게 적용된 2개의 이벤트가 있으면 2개의 개별 이벤트로 인식됩니다.

아래 드롭다운에서 이벤트를 설정하는 방법에 대해 알아보세요.

전체 사이트 태그(웹사이트)

이벤트 구성 방식

내 웹사이트에 전체 사이트 태그를 추가하면 Google에서는 해당하는 웹사이트 코드에 포함된 모든 이벤트를 처리합니다. 모든 전체 사이트 태그 이벤트의 구조는 다음과 같습니다. 자세한 내용은 전체 사이트 태그 API 참조에서 확인하세요.

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

이벤트에는 다음 부분이 포함됩니다.

  • <event_name>은 추천 또는 맞춤 이벤트의 이름입니다.
  • <event_params>는 한 쌍 이상의 매개변수 값이며, 각 값은 쉼표로 구분됩니다.

예를 들어 다음 이벤트인 screen_view 이벤트에는 두 개의 매개변수가 포함됩니다.

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

내 웹사이트에 이벤트를 배치하는 위치

모든 전체 사이트 태그 이벤트는 자바스크립트 방식으로 전송됩니다. 표준 HTML 웹사이트를 사용하는 경우라면 <script> 태그 내에서 원하는 위치에 이벤트를 추가할 수 있습니다.

예를 들어 아래와 같이 HTML 웹사이트가 있는 경우 다음 위치에 <script> 태그를 추가하고 <script> 태그 안에 이벤트를 추가할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <!--  태그가 여기에 삽입됨 -->
    
    <title>페이지 제목</title>
</head>
<body>
    <!-- 사이트에서 사용자에게 표시되는 부분 -->
    <script>
        <!-- 여기에 전자상거래 이벤트를 배치할 수 있음 -->
    </script>
</body>
</html>

이벤트 전송 시점 수정하기

모든 이벤트는 자바스크립트 방식으로 작성되므로 이벤트에 자바스크립트를 추가로 적용하여 이벤트의 전송 시점과 방식을 바꿀 수 있습니다. 예를 들어 사용자가 '장바구니에 추가' 버튼을 클릭할 때 이벤트를 전송하려면 다음 과정을 진행하세요.

1단계: ID가 포함된 버튼 추가하기

예를 들어 addToCart ID를 추가하면 사용자가 버튼을 클릭할 때 이벤트를 전송할 수 있습니다.

<button id="addToCart">장바구니에 추가</button>

2단계: 이벤트 핸들러에서 이벤트 래핑하기

이 코드는 ID로 버튼을 식별한 다음 사용자가 버튼을 클릭할 때 함수를 트리거합니다. 함수에 이벤트를 배치하면, 버튼이 클릭될 때만 이벤트가 트리거됩니다. 버튼과 getElementById() 메서드에 동일한 ID를 사용하는 동안은 내 사이트의 모든 버튼에 이 단계를 적용할 수 있습니다.

document.getElementById("addToCart").addEventListener("click", function () {

  gtag("event", "add_to_cart", {
    currency: "USD",
    value: 7.77,
    items: [
      {
        item_id: "SKU_12345",
        item_name: "Stan and Friends Tee",
      }
    ]
  });

});

참고: 향상된 측정과 함께 제공되는 기능 외의 스크롤 활동을 측정하려면, Google 태그 관리자에서 스크롤 심도 트리거를 사용하세요. 전체 사이트 태그를 사용하여 맞춤 스크립트를 작성하는 방식은 지양하는 것이 좋습니다.

Google 태그 관리자(웹사이트)

내 웹사이트에 태그 관리자 스니펫을 추가하고 Google 애널리틱스 4 구성 태그를 만든 다음 이벤트용 Google 애널리틱스 4 이벤트 태그를 만드세요.

Google 애널리틱스 4 이벤트 태그를 만들려면 다음 단계를 따르세요.

  1. Google 태그 관리자에서 태그 > 새로 만들기를 클릭합니다.
  2. 태그 구성 > Google 애널리틱스: GA4 이벤트를 클릭합니다.
  3. 구성 태그에서 'Google 애널리틱스 4 구성' 태그를 선택합니다.
  4. 이벤트 이름에서 해당 이벤트 이름을 입력합니다(예: view_item_list).
  5. 이벤트 매개변수에서 각 이벤트 수준 매개변수용 행을 추가합니다.

    이벤트 수준 매개변수는 items 배열(예: view_item_list 이벤트에서 item_list_iditem_list_name 매개변수) 외의 이벤트 내에 포함되는 매개변수입니다.

  6. 컨테이너를 저장하고 게시합니다.

예를 들어 사용자가 버튼을 클릭하는 경우에 이벤트를 트리거하려면 트리거 만들기를 한 다음 Google 애널리틱스 4 이벤트 태그에 트리거를 추가합니다.

Firebase용 Google 애널리틱스(모바일 앱)

Firebase용 Google 애널리틱스 SDK를 설치한 다음 Firebase 문서를 참고하여 모바일 앱용 이벤트를 설정하는 방법에 대해 알아보세요.
Firebase용 Google 애널리틱스 SDK가 이미 설치된 경우 내 앱에 태그 관리자를 추가하면 태그 관리자 내에서 이벤트와 매개변수를 원격으로 구성할 수도 있습니다.

실시간으로 구성 확인하기

보고서와 탐색 분석이 전자상거래 데이터로 채워지는 데 최대 24시간이 걸릴 수 있습니다. 반영될 때까지 디버그 모드를 사용 설정하여 이벤트를 올바르게 설정했는지 확인할 수 있습니다. 디버그 모드를 사용 설정하면 DebugView 보고서를 통해 내 데이터를 실시간으로 확인할 수 있습니다.

도움이 되었나요?
어떻게 하면 개선할 수 있을까요?
검색
검색어 지우기
검색 닫기
Google 앱
기본 메뉴
도움말 센터 검색
true
69256
false