이벤트 설정

이벤트를 통해 웹사이트 또는 앱에서 사용자 상호작용을 측정할 수 있습니다. 예를 들어 사용자가 페이지를 로드하고, 링크를 클릭하고, 구매하는 경우를 측정할 수 있습니다. Google 애널리틱스는 이벤트의 데이터를 사용하여 비즈니스에 대한 정보가 포함된 보고서를 만듭니다. 자세히 알아보기

이 가이드에서는 Google 태그(gtag.js) 또는 Google 태그 관리자를 사용하여 웹사이트에 추천 이벤트 및 맞춤 이벤트를 설정하는 방법을 설명합니다. 자동 수집 이벤트 및 향상된 측정 이벤트는 설정할 필요가 없습니다.

대상

Google 애널리틱스를 설정한 후 보고서에 데이터가 표시되기 시작하지만 애널리틱스에서 자동으로 수집되는 정보 외에 추가로 정보를 수집하거나 애널리틱스의 특정 기능을 사용하려는 경우


시작하기 전에

이 가이드에서는 다음 작업을 완료했다고 가정합니다.

또한 다음 권한이 있다고 가정합니다.

  • 웹사이트 소스 코드에 대한 액세스 권한
  • Google 애널리틱스 계정에 대한 편집자 역할

이벤트 설정

gtag.js API를 사용하여 Google 애널리틱스로 이벤트를 전송합니다. API에는 gtag()라는 하나의 함수가 있으며 Google 애널리틱스로 이벤트를 전송할 때마다 다음과 같은 문법을 사용합니다.

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

이 예에서 gtag() 함수에는 다음이 포함됩니다.

  • Google에 이벤트를 전송한다고 알리는 event 명령어
  • 추천 또는 맞춤 이벤트의 이름
  • (선택사항) 이벤트에 대한 추가 정보를 제공하는 매개변수의 모음

예를 들어 다음은 매개변수가 두 개 있는 screen_view라는 추천 이벤트입니다.

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

JavaScript에 이벤트 추가

gtag()는 JavaScript 함수이므로 웹페이지의 JavaScript에 함수를 추가해야 합니다. 예를 들어 <script> 태그 또는 HTML 페이지로 가져오는 별도의 JavaScript 파일에 함수를 추가할 수 있습니다.

Google 태그 스니펫 아래 어디서나 JavaScript에 이벤트를 추가할 수 있습니다. Google에서는 Google 태그 스니펫 위에 삽입한 이벤트의 데이터를 처리하지 않습니다. 예를 들어 다음 샘플 코드에는 <script> 태그 내에 screen_view라는 이벤트가 포함되어 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

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

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the page</title>
</head>
<body>
    <p>Welcome to my website!</p>
    
    <script>
      /**
      * The following event is sent when the page loads. You could
      * wrap the event in a JavaScript function so the event is
      * sent when the user performs some action.
      */
      gtag('event', 'screen_view', {
        'app_name': 'myAppName',
        'screen_name': 'Home'
      });
    </script> 
</body>
</html>

버튼 클릭 또는 기타 사용자 작업을 기반으로 이벤트를 전송하려면 이벤트에 JavaScript를 추가하세요.

애널리틱스에서 이벤트 보기

실시간 및 DebugView 보고서를 사용하여 이벤트와 매개변수를 볼 수 있습니다. 보고서를 사용하려면 DebugView 보고서에 추가 구성이 필요합니다. 이 두 보고서에서는 이벤트가 트리거될 때 사용자가 웹사이트에서 트리거한 이벤트를 보여줍니다.

다음 단계