튜토리얼: Google 애널리틱스

이 가이드에서는 Google 애널리틱스를 사용하여 확장 프로그램의 사용을 추적하는 방법을 설명합니다. 앱에는 확장 프로그램과 다른 제한사항이 있으므로 플랫폼 앱을 개발하는 경우 앱용 애널리틱스를 참고하세요.

요구사항

이 가이드는 Chrome용 확장 프로그램을 작성하는 데 어느 정도 익숙해야 합니다. 확장 프로그램 작성 방법에 대한 정보가 필요한 경우 시작하기 튜토리얼을 참조하세요.

광고 확장을 추적하려면 Google 애널리틱스 계정도 설정해야 합니다. 확장 프로그램에 자체 URL이 없으므로 계정을 설정할 때 웹사이트 URL 필드의 값을 사용할 수 있습니다.

Chrome 확장 프로그램에 대한 정보가 입력된 애널리틱스 설정

추적 코드 설치하기

현재 페이지가 https:// 프로토콜을 사용하여 로드된 경우 표준 Google 애널리틱스 추적 코드 스니펫은 SSL 보호 URL에서 ga.js라는 파일을 가져옵니다. Chrome 확장 프로그램 및 애플리케이션에서는 ga.js의 SSL 보호 버전만 사용할 수도 있습니다. 안전하지 않은 HTTP를 통해 ga.js를 로드하는 것은 Chrome의 기본 콘텐츠 보안 정책에 따라 금지됩니다. 또한 Chrome 확장 프로그램이 chrome-extension:// 스키마에 호스팅된다는 점도 일반적인 추적 스니펫을 약간 수정하여 기본 위치 대신 https://ssl.google-analytics.com/ga.js에서 직접 ga.js를 가져와야 합니다.

다음은 비동기 추적 API를 위해 수정된 스니펫입니다 (수정된 줄은 굵게 표시됨).

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

또한 기본 콘텐츠 보안 정책을 완화하여 확장 프로그램에 리소스를 로드할 수 있는 액세스 권한이 있는지 확인해야 합니다. manifest.json의 정책 정의는 다음과 같습니다.

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  ...
}

다음은 외부 자바스크립트 파일 (popup.js)을 통해 비동기 추적 코드를 로드하고 단일 페이지 조회를 추적하는 팝업 페이지 (popup.html)입니다.

<!DOCTYPE html>
<html>
 <head>
   ...
  <script src="popup.js"></script>
 </head>
 <body>
   ...
 </body>
</html>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

UA-XXXXXXXX-X 문자열은 고유한 Google 애널리틱스 계정 번호로 대체되어야 합니다.

페이지 조회수 추적

_gaq.push(['_trackPageview']); 코드는 단일 페이지 조회를 추적합니다. 이 코드는 확장 프로그램의 모든 페이지에서 사용할 수 있습니다. 백그라운드 페이지에 배치되면 브라우저 세션당 한 번씩 뷰를 등록합니다. 팝업에 배치하면 팝업을 열 때마다 뷰를 한 번 등록합니다.

확장 프로그램의 각 페이지에 대한 페이지 조회 데이터를 확인하면 사용자가 브라우저 세션당 확장 프로그램과 상호작용하는 횟수를 확인할 수 있습니다.

사이트의 인기 페이지에 대한 애널리틱스 보기

분석 요청 모니터링

확장 프로그램의 추적 데이터가 Google 애널리틱스로 전송되고 있는지 확인하려면 개발자 도구 창에서 확장 프로그램의 페이지를 검사하면 됩니다 (자세한 내용은 디버깅 튜토리얼 참고). 다음 그림과 같이 모든 것이 올바르게 설정된 경우 __utm.gif 파일에 대한 요청이 표시됩니다.

__utm.gif 요청이 표시된 개발자 도구 창

추적 이벤트

이벤트 추적을 구성하면 확장 프로그램에서 사용자가 가장 많이 상호작용하는 부분을 확인할 수 있습니다. 예를 들어 사용자가 클릭할 수 있는 버튼이 3개 있는 경우

<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>

Google 애널리틱스로 클릭 이벤트를 전송하는 함수를 작성합니다.

function trackButton(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
};

그리고 각 버튼 클릭에 대한 이벤트 핸들러로 사용합니다.

var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', trackButtonClick);
}

Google 애널리틱스 이벤트 추적 개요 페이지에는 각 버튼이 클릭된 횟수에 관한 측정항목이 표시됩니다.

사이트의 이벤트 추적 데이터에 대한 애널리틱스 보기

이 접근 방식을 사용하면 확장 프로그램에서 사용률이 높거나 낮은 부분을 확인할 수 있습니다. 이 정보는 UI 재설계 또는 구현할 추가 기능에 관한 결정을 내리는 데 도움이 될 수 있습니다.

이벤트 추적 사용에 대한 자세한 내용은 Google 애널리틱스 개발자 문서를 참고하세요.

샘플 코드

이러한 기법을 사용하는 확장 프로그램 예는 샘플 저장소에서 확인할 수 있습니다.