사이트에 analytics.js 추가

analytics.js 라이브러리('Google 애널리틱스 태그'라고도 함)는 사용자가 웹사이트와 상호작용하는 방식을 측정하기 위한 자바스크립트 라이브러리입니다. 이 문서에서는 Google 애널리틱스 태그를 사이트에 추가하는 방법을 설명합니다.

Google 애널리틱스 태그

Google 애널리틱스 태그는 <head> 태그 위에 가까이 있는 다른 스크립트나 CSS 태그 앞에 추가해야 하고 사용할 Google 애널리틱스 속성의 속성 ID를 추가해야 합니다.

<!-- 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 -->

위의 코드는 4가지 주요 작업을 실행합니다.

  1. https://www.google-analytics.com/analytics.js에서 analytics.js 자바스크립트 라이브러리를 비동기식으로 다운로드하는 <script> 요소를 만듭니다.
  2. analytics.js 라이브러리가 로드되고 사용할 준비가 되면 실행할 명령어를 예약할 수 있는 전역 ga 함수(ga() 명령어 큐를 호출함)를 초기화합니다.
  3. ga() 명령어 큐에 명령어를 추가하여 'GA_MEASUREMENT_ID' 매개변수를 통해 지정된 속성의 새 추적기 객체를 만듭니다.
  4. ga() 명령어 큐에 다른 명령어를 추가하여 현재 페이지의 페이지 조회를 Google 애널리틱스로 전송합니다.

맞춤 구현에서는 Google 애널리틱스 태그의 마지막 두 줄(create 및 send 명령어)을 수정하거나 더 많은 상호작용을 캡처하기 위한 코드를 추가해야 할 수도 있습니다. 하지만 analytics.js 라이브러리를 로드하거나 ga() 명령어 큐 함수를 초기화하는 코드를 변경해서는 안 됩니다.

대체 비동기 태그

위에서 설명한 Google 애널리틱스 태그를 사용하면 스크립트가 모든 브라우저에서 비동기식으로 로드되고 실행되지만 최신 브라우저에서 스크립트를 미리 로드할 수 없다는 단점이 있습니다.

아래의 대체 비동기 태그는 미리 로드 기능을 지원하므로 최신 브라우저에서 성능이 조금 향상되지만, async 스크립트 속성을 인식하지 못하는 IE 9 이전 버전의 모바일 브라우저에서는 동기식 로드와 실행으로 성능이 저하될 수 있습니다. 방문자가 주로 최신 브라우저를 사용하여 사이트에 액세스하는 경우에만 이 태그 구성을 사용하세요.

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

Google 애널리틱스 태그는 어떤 데이터를 캡처하나요?

이 태그 중 하나를 웹사이트에 추가하면 사용자가 방문하는 페이지별로 페이지 조회가 전송됩니다. Google 애널리틱스에서 이 데이터를 처리하고 다음과 같이 많은 정보를 추론할 수 있습니다.

  • 사용자가 사이트에서 보내는 총 시간
  • 사용자가 각 페이지에서 보내는 시간 및 페이지를 방문한 순서
  • 클릭된 내부 링크(다음 페이지 조회의 URL 기반)

또한 새로운 추적기 객체를 만들 때 analytics.js가 수행하는 IP 주소, 사용자 에이전트 문자열, 초기 페이지 검사는 다음과 같은 사항을 결정하는 데 사용됩니다.

  • 사용자의 지리적 위치
  • 사용 중인 브라우저 및 운영체제
  • 화면 크기 및 Flash 또는 자바가 설치되었는지 여부
  • 참조 사이트

다음 단계

기본적인 보고는 Google 애널리틱스 태그를 통해 수집한 데이터로도 충분하지만 대부분의 경우 사용자에 대한 답변을 얻고 싶은 추가 질문이 있습니다.

이 사이트의 가이드에서는 analytics.js로 중요한 상호작용을 측정하는 방법을 설명하지만 특정 기능을 구현하기 전에 왼쪽 탐색 메뉴의 기본 섹션에 표시된 가이드를 읽어보는 것이 좋습니다. 이 가이드에서는 analytics.js 라이브러리를 개략적으로 설명하고 사이트 전체에서 사용되는 코드 예를 더 확실하게 이해할 수 있습니다.

이 시리즈의 다음 가이드에서는 analytics.js의 작동 방식을 설명합니다.