Google Analytics 추가하기
- Projects
- 2022년 2월 7일
개인마다 선택한 Theme에 이미 구글 애널리틱스 삽입 코드가 포함되어 있어 config.toml 파일에 추적코드만 삽입하면 되는 경우가 대부분일 것이다. 이 부분은 선택한 theme 문서를 잘 확인해보고 만약에 없다면 아래와 같은 방법으로 추가해줄 수 있다.
1. Google Analytics 추적 코드 발급
구글 애널리틱스를 추가하기 위해서는 당연히 구글의 애널리틱스에 가입을 먼저 해야 한다. 가입을 하고 나면 계정과 속성을 등록해야 한다.
계정은 일종의 그룹과 같은 느낌으로 계정하나에 여러 속성(사이트,도메인)를 관리 할 수 있다. 구글 고객센터 에 계정과 속성을 추가하여 추적 코드를 발급 받는 방법이 잘 나와있다.
2. 추적 script 삽입
구글 애널리틱스 페이지에서 관리 > 속성 > 추적 정보 > 추적 코드 경로 따라 들어가면 범용 사이트 태그(gtag.js) 에 js를 그대로 이용해도 무방하나 나는 config.toml에서 추적코드를 관리하여 script를 유동적으로 변경되도록 작성해주고자 아래와 같은 코드를 head에 삽입 해주었다.
<script
async
src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.googleAnalytics }}"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "{{ .Site.Params.googleAnalytics }}");
</script>
이때 이 스크립트를 삽입해주는 위치는 theme/테마명/layouts/partials/html-head.html 에 직접 추가해주어도 되고 theme 파일은 건드리기 싫다 하면 /layouts/partials/html-head.html 파일을 재정의 하여 추가해도 가능하다.
나는 테마의 html-head.html에 {{- partial “head.html” . -}} 을 추가해준 후, head에 무언가 데이터를 추가해주고자 할때는 /layouts/partials/head.html 파일을 통해 추가해주었다. ( meta(og, twitter), 페이지네이션이나 갤러리 같은 추가 기능(css/js) 에 관한 부분들은 이 파일에 정의하고 theme의 파일은 건드리지 않는 방식으로 개발했다. )
3. 포스팅 중에는 적용 안되게 하기
hugo server 명령어로 local 서버를 켜놓고 포스팅을 하다보면 md파일을 저장할때마다 페이지가 자동 새로고침이 되고 구글 애널리틱스 추적 스크립트가 살아있어 애널리틱스의 데이터를 신뢰하기 어려워 진다. 그렇기 때문에 개발(포스팅)중에는 구글 애널리틱스를 적용이 안되게 코드를 조금만 수정해보자.
<!-- google analytics-->
{{ if and ( ne (printf "%v" $.Site.BaseURL) "http://localhost:1313/" )
(.Site.Params.googleAnalytics) }}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.googleAnalytics }}"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "{{ .Site.Params.googleAnalytics }}");
</script>
{{ end }}
위와 같이 scipt 전에 if 문으로 localhost인지 확인하고 config.toml에 추적코드 속성이 있다면 삽입되게 코드를 수정하여 해결 할 수 있다.
4. google analytics script 최적화
google analytics 추적 스크립트를 보면 알겠지만 외부 js를 로드하게 되며 이때 로딩되는 js는 약 73kb인데 만일 google analytics의 다양한 기능은 필요없고 단순히 뷰카운트가 목적이라고 하면 Minimal analytics 에서 제공하는 script를 통해 1.5kb 로 최적화를 할 수 있다.
위에서 삽입했던 script 대신에 아래의 script를 삽입 해주면 간단하게 교체가 가능하다.
<!-- google analytics-->
{{ if and ( ne (printf "%v" $.Site.BaseURL) "http://localhost:1313/" )
(.Site.Params.googleAnalytics) }}
<script>
(function (a, b, c) {
var d = a.history,
e = document,
f = navigator || {},
g = localStorage,
h = encodeURIComponent,
i = d.pushState,
k = function () {
return Math.random().toString(36);
},
l = function () {
return g.cid || (g.cid = k()), g.cid;
},
m = function (r) {
var s = [];
for (var t in r)
r.hasOwnProperty(t) &&
void 0 !== r[t] &&
s.push(h(t) + "=" + h(r[t]));
return s.join("&");
},
n = function (r, s, t, u, v, w, x) {
var z = "https://www.google-analytics.com/collect",
A = m({
v: "1",
ds: "web",
aip: c.anonymizeIp ? 1 : void 0,
tid: b,
cid: l(),
t: r || "pageview",
sd:
c.colorDepth && screen.colorDepth
? screen.colorDepth + "-bits"
: void 0,
dr: e.referrer || void 0,
dt: e.title,
dl: e.location.origin + e.location.pathname + e.location.search,
ul: c.language ? (f.language || "").toLowerCase() : void 0,
de: c.characterSet ? e.characterSet : void 0,
sr: c.screenSize
? (a.screen || {}).width + "x" + (a.screen || {}).height
: void 0,
vp:
c.screenSize && a.visualViewport
? (a.visualViewport || {}).width +
"x" +
(a.visualViewport || {}).height
: void 0,
ec: s || void 0,
ea: t || void 0,
el: u || void 0,
ev: v || void 0,
exd: w || void 0,
exf: "undefined" != typeof x && !1 == !!x ? 0 : void 0,
});
if (f.sendBeacon) f.sendBeacon(z, A);
else {
var y = new XMLHttpRequest();
y.open("POST", z, !0), y.send(A);
}
};
(d.pushState = function (r) {
return (
"function" == typeof d.onpushstate && d.onpushstate({ state: r }),
setTimeout(n, c.delay || 10),
i.apply(d, arguments)
);
}),
n(),
(a.ma = {
trackEvent: function o(r, s, t, u) {
return n("event", r, s, t, u);
},
trackException: function q(r, s) {
return n("exception", null, null, null, null, r, s);
},
});
})(window, "{{ .Site.Params.googleAnalytics }}", {
anonymizeIp: true,
colorDepth: true,
characterSet: true,
screenSize: true,
language: true,
});
</script>
{{ end }}
