ga.js 소개 (기존)

ga.js는 사용자가 웹사이트와 상호작용하는 방식을 측정하기 위한 자바스크립트 라이브러리입니다. 이는 기존 라이브러리입니다. Google 애널리틱스를 처음 시작하는 경우 최신 추적 라이브러리인 analytics.js를 사용해야 합니다.

추적 코드 빠른 시작

애널리틱스 스니펫은 페이지에 붙여넣을 수 있는 작은 자바스크립트 코드입니다. 페이지에 ga.js를 삽입하여 Google 애널리틱스 추적을 활성화합니다. 페이지에서 사용하려면 아래의 코드 스니펫을 복사하고 UA-XXXXX-X를 웹 속성 ID로 바꾸세요. 웹사이트 템플릿 페이지의 닫는 </head> 태그 앞에 이 스니펫을 붙여넣습니다.

기본 페이지 추적 이상의 작업이 필요한 경우 추적 참조에서 API에서 사용 가능한 메서드 목록을 확인하세요. 비동기 구문 사용에 관한 자세한 내용은 사용 가이드를 참고하세요. 추적 설정에 관한 단계별 안내는 고객센터의 추적 설정 도움말을 참고하세요. 

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

위의 스니펫은 페이지를 비동기식으로 추적하는 데 필요한 최소 구성을 나타냅니다. _setAccount를 사용하여 페이지의 웹 속성 ID를 설정한 다음 _trackPageview를 호출하여 추적 데이터를 다시 Google 애널리틱스 서버로 전송합니다.

중요: 페이지를 기존 스니펫에서 최신 비동기 버전으로 업데이트하는 경우 먼저 기존의 추적 스니펫을 삭제해야 합니다. 같은 페이지에서 두 스니펫을 함께 사용하지 않는 것이 좋습니다. 이전 안내는 비동기로 이전을 참조하세요.

비동기 구문의 작동 방식

_gaq 객체를 통해 비동기 문법이 가능합니다. 이는 ga.js에서 실행할 준비가 될 때까지 API 호출을 수집하는 선입 선출 데이터 구조인 큐의 역할을 합니다. 대기열에 항목을 추가하려면 _gaq.push 메서드를 사용합니다.

API 호출을 큐로 푸시하려면 기존 자바스크립트 구문에서 명령어 배열로 변환해야 합니다. 명령어 배열은 특정 형식을 준수하는 자바스크립트 배열입니다. 명령어 배열의 첫 번째 요소는 호출하려는 추적기 객체 메서드의 이름입니다. 문자열이어야 합니다. 나머지 요소는 추적기 객체 메서드에 전달할 인수입니다. 어떤 자바스크립트 값이든 가능합니다.

다음 코드는 기존 문법을 사용하여 _trackPageview()를 호출합니다.

var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();

비동기 구문의 동등한 코드는 _gaq.push를 두 번 호출해야 합니다.

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

비동기 구문에서는 추적기 객체 생성이 암시되지만 추적기의 웹 속성 ID를 설정할 방법이 여전히 필요합니다. 이 기능을 제공하기 위해 _setAccount 메서드가 추가되었습니다. 다른 모든 추적기 객체 메서드는 비동기 추적과 기존 추적에서 동일합니다. 구문만 다릅니다.

비동기 구문에 관한 자세한 내용은 _gaq.push 메서드의 추적 참조를 확인하세요.

맨 위로

HTML 이벤트 핸들러를 사용하여 추적

또한 DOM 이벤트 핸들러 내에서 비동기 추적 구문을 사용해야 합니다. 예를 들어 다음 버튼은 클릭되면 이벤트를 생성합니다. 

<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>

브라우저에서 ga.js 로드를 완료하기 전에 이 버튼을 클릭하더라도 이벤트가 캡처되고 결국 실행됩니다. 기존 추적을 사용하면 브라우저에서 예외가 발생할 수 있습니다.

맨 위로

큐로 함수 푸시

명령어 배열 외에도 함수 객체를 _gaq 큐로 푸시할 수 있습니다. 함수는 임의의 JavaScript를 포함할 수 있으며 명령어 배열과 마찬가지로 _gaq에 푸시되는 순서대로 실행됩니다. 이 기법은 값을 반환하는 추적 API를 호출하는 데 유용합니다. 예를 들어 다음 코드는 링커 URL을 빌드하고 결과가 있는 링크의 href 속성을 설정합니다. 

