디버깅

이 가이드에서는 analytics.js 라이브러리의 디버그 버전을 사용하여 구현이 올바르게 작동하는지 확인하는 방법을 설명합니다.

analytics.js 라이브러리의 디버그 버전

Google 애널리틱스는 자바스크립트 콘솔에 실행 중인 자세한 메시지를 기록하는 analytics.js 라이브러리의 디버그 버전을 제공합니다. 이 메시지에는 태그가 잘못 설정된 경우 표시되는 경고 및 오류 메시지뿐 아니라 성공적으로 실행된 명령어도 포함됩니다. 또한 Google 애널리틱스로 전송된 각 조회를 분석하므로 정확히 어떤 데이터가 캡처되는지 확인할 수 있습니다.

자바스크립트 태그에서 URL을 https://www.google-analytics.com/analytics.js에서 https://www.google-analytics.com/analytics_debug.js으로 변경하여 analytics.js의 디버그 버전을 사용 설정할 수 있습니다.

(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_debug.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

조회를 전송하지 않고 구현 테스트

analytics.js의 디버그 버전은 디버그 외 버전과 마찬가지로 Google 애널리틱스로 데이터를 전송합니다. 이를 통해 analytics.js 코드를 실행하는 웹사이트를 방문하여 데이터 캡처 방법을 방해하지 않고 구현을 검사할 수 있습니다.

특정 환경 (예: 개발 또는 테스트 환경)에서 Google 애널리틱스로 데이터를 전송하고 싶지 않은 경우 sendHitTask 작업을 사용 중지하면 아무것도 전송되지 않습니다.

localhost에서 실행하는 경우 다음 코드를 사용하면 조회가 Google 애널리틱스로 전송되지 않습니다.

(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_debug.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');

if (location.hostname == 'localhost') {
  ga('set', 'sendHitTask', null);
}

ga('send', 'pageview');

추적 디버깅

추적 디버깅을 사용 설정하면 콘솔에 더 자세한 정보가 출력됩니다.

추적 디버깅을 사용 설정하려면 위에 설명된 대로 analytics.js의 디버그 버전을 로드하고 ga() 명령어 큐를 호출하기 전에 다음 자바스크립트 줄을 추가합니다.

window.ga_debug = {trace: true};

추적 디버깅이 사용 설정된 전체 태그는 다음과 같습니다.

(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_debug.js','ga');

window.ga_debug = {trace: true};
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Google 애널리틱스 디버거 Chrome 확장 프로그램

또한 Google 애널리틱스에서는 태그를 변경하지 않고도 analytics.js의 디버그 버전을 사용 설정할 수 있는 Chrome 확장 프로그램을 제공합니다. 이를 통해 자체 사이트를 디버깅하고 analytics.js로 Google 애널리틱스를 구현한 사례를 확인할 수 있습니다.

Google Tag Assistant

Google Tag Assistant는 웹사이트에서 태그를 확인하고 일반적인 문제를 해결하는 데 도움이 되는 Chrome 확장 프로그램입니다. 이 도구는 analytics.js 구현을 로컬에서 디버깅 및 테스트하고 코드를 프로덕션에 배포하기 전에 모든 항목이 올바른지 확인하는 데 적합한 도구입니다.

Tag Assistant를 사용하면 일반적인 사용자 흐름을 기록할 수 있습니다. 전송한 모든 조회를 수집하고 문제가 있는지 확인한 후 상호작용에 대한 전체 보고서를 제공합니다. 문제 또는 가능한 개선사항을 감지하면 알려줍니다.

자세히 알아보려면 고객센터에서 Tag Assistant 정보Tag Assistant Recordings 정보를 참조하세요. 또한 오류를 포착하고 교차 도메인 측정과 같은 고급 구현의 유효성을 확인하는 데 사용되는 Tag Assistant를 보여주는 데모 동영상을 시청할 수 있습니다.