개발
구글 애널리틱스(gtag) 스크립트 로드 타이밍 문제
by
거참 요즘 이러니저러니 손대는거마다 실수연발이다.
괜히 개발자 형님들이 잘돌아가는 코드는 손대는게 아니라고 했던가,
나름 스크립트 최적화 하겠다고 기존에 스크립트 형식 로딩을 비동기 로딩으로 바꿨다가 애널리틱스 코드가 망가지는 상황이 발생했다.
<script async src="https://www.googletagmanager.com/gtag/js?id=G-000000000"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-000000000');
</script>Copy대부분의 애널리틱스 사용하는 사람들도 알다시피, 위의 코드로 우리는 웹사이트에 애널리틱스 코드를 밖아두고 사용중이다.
하지만 이렇게 로드하는 방식은 웹사이트 로드시 스크립트 로드를 하고있기 때문에 웹사이트 최적화 입장에서는 gtag.js 파일때문에 웹 서버가 느려지는 상황이 발생하기도한다.
실제 구글 페이지 스피드를 돌리면 gtag.js때문에 로드가 지연된다그래서 나는 이걸 우회하기 위해서 별도 스크립트 로딩방식으로 아래와 같이 구현해서 적용해보았다.
function initGtag() {
if (initGtag.hasInitialized) return;
initGtag.hasInitialized = true;
const gtagScript = document.createElement('script');
gtagScript.async = true;
gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-00000000';
gtagScript.onload = function () {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
window.gtag = gtag;
gtag('js', new Date());
gtag('config', 'G-00000000');
};
document.head.appendChild(gtagScript);
}Copy이러고 document.DOMContentLoaded 타이밍이나 window.load 타이밍에 위함수를 호출하면 사실상 지연로딩이 완성되는 느낌이다.
분명 지피티도 위 방식으로하면 좋아진다했고, 나도 그럴듯해보여서 위 방식으로 변경해보았다.
그러나...
사용자수 떡락
이벤트수 떡락결과는 위와 같았다...
미친 스크립트 지연로드 방식으로하니 제대로 애널리틱스 스크립트가 작동을 안하는것이다.
'호출'이 안되는건 아니다.
스크립트 로드이후 세션감시나 이벤트 감시가 먹통이 된느낌이다.
근데 생각해보니 그도그럴게 애널리틱스는 유저가 웹사이트를 호출하는 시작지점부터 이벤트 감시, 행동감시를 하는데, 이 타이밍을 내가 지연로딩으로 비틀어버린 느낌이다보니 애널리틱스 내부에서 제대로된 신호정보가 수집되고 전송될일이 없던 것이었다.
박살난건 애널리틱스 지표뿐만이 아니다.
나는 애널리틱스에서 사용자수를 하루에 두번 API로 가져와서 별도의 방문자수를 저장해두고 이를 그래프로 표기해주는데,
그게 이 꼴이났다.
그래프 수치 떡락해써하....
물론 이건 내 디비데 저장해둔데이터라 복구가 가능한 수치긴하나 처음에 이 상황을 보고는 적잖게 당황을 안할수가 없었다.
일단 급하게 원래 코드대로 복구하긴 해뒀는데 이미 박살난 지표는 뭐 어찌할수가 없어서 매우 슬프다.
사실 이런 구글 애널리틱스 스크립트가 사이트 초기 로드에 개입해서 웹사이트 성능지표를 깍는 사례가 많아서 이를 우회하기위한 여러 개발자들의 논의가 있긴했다.
여기서도 나오는 해결법이 지연로드하기, 웹사이트 로드끝나고 로드하기 등 여러가지 시도방법이 있고, 나도 그거 따라서 한번 해본건데...
결과는 이 꼬라지다.
여러분들도 애널리틱스 코드를 만질일이있다면 절대 로드 타이밍을 맘대로 손대지는 말자.
나처럼 후회하기 싫다면 말이다 ㅠㅠ
#JavaScript
0
개의 댓글