_gaq.push(function() {
  var pageTracker = _gat._getTracker('UA-XXXXX-X');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

위 예에서는 _gat를 사용하여 추적기 객체를 만들지만 로컬 변수에 할당되어 있으므로 함수 외부의 코드는 사용할 수 없습니다. 이는 허용되지만 _gat._createTracker 메서드를 사용하여 영구적이고 전역적으로 액세스할 수 있는 객체를 만들 수 있습니다. 다음 코드는 이 작업의 작동 방식을 보여줍니다. 

_gaq.push(function() {
  var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

_gaq.push(['myTracker._trackPageview']);

위의 예에서는 함수 내에 비동기 추적기를 만든 다음 나중에 명령어 배열에서 이름으로 참조합니다.

반대의 사용 사례도 있을 수 있습니다. 예를 들어, 이전에 푸시한 명령어 배열을 통해 생성된 비동기 추적기 객체를 사용해야 한다면 _gat._getTrackerByName 메서드를 사용하세요. 다음 코드는 작동 방식을 보여줍니다. 

_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);

_gaq.push(function() {
  var pageTracker = _gat._getTrackerByName('myTracker');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

맨 위로

한 번의 푸시, 여러 명령어

각 호출에 _gaq.push(...)를 입력하는 대신 모든 명령어를 한 번에 푸시할 수 있습니다. 다음 코드는 이 기법을 보여줍니다. 

_gaq.push(
  ['_setAccount', 'UA-XXXXX-X'],
  ['_setDomainName', 'example.com'],
  ['_setCustomVar', 1, 'Section', 'Life & Style', 3],
  ['_trackPageview']
);

그 이유는 _gaq.push 메서드가 Array.push 메서드를 모방하여 한 번의 호출로 여러 항목을 푸시할 수 있기 때문입니다.

맨 위로

스니펫 분할

애널리틱스 스니펫을 페이지 하단에 넣고 싶은 경우 스니펫 전체를 하단에 넣을 필요가 없습니다. 스니펫을 절반으로 분할하면 비동기 로드의 이점 대부분을 유지할 수 있습니다. 즉, 앞부분은 페이지 상단에 두고 나머지는 하단으로 이동하면 됩니다. 추적 스니펫의 첫 번째 부분은 페이지 렌더링에 거의 또는 전혀 영향을 미치지 않으므로 해당 부분은 상단에 두고 ga.js를 삽입하는 스니펫 부분을 하단에 배치할 수 있습니다.

비동기 스니펫이 절반으로 분할된 페이지는 다음과 같습니다. 

<html>

<head>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_trackPageview']);
  </script>
</head>

<body>
  <p>Page Content</p>

  <script src="some_random_script.js"></script>

  <p>Page Content</p>

  <script type="text/javascript">  (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>
</body>
</html>

두 코드를 모두 자체 스크립트 태그로 래핑해야 하지만 원래 비동기 스니펫의 마지막 6줄만 하단으로 이동하면 됩니다. 메서드를 _gaq에 푸시하는 모든 줄은 상단에 유지될 수 있습니다.

맨 위로

일반적인 문제 방지

비동기 또는 기본 문법을 사용할 때는 다음 사항에 유의하세요.

  • 메서드 이름은 대소문자를 구분합니다.
    대소문자를 올바르게 적용하지 않고 메서드 이름을 사용하면 메서드 호출이 작동하지 않습니다. 예: 
    _gaq.push(['_trackpageview']);   // bad
_gaq.push(['_trackPageview']);   // good
  • 올바른 메서드 이름을 사용합니다.
    추적이 제대로 작동하지 않으면 메서드에 올바른 이름을 사용하고 있는지 확인하세요. 예: 
    _gaq.push(['_setDomain', 'example.com']);       // bad
_gaq.push(['_setDomainName', 'example.com']);   // good
  • 문자열만 따옴표와 함께 전달해야 합니다. 다른 모든 유형은 따옴표로 묶지 않아야 합니다.
    부울, 객체 리터럴, 함수 또는 배열과 같이 문자열이 아닌 값은 따옴표 없이 전달해야 합니다. 문자열로 해석되어야 하는 항목을 전달할 때는 따옴표만 사용합니다. 기존 구문에서 이전하는 경우 따옴표 없이 전달된 함수 매개변수는 비동기 구문에서 따옴표 없이 유지해야 합니다. 예: 
    _gaq.push(['_setAllowLinker', 'false']);    // bad
_gaq.push(['_setAllowLinker', false]);      // good
  • 문자열의 선행 또는 후행 공백이 포함되지 않아야 합니다.
    예: 
    _gaq.push(['_setAccount', ' UA-65432-1']);    // bad
_gaq.push(['_setAccount', 'UA-65432-1']);     // good

맨 위로

추적 사용 중지

경우에 따라 코드 스니펫을 삭제하지 않고 페이지에서 Google 애널리틱스 추적 코드를 사용 중지해야 할 수도 있습니다. 예를 들어 사이트의 개인정보처리방침에 방문자가 Google 애널리틱스 추적을 선택 해제할 수 있는 기능이 포함된 경우 이렇게 할 수 있습니다.

이제 ga.js 추적 스니펫에는 true로 설정된 경우 추적 스니펫이 데이터를 Google 애널리틱스로 전송하지 못하도록 중지하는 창 속성이 포함됩니다. Google 애널리틱스는 쿠키를 설정하거나 Google 애널리틱스 서버로 다시 데이터를 전송하려고 할 때 이 속성이 true로 설정되어 있는지 확인합니다. 이 경우 방문자에게 Google 애널리틱스 차단 브라우저 플러그인을 설치한 것과 동일한 효과가 있습니다.

추적을 사용 중지하려면 다음 창 속성을 true로 설정합니다.

window['ga-disable-UA-XXXXXX-Y'] = true;

여기서 UA-XXXXXX-Y 값은 추적을 사용 중지하려는 웹 속성 ID에 해당합니다.

추적 코드가 호출되기 전에 이 창 속성을 설정해야 합니다. 이 속성은 Google 애널리틱스 추적을 사용 중지하려는 각 페이지에서 설정해야 합니다. 속성을 설정하지 않거나 false로 설정하면 추적이 평소와 같이 작동합니다.

예를 들어 페이지의 Google 애널리틱스 추적 코드에 다음이 포함되어 있다고 가정해 보겠습니다.

_gaq.push['_setAccount', 'UA-123456-1']

해당 추적 코드가 쿠키를 설정하거나 Google 애널리틱스로 데이터를 다시 전송하지 못하게 하려면 추적 코드가 호출되기 전에 다음 코드를 사용합니다.

window['ga-disable-UA-123456-1'] = true;

여러 웹 속성 ID가 있는 페이지에서 여러 추적기를 사용하는 경우 각 웹 속성에 상응하는 window['ga-disable-UA-XXXXXX-Y'] 변수를 true로 설정해야 해당 페이지에서 Google 애널리틱스 추적을 완전히 사용 중지할 수 있습니다.

예

다음은 사용자에게 선택 해제 기능을 제공하는 데 사용할 수 있는 코드의 간단한 예입니다.

먼저 사이트에 새 HTML 링크를 추가하여 선택 해제 로직을 실행합니다.

<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>

그런 다음 ga.js 코드 스니펫 앞에 다음 코드 스니펫을 추가합니다. gaProperty 값을 UA-XXXX-Y에서 사이트에서 사용되는 속성으로 바꿔야 합니다. 이 값은 _setAccount 명령어에 전달하는 값과 동일합니다.

<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-XXXX-Y';

// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true;
}

// Opt-out function
function gaOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  window[disableStr] = true;
}
</script>

사용자가 선택 해제 HTML 링크를 클릭하면 맞춤 gaOptout 함수가 실행됩니다. 앞으로 오랫동안 쿠키가 설정되고 analytics.js 데이터 수집이 사용 중지됩니다. 사용자가 이 사이트로 돌아오면 위 스크립트가 수신 거부 쿠키가 설정되었는지 확인합니다. 사용 중지된 경우 analytics.js 데이터 수집도 중지됩니다.

SSL 강제 적용 (HTTPS)

Google 애널리틱스가 항상 SSL을 사용하여 데이터를 전송하도록 하려면 안전하지 않은 페이지 (HTTP)에서도 데이터를 전송하도록 하려면 다음 예와 같이 _gat._forceSSL 메서드를 사용합니다.

_gaq.push(['_setAccount', 'UA-12345-1']);
_gaq.push(['_gat._forceSSL']);       // Send all hits using SSL, even from insecure (HTTP) pages.
_gaq.push(['_trackPageview']);

맨 위로