구글 애널리틱스 튜토리얼

이 튜토리얼은 여러분이 만든 확장 프로그램의 사용패턴을 추적하기 위해 구글 애널리틱스를 사용하는 방법을 설명합니다. 만약 ‘크롬 앱’을 개발했다면 Analytics for Apps를 봐주세요. 크롬 확장 프로그램과는 규정이 조금 다릅니다.

사전준비

이 튜토리얼은 여러분이 크롬 확장 프로그램에 익숙하다고 가정하고 있습니다. 만약 확장 프로그램 개발에 대해 알고 싶으시다면 시작하기 튜토리얼을 먼저 확인해 주세요.

구글 애널리틱스 계정도 필요합니다. 설정을 할 때 웹사이트 URL 항목에 어떠한 값이든 넣으면 됩니다. 확장 프로그램은 자신만의 URL을 가지지 않습니다.

구글 애널리틱스에서 웹사이트 URL 항목에는 어떤 값이든 넣을 수 있습니다.

추적 코드 삽입

현재 페이지가 https:// 프로토콜로 열렸다면 SSL 로부터 추적코드 조각인 ga.js 를 가져옵니다. 크롬 ‘확장 프로그램’과 ‘앱’은 SSL 버전의 ga.js 만 사용할 수 있습니다. 암호화되지 않은 HTTP 상에서 불러온 ga.js는 크롬의 Content Security Policy에 의해 기본적으로 거부됩니다.

크롬 확장 프로그램은 chrome-extension:// 스키마 아래에서 호스팅이 되므로, 기본 위치 대신에 https://ssl.google-analytics.com/ga.js 에서 바로 ga.js를 가져오는 약간의 수정이 필요합니다.

아래는 비동기 추적 API의 수정된 코드입니다. (3번 라인이 수정된 부분입니다.)

기본 컨텐트 보안 정책을 완화해서 확장 프로그램이 리소스를 로드할 수 있도록 해야합니다. manifest.json에 정책을 정의하려면 다음과 같이 하시면 됩니다:

외부 자바스크립트 파일을 통해 팝업 페이지(popup.html)에 비동기 추적 코드를 불러오고 하나의 페이지뷰를 추적합니다:

UA-XXXXXXXX-X 부분은 여러분의 구글 애널리틱스 계정 번호로 바꾸세요.

페이지뷰 추적하기

_gaq.push([‘_trackPageview’]); 코드는 하나의 페이지뷰를 추적합니다. 이 코드는 확장 프로그램의 어떠한 페이지에서도 사용할 수 있습니다. 백그라운드 페이지가 위치할 때는 브라우저 세션당 뷰를 한번 기록합니다. 팝업이 위치할 때는 팝업이 열릴 때마다 뷰를 기록합니다.

확장 프로그램의 각 페이지에 대한 페이지뷰 데이터를 보고 브라우저의 세션별로 사용자와 확장 프로그램간의 얼마나 많은 상호작용이 있었는지 알 수 있습니다.

확장 프로그램의 페이지뷰 데이터를 통해 아이디어를 얻을 수 있습니다.

애널리틱스 요청을 모니터링하기

확장 프로그램에서 추적 데이터가 구글 애널리틱스로 보내지고 있는지 확실히 하기 위해, 브라우저에 있는 개발자 툴로 확장 프로그램의 페이지를 살펴볼 수 있습니다. (더 자세한 내용은 디버깅 튜토리얼을 참조하세요.) 다음 그림에서 보는것과 같이, 설정이 잘 되어 있다면 요청을 보내고 있는 _utm.gif 라는 파일을 볼 수 있어야 합니다.

요청이 잘 이루어지고 있는지 _utm.gif 파일을 통해 확인.

이벤트 추적하기

이벤트 추적 설정에 따라 사용자가 확장 프로그램의 어떠한 부분과 가장 많은 상호작용을 하는지 측정할 수 있습니다. 예를 들어 3개의 버튼이 있고 사용자가 클릭을 할 수 있다고 해보겠습니다:

구글 애널리틱스로 이벤트를 보내는 함수를 작성합니다:

그리고 각 버튼 클릭에 대한 이벤트 핸들러를 할당합니다:

구글 애널리틱스의 ‘이벤트 추적 개요’ 페이지에서 메트릭스를 제공해 주며 이것을 통해 각 버튼 클릭이 얼마나 많이 이루어졌는지 알 수 있습니다:

구글 애널리틱스의 이벤트 개요 페이지.

이러한 접근 방식을 통해 확장 프로그램의 어떤 부분이 활용이 많이 되고 적게 되는지를 볼 수 있습니다. 이 정보는 UI 재디자인, 추가 기능 구현 등의 의사결정을 하기 쉽도록 가이드를 해줍니다.

이벤트 추적에 대한 더 자세한 정보는 구글 애널리틱스의 developer documentation를 참조하세요.

샘플 코드

이 기술을 사용한 샘플 확장 프로그램이 크롬 소스트리에 있습니다:

…/examples/tutorials/analytics/