자바스크립트 측정 스니펫의 마지막 줄은 ga() 명령어 대기열에 send 명령어를 추가하여 Google 애널리틱스에 조회수를 전송합니다.
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
전송하는 객체는 이전 코드 행에서 생성되도록 예약되어 있는 추적기이며, 전송되는 데이터는 해당 추적기에 저장된 데이터입니다.
이 가이드에서는 Google 애널리틱스로 데이터를 전송하는 다양한 방법과 전송할 데이터를 관리하는 방법을 설명합니다.
조회, 조회 유형, 측정 프로토콜
추적기가 Google 애널리틱스로 데이터를 전송하는 것을 조회라고 하며, 조회마다 조회 유형이 있어야 합니다. Google 애널리틱스 태그는 pageview 유형의 조회를 전송합니다. 다른 조회 유형에는 screenview, event, transaction, item, social, exception, timing가 있습니다. 이 가이드에서는 모든 조회 유형에 공통된 개념과 방법을 간략하게 설명합니다. 각 조회 유형에 대한 개별 가이드는 왼쪽 탐색 메뉴의 일반적인 사용자 상호작용 측정 섹션에서 찾을 수 있습니다.
조회는 쿼리 문자열로 인코딩된 필드와 값 쌍으로 구성된 HTTP 요청이며 측정 프로토콜로 전송됩니다.
analytics.js를 사용하는 페이지를 로드할 때 브라우저의 개발자 도구를 열어 둔 경우 네트워크 탭에서 조회가 전송되고 있는 것을 확인할 수 있습니다. google-analytics.com/collect로 전송된 요청을 찾습니다.
전송되는 데이터
조회를 측정 프로토콜로 전송할 때 추적기는 현재 저장되어 있고 유효한 측정 프로토콜 매개변수인 모든 필드를 전송합니다. 예를 들어 title 및 location 같은 필드는 전송되지만 cookieDomain 및 hitCallback은 유효하지 않습니다.
경우에 따라서는 현재 조회수에 대해서는 아래의 속성 값을 제외하고 Google 애널리틱스에 필드를 전송하는 경우가 있습니다 이러한 예로는 eventAction 및 eventLabel 필드가 현재 조회에만 관련된 이벤트 조회가 있습니다.
현재 조회만 있는 필드를 보내려면 필드를 send 메서드에 인수로 전달하면 됩니다. 이후 모든 조회와 함께 필드 데이터를 보내려면 set 메서드를 사용하여 추적기를 업데이트해야 합니다.
메서드 전송
추적기의 send 메서드는 추적기 객체 자체에서 직접 호출하거나 ga() 명령어 큐에 send 명령어에 추가하여 호출할 수 있습니다. 대부분의 경우 추적기 객체에 대한 참조가 없으므로 ga() 명령어 대기열을 사용하여 추적기 데이터를 Google 애널리틱스로 전송하는 것이 좋습니다.
ga() 명령어 대기열 사용
send 명령어 큐에 ga() 명령어 대기열에 추가하기 위한 서명은 다음과 같습니다.
ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);
위에서 언급했듯이 hitType, ...fields, fieldsObject 매개변수에 지정된 값은 현재 조회에만 전송됩니다. 해당 이벤트는 추적기 객체에 저장되지 않으며 이후의 조회와 함께 전송되지 않습니다.
send 명령어로 전달된 필드가 이미 추적기 객체에 설정된 경우 추적기에 저장된 값 대신 명령어에 전달된 값이 사용됩니다.
send 명령어를 호출할 때는 hitType을 지정해야 하며, 지정된 유형에 따라 다른 매개변수도 필요할 수 있습니다. 개별 가이드에 대한 자세한 내용은 왼쪽 탐색 메뉴의 일반적인 사용자 상호작용 측정에서 찾을 수 있습니다.
모든 조회 유형에서 작동하는 send 명령어를 사용하는 가장 간단한 방법은 fieldsObject 매개변수를 사용하여 모든 필드를 전달하는 것입니다. 예:
ga('send', {
hitType: 'event',
eventCategory: 'Video',
eventAction: 'play',
eventLabel: 'cats.mp4'
});
편의상 특정 조회 유형을 통해 일반적으로 사용되는 필드를 send 명령어에 인수로 직접 전달할 수 있습니다. 예를 들어 '이벤트' 조회 유형에 대한 위의 send 명령어는 다음과 같이 다시 작성될 수 있습니다.
ga('send', 'event', 'Video', 'play', 'cats.mp4');
다양한 조회 유형의 인수로 전달할 수 있는 필드의 전체 목록은 전송 메서드 참조의 '매개변수' 섹션을 참조하세요.
이름이 지정된 추적기 사용
기본 추적기 대신 이름이 지정된 추적기를 사용하는 경우 명령어 문자열에 이름을 전달할 수 있습니다.
'myTracker'라는 추적기에서 다음 send 명령어가 호출됩니다.
ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');
추적기 객체 자체에서
추적기 객체에 대한 참조가 있는 경우 추적기의 send 메서드를 직접 호출할 수 있습니다.
ga(function(tracker) {
tracker.send('event', 'Video', 'play', 'cats.mp4');
});
조회가 전송된 시점 확인
경우에 따라 즉시 Google 애널리틱스로 조회가 전송되도록 하여 조치를 취할 수 있도록 해야 합니다. 사용자가 현재 페이지에서 벗어나는 특정 상호작용을 기록해야 하는 경우 흔히 발생합니다. 대부분의 브라우저는 페이지 로드 해제를 시작하자마자 자바스크립트 실행을 중지하며, 조회를 전송하는 analytics.js 명령어가 실행되지 않을 수 있습니다.
예를 들어, 사용자가 양식의 제출 버튼을 클릭했음을 기록하는 이벤트를 Google 애널리틱스로 전송하려는 경우가 있습니다. 대부분의 경우 제출 버튼을 클릭하면 다음 페이지가 즉시 로드되며 ga('send', ...) 명령어가 실행되지 않습니다.
이를 해결하기 위해 이벤트를 가로채서 페이지 로드 취소를 중지할 수 있습니다. 그런 다음 평소와 같이 조회를 Google 애널리틱스로 전송할 수 있으며, 조회가 전송되면 프로그래매틱 방식으로 양식을 다시 제출할 수 있습니다.
콜백 조회
조회가 전송되었을 때 알림을 받으려면 hitCallback 필드를 설정하세요. hitCallback는 조회가 전송되는 즉시 호출되는 함수입니다.
다음 예시는 양식의 기본 제출 작업을 취소하고, Google 애널리틱스로 조회를 전송한 다음, hitCallback 함수를 사용하여 양식을 다시 제출하는 방법을 보여줍니다.
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: function() {
form.submit();
}
});
});
제한 시간 처리
위의 예시는 제대로 작동하지만 한 가지 심각한 문제가 있습니다. 어떤 이유로든 analytics.js 라이브러리가 로드되지 않으면 hitCallback 함수가 실행되지 않습니다. hitCallback 함수가 실행되지 않으면 사용자가 양식을 제출할 수 없습니다.
중요한 사이트 기능을 hitCallback 함수에 넣을 때마다 항상 시간 제한 함수를 사용하여 analytics.js 라이브러리가 로드되지 않는 경우를 처리해야 합니다.
다음 예시는 제한 시간을 사용하도록 위의 코드를 업데이트합니다. 사용자가 제출 버튼을 클릭한 후에도 hitCallback가 실행되지 않고 1초가 지나면 양식이 다시 제출됩니다.
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Creates a timeout to call `submitForm` after one second.
setTimeout(submitForm, 1000);
// Keeps track of whether or not the form has been submitted.
// This prevents the form from being submitted twice in cases
// where `hitCallback` fires normally.
var formSubmitted = false;
function submitForm() {
if (!formSubmitted) {
formSubmitted = true;
form.submit();
}
}
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: submitForm
});
});
사이트 전체의 여러 위치에서 위의 패턴을 사용한다면 시간 제한을 처리하는 유틸리티 함수를 만드는 것이 더 쉬울 것입니다.
다음 유틸리티 함수는 함수를 입력으로 받아 새 함수를 반환합니다. 반환된 함수가 제한 시간 전에 호출되면 (기본 제한 시간은 1초임) 제한 시간을 지우고 입력 함수를 호출합니다. 반환된 함수가 타임아웃 기간 전에 호출되지 않으면 입력 함수는 이와 관계없이 호출됩니다.
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
이제 조회가 실패하거나 analytics.js 라이브러리가 로드되지 않는 경우에도 사이트가 정상적으로 작동하도록 시간 제한으로 모든 hitCallback 함수를 래핑할 수 있습니다.
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: createFunctionWithTimeout(function() {
form.submit();
})
});
});
다른 전송 메커니즘 지정
기본적으로 analytics.js는 조회를 최적으로 전송하는 데 사용할 HTTP 메서드와 전송 메커니즘을 선택합니다. 세 가지 옵션은 다음과 같습니다.'image' (Image 객체),'xhr' (XMLHttpRequest 객체)'beacon' 새로운navigator.sendBeacon 메서드를 사용하여 축소합니다.
이전 두 가지 방법은 이전 섹션에서 설명한 문제를 공유합니다 (페이지가 로드 취소되면 조회가 전송되지 않는 경우가 많음). 반면에 navigator.sendBeacon 메서드는 이 문제를 해결하기 위해 만들어진 새로운 HTML 기능입니다.
사용자의 브라우저에서 navigator.sendBeacon을 지원하면 'beacon'을 transport 메커니즘으로 지정할 수 있으며 조회 콜백 설정에 관해 걱정할 필요가 없습니다.
다음 코드는 이를 지원하는 브라우저에서 전송 메커니즘을 'beacon'로 설정합니다.
ga('create', 'UA-XXXXX-Y', 'auto');
// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');
다음 단계
특정 유형의 사용자 상호작용을 측정하려면 복잡한 구현이 필요할 수도 있습니다. 하지만 많은 경우 이러한 구현은 이미 analytics.js 플러그인으로 개발되어 제공됩니다. 다음 가이드에서는 ga() 명령어 대기열과 함께 analytics.js 플러그인을 사용하는 방법을 설명합니다.