본문 바로가기

Google Analytics

[Google Analytics] 구글 애널리틱스 설치하기 - 2.사이트에 설치

추적 코드란??

구글 애널리틱스에 계정 생성 완료되면, 아래의 화면으로 이동합니다.

이 화면에 나와있는 항목에 대해 간단하게 설명드리자면

  1. 추적 ID : 데이터 저장통 번호로 사이트에서 구글 애널리틱스의 어느 저장소로 데이터를 보낼지 정할때 사용되는 주소의 개념으로 이해하시면 됩니다.

  2. 추적 코드 : 구글 애널리틱스에 데이터를 전송하기 위한 코드입니다. 데이터 수집을 원하는 사이트 내의 모든 페이지에 반드시 추가 해야합니다. 데이터를 수집하기 위한 가장 기본적인 코드이며 이 코드만 추가해도 구글 애널리틱스 상에서 대부분의 리포트를 볼 수 있습니다. 

 

 

 

추적 코드의 종류

구글 애널리틱스의 추적 코드는 여러가지 버전이 존재합니다. 현재 계정을 생성하면 보이는 추적 코드는 가장 최신버전입니다. 기존에 구글 애널리틱스를 사용하셨던 분들을 위해, 종류 별 추적 코드에 대한 간단한 설명을 드립니다.
( 아래 Sample 코드의 'UA-XXXXX-X' 위에서 설명드린 본인의 추적 ID로 바꿔주셔야 합니다. )
 
  1. ga.js : 가장 초기버전의 추적 코드이며, 지금도 사용은 가능합니다. Custom Variables 같은 현재는 안쓰이는 기능을 지원합니다. 구버전이므로 기능적으로도 제한이 많아 사용을 권장하지 않는 버전입니다.
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
 
  2. analytics.js : 과거 버전과 달리 다양한 디바이스에서 데이터를 수집하기 위해, 구글 애널리틱스로 데이터를 전송할 때 Measurement Protocol이라는 규약으로 데이터를 전송합니다.(추후 자세하게 포스팅하겠습니다.) 또한 향상된 전자상거래 기능이 생겨 보다 상세하게 전자상거래 데이터를 수집할 수 있으며, Measurement Protocol에 입력되는 값을 임의로 수정해서 보낼 수 있기 때문에, 데이터 수집에 있어서 자유도가 높습니다.
<!-- Google Analytics -->
<script>
(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-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
 
  3. gtag.js : 현재 가장 최신버전의 추적코드입니다. gtag.js를 사용하면, 구글 애널리틱스 뿐만 아니라 다른 마케팅 서비스인 애드워즈, 더블클릭으로의 데이터 전송이 gtag라는 하나의 API를 통해 가능합니다.
( 과거에는 각자의 서비스에 데이터를 전송하려면, 각각의 여러개의 코드를 사이트에 추가해야 했습니다. )
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-X');
</script>
 

추적 코드 설치방법

모든 사이트들의 페이지는 기본적으로 아래와 같은 HTML 구조로 제작되어 있습니다.

 

구글 애널리틱스 추적 코드는 사이트 내의 모든 페이지에 추가해야하며, 위 그림에서와 같이 <head>태그 안의 가능한 가장 높은 곳에 추가합니다.  

코드가 높은 곳에 위치해야하는 이유는, 페이지에 존재하는 코드는 기본적으로 위에서부터 순서대로 읽히기 때문에 가장 높은 곳에 있을 수록 가장 빨리 실행됩니다. 사용자가 사이트에 방문을 했음에도 불구하고, 코드가 읽히기 전에 페이지를 이동하거나 이탈을 하게될 경우. 데이터가 수집이 안되므로 데이터 수집에 있어서 누락이 발생할 수 있습니다.

 

<참고. GA가 설치된 페이지>

 

※ Google Tag Manager를 활용하는 방법 ( 포스팅 예정 )

  앞서 설명드린 방식은 사이트 내에 추적 코드를 직접 추가하는 방식입니다. 
  이외에도, 구글 태그 매니저를 대신 사이트에 설치하고 이를 통해 데이터를 수집하는 방법이 있습니다.
 

 

 

설치여부 확인하기

설치가 완료됐다면 구글 애널리틱스 상에서 작동여부를 바로 확인할 수 있습니다.
설치한 사이트에 방문하면, 아래의 이미지처럼 구글 애널리틱스 [실시간] -> [개요] 리포트 상에 사이트의 활성 사용자가 측정되고 있는 것을 확인할 수 있습니다.