이벤트를 통해 웹사이트 또는 앱에서 사용자 상호작용을 측정할 수 있습니다. 예를 들어 사용자가 페이지를 로드하고, 링크를 클릭하고, 구매하는 경우를 측정할 수 있습니다. 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 보고서에 추가 구성이 필요합니다. 이 두 보고서에서는 이벤트가 트리거될 때 사용자가 웹사이트에서 트리거한 이벤트를 보여줍니다.
다음 단계
- 이벤트에 더 많은 정보를 추가하도록 이벤트 매개변수 설정
- 이벤트를 전환으로 표시