Google Analytics 관련 프로젝트를 시작 할 때 종종 듣는 질문이 있습니다.
'구글 애널리틱스 코드를 어디에 심느냐에 따라서 차이점이 있나요? 공식적으로는 <head> 태그 안에 심으로 하는데 <body> 태그에 심어도 문제가 없을까요? '
보통 프로젝트 마다 다르지만 애널리틱스 코드를 모든 페이지 <head> 에 심기가 어려운 상황이 있을 때도 있는데 이럴 때 GA 를 사용하는데 문제가 생길 수 있는 지 걱정하시는 경우가 있었습니다.
결론 부터 말하자면 사실 <body> 태그에 심어도 큰 문제는 없지만 <head> 안에 심는 것보다 조금 더 늦게 로딩 될 수 있다는 이슈가 있습니다.
브라우져는 서버에서 위 같은 html 텍스트를 다운로드 받고 해당 텍스트를 저희가 보는 인터넷 화면으로 만들어주는 기능을 가지고 있습니다. 이러한 화면을 만드는 과정에서 브라우져는 텍스트를 위에서 부터 아래로 읽어가며 로딩을 시키기 때문에 위에 있는 내용이 아래있는 내용보다 먼저 실행 되게 됩니다.
그렇다면 실제로 구글 애널리틱스 이벤트를 <head> 태그와 <body> 태그에 위치 시키고 두 개의 이벤트가 실행 되는데 얼마만큼의 차이가 나는 지 알아 보겠습니다.
먼저 저는 이 블로그의 <head> 태그와 <body> 태그에이벤트를 심었습니다.
<head>
# head 태그에 심은 코드
<script>
Date.prototype.format = function(f) {
if (!this.valueOf()) return " ";
var weekName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
var d = this;
return f.replace(/(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, function($1) {
switch ($1) {
case "yyyy": return d.getFullYear();
case "yy": return (d.getFullYear() % 1000).zf(2);
case "MM": return (d.getMonth() + 1).zf(2);
case "dd": return d.getDate().zf(2);
case "E": return weekName[d.getDay()];
case "HH": return d.getHours().zf(2);
case "hh": return ((h = d.getHours() % 12) ? h : 12).zf(2);
case "mm": return d.getMinutes().zf(2);
case "ss": return d.getSeconds().zf(2) + " " + d.getMilliseconds();
case "a/p": return d.getHours() < 12 ? "오전" : "오후";
default: return $1;
}
});
};
gtag('event' ,'head' ,{'event_category' : 'loading_check' , 'event_label' : new Date().format("yyyy년 MM월 dd일 a/p hh시 mm분 ss초") ,'non_interaction': true })
</script># body 태그 끝에 심은 스크립트
<script>
gtag('event' ,'body' ,{'event_category' : 'loading_check' , 'event_label' : new Date().format("yyyy년 MM월 dd일 a/p hh시 mm분 ss초") ,'non_interaction': true })
</script>해당 스크립트는 각각 <head> , <body> 에 심어져 있으며 실행 시 실행 위치와 실행 시간을 구글 애널리틱스 이벤트로 기록하는 코드 입니다.
(상단 Date.prototype.format Function 의 경우 시간 형식을 변환하기 위해 사용하였으며 https://stove99.tistory.com/46 에서 참고 하였습니다. )
해당 이벤트 실행 결과 다음과 같은 결과가 나왔습니다.
- <head> 태그 실행 값
- <body> 태그 실행 값
실행 결과 <head> 태그의 이벤트는 6시 14분 26.710초 에 실행 되었으며 <body> 태그의 이벤트는 6시 14분 26.904 초에 실행 되어
약 0.194초의 차이가 있음을 확인 할 수 있었습니다.
이는 만약 <body> 태그에만 GA 스크립트를 심었을 때 사용자가 6시 14분 26.8 초에 페이지를 전부 기다리지 않고 나가버렸다면 GA 는 사용자가 들어왔던 사실을 알지 못한다는 것을 뜻합니다.
이는 소스코드의 용량이 큰 사이트의 경우 차이가 더 커질 수 있으나 사실 0.2 초는 매우 짧은 시간이기 때문에 <head> 태그에 GA 스크립트를 심을 수 있으면 좋겠지만 그렇지 않은 경우에도 GA 를 완전히 사용하지 못하는 환경은 아니라고 말할 수 있을 것 같습니다.
물론 이러한 이슈가 있다는 것은 인지하고 있는 것이 프로젝트를 진행하는데 문제가 없을테니 한 번 정리 해보았습니다.
비슷한 이슈가 태그매니저를 사용하여 GA 를 사용할 때도 발생할 수 있는데 이 내용은 이후 포스팅에서 한번 정리해보도록 하겠습니다.
감사합니다 :)
'Google Analytics' 카테고리의 다른 글
| 구글 애널리틱스 이벤트 일으키기 (5) | 2020.06.22 |
|---|---|
| 구글 애널리틱스 커스텀 디멘션 만들기 (0) | 2020.06.20 |
| 구글 애널리틱스 테스트 하기 1. gtag.js 페이지뷰 일으키기 (0) | 2020.03.10 |
| 구글 태그매니저를 통한 구글 애널리틱스 실행 속도 비교 (0) | 2020.03.08 |
| GA 트래킹 브라우져 개발자 도구로 확인하기 (0) | 2020.03.07 |
