gtag.js를 사용하여 Google 애널리틱스로 데이터 보내기

이 페이지에서는 gtag.js 명령어를 사용하여 사이트에서 Google 애널리틱스로 데이터를 전송하는 방법을 설명합니다.

event 명령어로 데이터 전송

웹페이지에 전역 스니펫을 추가한 후 event 명령어를 사용하여 Google 애널리틱스로 데이터를 보냅니다. 예를 들어 다음 event 명령어를 사용하여 사용자가 Google 계정으로 로그인했음을 나타냅니다.

gtag('event', 'login', {'method': 'Google'});

API 참조에서 event 명령어에 대해 자세히 알아보세요.

그룹 및 속성으로 데이터 라우팅

한 개 이상의 측정 정보를 하나 이상의 Google 애널리틱스 속성 ID로 전송하고 다른 정보 세트를 다른 속성 ID로 전송할 수 있습니다. 속성을 그룹으로 구성하여 그룹으로 라우팅할 수 있습니다.

예를 들어 다음 코드 예시에서는 두 개의 Google 애널리틱스 속성을 포함하는 'agency' 그룹으로 sign_in 이벤트를 라우팅하는 방법을 보여줍니다.

// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });

// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });

데이터 그룹화 및 라우팅 방법 자세히 알아보기

이벤트가 전송된 시점 확인하기

경우에 따라 이벤트가 즉시 Google 애널리틱스로 전송되었는지 확인하여 즉시 조치를 취할 수 있도록 해야 합니다. 사용자가 현재 페이지에서 벗어나는 특정 상호작용을 기록해야 하는 경우 흔히 발생합니다. 대부분의 브라우저는 다음 페이지가 로드되는 즉시 자바스크립트 실행을 중단하며, 이는 gtag.js event 명령어가 실행되지 않을 수도 있습니다.

예를 들어 사용자가 양식의 제출 버튼을 클릭했음을 기록하는 이벤트를 Google 애널리틱스로 전송할 수 있습니다. 대부분의 경우 event 버튼을 누르기 전에 제출 버튼을 클릭하면 다음 페이지가 즉시 로드되기 시작합니다.

이를 방지하려면 Google 애널리틱스를 통해 이벤트를 보낼 수 있도록 이벤트를 가로채서 다음 페이지의 로드를 중단하세요. 이벤트가 전송된 후 양식을 프로그래매틱 방식으로 제출합니다.

이벤트 콜백 함수 구현

이벤트가 성공적으로 전송되는 즉시 호출되는 이벤트 콜백 함수를 구현할 수 있습니다.

다음은 양식의 기본 제출 작업을 취소하고 이벤트를 Google 애널리틱스로 전송한 다음 이벤트 콜백 함수를 사용하여 양식을 다시 제출하는 방법을 보여주는 예입니다.

// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevent the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Send the event to Google Analytics and
  // resubmit the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});

제한 시간 처리

위의 예로 한 가지 단점이 있습니다. gtag.js 라이브러리가 로드되지 않으면 이벤트 콜백 함수가 실행되지 않으며 사용자는 양식을 제출할 수 없습니다.

중요한 사이트 기능을 이벤트 콜백 함수 안에 넣을 때마다 항상 시간 제한 함수를 사용하여 gtag.js 라이브러리가 로드되지 않는 경우를 처리해야 합니다.

다음 예에서는 제한 시간을 사용하도록 위의 코드를 개선합니다. 사용자가 제출 버튼을 클릭한 후 이벤트 콜백 함수가 실행되지 않은 상태에서 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);

  // Monitors whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where the event callback function 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.
  gtag('event', 'signup_form_complete', {
    'event_callback': submitForm
  });
});

사이트 전체에서 위의 패턴을 사용하는 경우 시간 제한을 처리하는 유틸리티 함수를 만듭니다.

다음 유틸리티 함수는 함수를 입력으로 받아 새 함수를 반환합니다. 반환된 함수가 타임아웃 기간 (기본 타임아웃은 1초) 전에 호출되면 타임아웃을 지우고 입력 함수를 호출합니다. 반환된 함수가 타임아웃 기간 전에 호출되지 않으면 입력 함수는 이와 관계없이 호출됩니다.

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

이제 이벤트가 전송되지 않거나 gtag.js 라이브러리가 로드되지 않는 경우에도 모든 이벤트 콜백 함수를 시간 초과로 래핑하여 사이트가 정상적으로 작동할 수 있습니다.

// 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.
  gtag('event', 'signup_form', { 'event_callback': {
    createFunctionWithTimeout(function() {
      form.submit();
    })
  }});
});

다른 전송 메커니즘 지정하기

기본적으로 gtag.js는 조회를 최적으로 전송하는 HTTPS 메서드와 전송 메커니즘을 선택합니다. 세 가지 옵션은 다음과 같습니다.

  • 'image' (Image 객체 사용)
  • 'xhr' (XMLHttpRequest 객체 사용)
  • 'beacon' (navigator.sendBeacon 메서드 사용)

처음 두 가지 방법은 이전 섹션에서 설명한 문제를 공유합니다. 여기에서 페이지가 로드 취소되면 조회가 전송되지 않습니다. navigator.sendBeacon 메서드는 조회 콜백을 설정하지 않고도 조회를 웹 서버로 비동기적으로 전송하여 이 문제를 해결합니다.

다음 코드는 이를 지원하는 브라우저의 전송 메커니즘을 'beacon'로 설정합니다.

gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});