Chrome Extension에 Google 애널리틱스(UA)를 설치하는 방법

소개

Chrome Extension에는 Google 애널리틱스를 설치할 수 있지만 Google Chrome Extension 공식 자습서에서는 이전 버전의 Google 애널리틱스를 설치하는 것처럼 보였으므로 UniversalAnalytics의 설치 방법을 살펴 보았습니다!

방법

(全部で15分~20分ぐらい)
1. Google Analyticsのプロパティをつくります 
2. トラッキングコードを入手します
3. トラッキングコードを修正して設置します
4. manifest.jsonにcontent_security_policyを追加します
5. デベロッパーダッシュボードでUAのIDを設定します

1. Google 애널리틱스 속성 만들기

Google 애널리틱스에서 Chrome Extension에 대한 속성을 만듭니다.
Chrome Extension의 경우 URL이 chrome-extension://라는 특수 URL이지만 URL을 입력 할 때는 무엇을 입력 할 수 있습니다.

2. 추적 코드를 얻습니다.

GA 추적 코드를 받으세요.
UA 버전의 경우 ga.js가 아닌 analytics.js입니다.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxxxxx-xx', 'auto');
  ga('send', 'pageview');

</script>

또한 여기에서 구할 수 있습니다.

3. 추적 코드를 수정하여 설치합니다.

수정 샘플입니다.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); // 1.httpsをつけます

  ga('create', 'UA-xxxxxx-xx', 'auto'); 
  ga('set', 'checkProtocolTask', null); //2.httpやhttpsのprotocolチェックを回避します
  ga('send', 'pageview', '/popup.html'); //3.GA内で表示したいように設定します

</script>

3-1. https를 붙인다

(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

프로토콜이 chrome-extension://에서 경로를 참조 할 수 없기 때문에 https를 붙입니다.

3-2. checkProtocolTask를 null로 설정합니다.

ga('set', 'checkProtocolTask', null);

페이지의 프로토콜이 http 또는 https가 아닌 경우 요청 중지
checkProtocolTask라는 메커니즘이 있습니다.
이것을 null로 설정하면 chrome-extension://PV를 보낼 수 있습니다.

3-3. send 메서드 조정(선택 사항)

ga('send', 'pageview', '/popup.html');

보내는 로그의 내용을 설정하려면 send 메서드를 조정해야 합니다.
위의 샘플에서는 popup.html에서만 PageView를 보내므로 위의 설정 코드를 넣습니다.

페이지와 제목을 세트로 보내고 싶다면

ga('send', 'pageview', { page: '/about', title: 'About Us' });

같은 상태가됩니다.
또한 무언가를 클릭하면 이벤트 로그를 보내고 싶다면

function addListener(element, type, callback) {
 if (element.addEventListener) element.addEventListener(type, callback);
 else if (element.attachEvent) element.attachEvent('on' + type, callback);
}

var downloadLink = document.getElementById('button');
addListener(downloadLink, 'click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
});

같은 설정을 함으로써 이벤트 로그를 보낼 수 있게 됩니다.
이 근처는 수시로 하고 싶은 일에 따라 조정하는 형태가 됩니다.

3-4. 추적 코드를 설치합니다

여기를 Chrome Extension script에 설치합니다.
popup.html의 html 파일에서 <script></script>를 작성할 수 없습니다.
외부 스크립트 내에 추적 코드를 설치하고 로드합니다.

4. manifest.json에 content_security_policy를 추가합니다.

Chrome Extension 정의 파일인 manifest.json에 다음을 추가하여 Chrome Extension 내에서 GA script 실행을 허용합니다.

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

5. 개발자 대시보드에서 UA ID를 설정합니다.

마지막으로 Chrome Extension 게시Chrome Extension 개발자 대시보드에서 GA Property ID를 설정합니다.

주의

確認したところ、この設定はChrome Extension内でGAが作動するように調整する機構ではなく、
インストールページのGAトラッキングを可能にするための設定のようです。

6. 데이터를 확인할 수 있습니다.

이 방법으로 데이터를 확인할 수 있습니다.