댓글 검색 목록

[기타] chrome extention - 32. 튜토리얼 : Google Analytics

페이지 정보

작성자 운영자 작성일 20-11-06 11:50 조회 646 댓글 0

이 튜토리얼은 Google Analytics를 사용하여 확장 사용을 추적하는 방법을 보여줍니다. 플랫폼 앱을 개발하는 경우 앱에는 확장 프로그램과 다른 제한 사항이 있으므로 앱 분석을 참조하세요.

요구 사항

이 튜토리얼은 당신이 구글 크롬 용 확장 프로그램 작성에 익숙하다고 예상합니다. 확장을 작성하는 방법에 대한 정보가 필요하면 시작하기 자습서를 읽어보십시오.

또한 확장을 추적하려면 Google 웹 로그 분석 계정을 설정해야 합니다. 확장 프로그램에는 자체 URL이 없으므로 계정을 설정할 때 웹 사이트의 URL 필드에 있는 모든 값을 사용할 수 있습니다.

The analytics setup with info for a chrome extension filled out.

추적 코드 설치

표준 Google 웹 로그 분석 추적 코드 스니펫은 현재 페이지가 https : // 프로토콜을 사용하여 로드 된 경우 SSL 보호 URL에서 ga.js라는 파일을 가져옵니다. Chrome 확장 프로그램 및 애플리케이션은 SSL 보호 버전의 ga.js 만 사용할 수 있습니다. 안전하지 않은 HTTP를 통한 ga.js로드는 Chrome의 기본 콘텐츠 보안 정책에 따라 허용되지 않습니다. 여기에 Chrome 확장 프로그램이 chrome-extension : // 스키마 아래에 호스팅 된다는 사실과 더불어 https://ssl.google-analytics.com/ga에서 ga.js를 직접 가져 오려면 일반적인 추적 스니펫을 약간 수정해야 합니다. 기본 위치 대신 Node.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']); 코드는 단일 페이지 보기를 추적합니다. 이 코드는 확장 프로그램의 모든 페이지에서 사용할 수 있습니다. 백그라운드 페이지에 배치하면 브라우저 세션 당 한 번씩 보기를 등록합니다. 팝업에 배치하면 팝업이 열릴 때마다 한 번씩 뷰를 등록합니다.

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

Analytics view of the top content for a site.

분석 요청 모니터링

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

Developer Tools window showing the __utm.gif request

이벤트 추적

이벤트 추적을 구성하여 사용자가 가장 많이 상호 작용하는 확장 프로그램 부분을 결정할 수 있습니다. 예를 들어 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);
  }