크롬 익스텐션에 ga 달기

크롬 익스텐션에서 ga가 동작하게 하려면 몇가지 셋팅이 필요하다.

gtag 대신 analytics 사용 아래와 같은 이유들로 gtag를 사용함에 있어서 가능한지 자료를 찾지 못했다.

ga는 프로토콜 검증 후에 보내도록 되어있는데 chrome-extension://이기 때문에 보내지지 않는다. checkProtocolTask 함수를 비워버리는 작업 필요

path도 검증하는게 있는건지 ga로 보낼때 특정 path를 지정해주는 작업이 필요했다. pageview에 /를 추가해줬다.

// ga 코드
(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');

ga('create', 'UA-99767689-3', 'auto');
ga("set", "checkProtocolTask", null); // 크롬익스텐션에서 필수
ga('send', 'pageview', '/'); // 크롬익스텐션에서 path 지정 필수

CSP 허용 google-analytics를 불러올 수 있도록 CSP 허용이 필요하다.

"content_security_policy": "script-src 'self'; script-src-elem 'self' https://www.google-analytics.com; object-src 'self'"

hmu332233 / tips

크롬 익스텐션에 ga 달기 #29