본문 바로가기

Google Analytics

구글 태그매니저를 통한 구글 애널리틱스 실행 속도 비교

구글 태그매니저는 굉장히 편리한 도구 입니다. 구글 애널리틱스를 사용하기 위해서는 페이지의 소스에 접근 할 수 있는 권한이 있어야 하고 이를 수정할 수 있어야 하는데 사실 개발자가 아닌 사람에게는 이는 어려운 일 일 수 있습니다. 

 

태그매니저의 스크립트를 페이지에 심으면 이후의 스크립트 추가는 태그매니저 안에서 할 수 있게 되고 비개발자들도 쉽게 마케팅 추적 태그들을 심을 수 있는 템플릿들을 지원하고 있어 태그매니저를 사용하면 보다 쉽게 구글 애널리틱스 태그나 페이스북 픽셀 태그 등의 마케팅 추적 태그들을 설치 할 수 있습니다. 

 

이러한 편리함이 있지만 구글 태그매니저를 씀으로서의 발생하는 단점도 있습니다. 

태그매니저를 사용하게 되면 태그매니저가 실행한 뒤에 구글 애널리틱스를 실행하게 되기 때문에 소스 코드에 직접 설치할 때마다 실행 시점이 더 늦어지게 됩니다. 

 

그러면 구글 애널리틱스 만 사용했을 때와 태그매니저를 통해 구글 애널리틱스를 사용하였을 때 실행 속도가 어떻게 다른 지 직접 비교해보도록 하겠습니다. 

 

비교 방법은 이전 포스팅에서 <head> 태그 와 <body> 태그 에서의 실행속도를 비교 했던 방법과 유사하게 진행하겠습니다.  (이전포스팅 : https://05.devm.co.kr/2 ) 

 

Google Analytics 코드 삽입 위치에 따른 차이점

Google Analytics 관련 프로젝트를 시작 할 때 종종 듣는 질문이 있습니다. '구글 애널리틱스 코드를 어디에 심느냐에 따라서 차이점이 있나요? 공식적으로는 태그 안에 심으로 하는데 태그에 심어..

05.devm.co.kr

먼저 이전 포스팅에서 직접 소스코드 수정을 통해 구글 애널리틱스 실행 시점을 기록 하는 내용을 기재하였기 때문에 구글 태그매니저 구성 방법만 설명 드리겠습니다. 

 

먼저 구글 태그매니저 상에서 현재 시점을 알아내기 위해 새로운 변수를 추가 해주어야 합니다. 

태그매니저 - 변수 - 새로만들기 - 맞춤 자바스크립트로 현재 시간을 가져오는 코드를 변수를 만들어줍니다. 

// 맞춤 자바스크립트 코드 
function(){
      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) + "." + new Date().getMilliseconds().zf(2);
              case "a/p": return d.getHours() < 12 ? "오전" : "오후";
              default: return $1;
          }
      });
      };
  	  return new Date().format("yyyy년 MM월 dd일 a/p hh시 mm분 ss초") 
}

 코드 참고 출처 : https://stove99.tistory.com/46

 

Javascript Date format 함수

Date.prototype.format = function(f) { if (!this.valueOf()) return " "; var weekName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"]; var d = this; return f.replace(/(yyyy|yy..

stove99.tistory.com

 

해당 코드는 태그매니저에서 이벤트가 일어날 때마다 현재 시간을 가져오게 됩니다. 

그러면 이제 구글 애널리틱스가 실행될 때 실행 시점을 함께 보내주게 해주겠습니다. 

먼저 애널리틱스를 태그매니저의 페이지뷰 이벤트가 실행될 때마다 실행시키도록 태그를 생성했습니다. 

애널리틱스 설정은 다음과 같이 구성하였습니다. 실행시간을 구글 애널리틱스 상의 커스텀 디멘션으로 만들어준 뒤 (저는 3번 커스텀 디멘션에 실행 시간 데이터를 담기로 하였습니다. ) 측정기준 값을 아까 만들어준 thisTime 변수로 지정 해줍니다. 

 

이후 태그매니저를 퍼블리싱 하면 페이지뷰가 일어날 때마다 태그매니저를 통해서도 구글 애널리틱스가 실행될 것 입니다. 

 

그럼 이제 본격적으로 실행 시간에 대해 비교 해보도록 하겠습니다. 

태그매니저와 구글 애널리틱스가 심어져있는 페이지에서 두 개의 페이지뷰의 실행시점이 어떻게 차이나는 지 확인해보았습니다. 

 

<소스코드에 직접 심어진 GA 실행결과>

<태그매니저를 통해 심어진 GA 실행결과>

실제 실행 결과를 보았을 때 소스코드로 직접 심은 GA 가 태그매니저를 통해 실행된 GA 보다 0.84초 빠르게 실행된 것을 확인 할 수 있었습니다. 이는 만약 사용자가 오후 9시 37분 5.0 초에 페이지를 이탈 했다면 소스코드를 통해 심어진 GA 에서는 해당 사용자에 대한 데이터를 조회 할 수 있으나 태그매니저를 통한 GA 에서는 해당 사용자에 대한 데이터를 유실 한다는 것을 뜻 합니다.

 

이러한 실행결과는 인터넷 환경 , 사이트 환경에 따라 달라질 수 있지만 태그매니저를 통한 GA 실행이 소스코드에 심어진 GA 보다 다소 늦게 실행 된다는 것은 공통적이며 태그매니저는 매우 편리하고 유용한 툴이나 데이터 유실 이슈가 소스코드에 직접 심었을 때 보다 더 크게 발생할 수 있다는 점을 인지하고 사용한다면 좋을 것 같습니다. 

 

감사합니다 :)