티스토리 뷰
발생일: 2014.01.05
키워드: Google Analytics, Chrome extension, 크롬 확장 프로그램, 구글 애널리틱스
문제:
이번에 네이버 영어사전 크롬 확장 프로그램에 구글 애널리틱스를 추가하려고 한다.
일전에도 한 번 넣었다가 제대로 동작하지 않아서 그냥 넣어뒀던 코드가 있어서 꺼내봤는데,
역시나 여전히 동작하지 않는다. ㅎㅎ
게다가, 이전 코드는 `ga.js` 를 사용하는 것이었는데, 애널리틱스에서 로드하는 스크립트가 바뀌었더라.
문서를 보니 예전 방식인 `ga.js`를 사용하는 것은 ‘클래식 애널리틱스’ 이고,
새로 변경된 것은 ‘anaytics.js’를 사용하는 ‘유니버셜 애널리틱스’라고 한다.
엄청 삽질했다...
익스텐션은 일반 웹페이지와 프로토콜도 다른 데다,
익스텐션 만의 제한도 있어서 챙겨야 할 것들이 몇 가지 있더라.
해결책:
1. manifest.json 에 CSP 설정 추가하기
익스텐션과 다른 도메인에 있는 `analytics.js` 파일을 불러와야 하는데, 익스텐션의 CSP 정책 때문에 가져올 수 없다.
CSP 제한을 허용하려면 manifest.json 에 리소스를 가져올 도메인을 명시해줘야 한다.
클래식 애널리틱스 버전(ga.js)는 `https://ssl.google-analytics.com`에 있었는데,
유니버셜 애널리틱스(analytics.js)부턴 `https://www.google-analytics.com`에서 서빙한다.
아래와 같이 CSP 를 설정해주면 된다.
"content_security_policy": "script-src 'self' 'unsafe-eval' https://www.google-analytics.com; object-src 'self'",
2. 크롬 익스텐션은 CSP가 적용되어 있더라도, SSL 요청만 허용한다.
트래커를 생성한 후에, 아래처럼 항상 SSL로 보내도록 처리해준다.
ga('set', 'forceSSL', true);
3. 트래커가 요청을 보낼 때 프로토콜 검증을 하지 않도록 설정한다.
애널리틱스 코드에는 수집 정보를 보낼 때, 몇 가지 유효성 검증 작업을 포함하고 있다.
프로토콜 검사(http, https 인지 여부)도 기본 검증 작업에 포함되어 있는데,
익스텐션 프로토콜은 http 또는 https가 아니기 때문에 아래와 같은 에러 코드가 나오면서 전송되지 않는다.
Unallowed document protocol. Aborting hit.
아래와 같이 트래커 생성 후에 프로토콜 검증을 무시하도록 설정할 수 있다.
ga('set', 'checkProtocolTask', null);
4. ga 를 별도의 변수로 담아두지 않도록 한다.
스크립트가 로드되기 전의 ga 함수는 임시로 큐에 담아두는 함수이고,
스크립트가 로드되면 실제 기능을 가진 함수로 변경된다.
아래처럼 스크립트가 로드되기 ga 를 변수에 담아두면 의도대로 동작하지 않는다.
_ga = ga; // ga 는 스크립트 로드 전까지 임시로 큐에 명령어를 담아두는 함수
// analytics.js 가 비동기로 로드됨. ga 는 모든 기능을 갖춘 함수
_ga === ga; //—> false
ga(‘send’, ‘pageview’); // 올바르게 동작한다.
_ga(‘send’, ‘pageview’); // 동작하지 않는다.
5. 쿠키 도메인을 익스텐션의 것으로 설정한다.
ga('create', ‘UA-XXXX-Y’, {
'cookieDomain': chrome.extension.getURL('').replace(/^.+:\/\/([^\/]+)\/$/, '$1')
}); // 익스텐션의 쿠키 도메인을 설정한다.
아님 쿠키 사용 없이 클라이언트를 새로 생성해 사용한다.
ga('create', 'UA-XXXX-Y', {
'storage': 'none',
'clientId': '35009a79-1a05-49d7-b876-2b884d0f825b'
});
6. 수집이 잘 안된다고 생각될 땐, 디버그 모드로 설정해본다.
태그를 추가하기 전에 아래 속성을 설정한다.
window.ga_debug = {trace: true};
`analytics.js` 대신 `analytics_debug.js`를 로드한다.
https://www.google-analytics.com/analytics_debug.js
그 외 팁.
- 익스텐션용 애널리틱스 코드를 딸 때, URL은 대충 아무거나 적어도 된다.
- 크롬은 navigator.sendBeacon 을 제공하므로, useBeacon 속성을 true로 설정하면 된다.
- 스크립트 태그에 async 를 사용하면 더 빠르다.
반응형
댓글
공지사항