Google 태그(gtag.js)는 웹사이트에 추가하여 Google 애널리틱스 4, Google Ads, Google Marketing Platform을 비롯한 다양한 Google 제품 전반에서 사용자 활동을 측정할 수 있는 코드 스니펫입니다. Google 태그에 대해 자세히 알아보기
본 가이드에서는 Google 태그를 콘텐츠 관리 시스템(CMS) 또는 웹사이트 작성 도구에 통합하여 최종 사용자에게 Google 측정 제품에 대한 액세스 권한을 제공하는 방법을 설명합니다.
대상
본 가이드는 사용자에게 Google 측정 제품과의 통합 기능을 제공하려는 콘텐츠 관리 시스템(CMS) 소유자 또는 웹사이트 제작자를 대상으로 하며, CMS 또는 웹사이트 작성 도구의 사용자를 대상으로 하지 않습니다.
시작하기 전에
Google 태그 개발자 ID가 있는지 확인하세요. Google 태그 개발자 ID가 없으면 Google 태그 개발자 ID 요청 양식을 작성하세요. 개발자 ID는 최종 사용자가 웹사이트 측정 코드에 추가하는 측정 ID, 전환 ID와 같은 ID와는 다릅니다.
개요
플랫폼을 Google 제품과 통합하려면 다음 단계를 따르세요.
Google 태그와의 통합 설정하기
고객은 Google 태그와 통합함으로써 gtag.js를 이용해 사이트의 모든 페이지에 Google 측정 제품을 배포할 수 있습니다. gtag.js와의 통합을 설정하기 전에 기존 태그 통합(예: analytics.js)을 모두 삭제해야 합니다.
Google 태그와의 통합을 설정하려면 기존 코드 스니펫을 다음
스니펫으로 바꾸세요. 사용자가 TAG_ID를 자체 태그 ID로
바꿀 수 있어야 합니다.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID
gtag('config', 'GOOGLE_TAG_ID');
</script>
다음에 유의하세요.
- 광고주는
allow_ad_personalization_signals매개변수를 이용한 리마케팅과 같은 광고 개인 최적화 기능을 선택 해제할 수 있습니다(개인 맞춤 광고 데이터 수집 중지 참고). - Google 태그 스니펫은 각 페이지에 한 번만 표시되는 것이 좋습니다. 이 스니펫에 여러 태그 ID를 포함할 수 있습니다. 기존 gtag.js 인스턴스가 있는 경우 기존 태그에 새 태그 ID를 추가해야 합니다. 자세히 알아보기
사용자 입력 구조 업데이트하기
고객은 배포하는 Google 측정 제품에 관계없이 인터페이스 하나를 통해 여러 형식의 Google 태그 ID를 제공할 수 있어야 합니다.
예를 들어 다음은 간단한 Google 태그 입력 상자입니다. 통합은 Google 태그 배포로 프레이밍해야 합니다. 이에 대한 부제를 Google Ads 및 Google 애널리틱스를 배포하는 방법이라고 정할 수 있습니다.
다음 다이어그램에는 애널리틱스 및 Google Ads에 대한 각각의 사용자 플로우가 플랫폼에 어떻게 포함되는지 나와 있으며, 각 플로우는 사용자가 Google 태그 ID를 제공하는 인터페이스로 연결됩니다.
태그 ID 입력에서 정규 표현식 패턴 [AZ]{1,3}\w{5,}[\w]*를 사용하여 변형된 여러 ID가 허용되어야 합니다.
Consent API(일명 동의 모드) 구현하기
Google 태그에는 사용자 동의를 관리하기 위한 Consent API가 기본으로 포함되어 있습니다. 이러한 API는 광고 목적의 쿠키에 대한 사용자 동의를 분석 목적의 사용자 동의와 구분할 수 있습니다.
이 경우 고객이 최소한 gtag('consent', 'update' {...}) 호출을 통합할 수 있으며, 별도로 조치를 취하지 않아도 됩니다. 이렇게 하면 Google 태그(Google Ads, 플러드라이트, Google 애널리틱스, 전환 링커)가
최신 사용자 동의 상태를 읽고 &gcs 매개변수를 통해 Google에 보내는
네트워크 요청에 상태를 포함할 수 있습니다.
추가 구현 단계는 동의 모드에서 동의 여부에 따라 태그가 실행되도록
gtag('consent', default' {...}) 상태를 배포하거나, 광고주가 UI 등을 통해 이 상태를 배포하고 Google 태그를
차단 해제(동의 기반 조건부 실행을 사용하지 않음)하도록
지원하는 것입니다.
구현에 관한 자세한 내용은 동의 설정 관리(웹)를 참고하세요.
이벤트 데이터 설정하기
풍부한 이벤트 데이터를 고객 웹사이트에서 Google 계정으로 전송해야 하며,
고객은 별도의 조치를 취하지 않아도 됩니다. 예를 들어 구매 유입경로에서
발생하는 이벤트(add_to_cart, begin_checkout,
add_payment_info, add_shipping_info, purchase), 리드 생성 및
가입을 추가할 수 있습니다.
다음은 이벤트 추가와 관련된 권장사항입니다.
- 최대한 많은 정보 기록하기
- 핵심 이벤트를 8개 이상 설정하기
- 전자상거래 이벤트의 우선순위 설정하기
최대한 많은 정보 기록하기
가능하면 기본적으로 이벤트를 설정해야 하며, 이러한 이벤트에는 다음이 포함됩니다.
- 전환 이벤트(예:
purchase,sign_up) - 전환 이벤트 전의 이벤트(예:
add_to_cart) - 고객이 최종 사용자와 소통하는 방식을 이해하도록 돕는 미디어 상호작용과 같은 행동 참여
전환 이벤트 스니펫은 전환 페이지에만 추가해야 합니다(예: 구매 확인, 양식 제출 확인). 이 경우에도 사이트의 모든 페이지에 Google 태그를 추가해야 합니다.
이벤트는 event 명령어를 이용해 전송됩니다.
여기에는 위에서 설명한 전체 사이트 태그에 포함된 것과 동일한
Google 태그 개발자 ID가 포함됩니다.
gtag('event', 'my_event', {
'developer_id.<developer ID>': true,
// Additional event parameters
});
예를 들어 event 명령어를
사용하여 method 값이 'Google'인 login 이벤트를 전송할 수 있습니다.
gtag('event', 'login', {
'developer_id.<developer ID>': true,
'method': 'Google'
});
<!-- Event snippet for sales conversion page -->
<script>
gtag('event', 'conversion', {
'developer_id.<developer ID>': true,
'value': <value>,
'currency': '<currency>',
'transaction_id': '<transaction_id>'
});
</script>
다음에 유의하세요.
- 개발자 ID(
<developer ID>)는 고유한 정보이며, 플랫폼에 따라 다릅니다. 개발자 ID를 모든 이벤트에 추가하세요. - 다음 매개변수는 선택사항이며 생략할 수 있습니다.
'value'는 전환의 숫자 값(예: 구매 가격)입니다.'currency'는 3자리 통화 코드이며, 여러 통화를 허용하는 광고주에게 유용합니다.'transaction_id'는 거래의 고유 ID(예: 주문 ID)이며, 중복 삭제 목적으로 사용됩니다.
- 일부 매개변수는 선택사항이지만, 이벤트별로 최대한 많은 정보를 포함하는 것이 좋습니다.
- 매개변수는 사용자가 웹사이트 또는 앱과 상호작용하는 방식에 대한 추가 정보를 제공합니다. 예를 들어 판매 중인 제품을 사용자가 조회할 때 사용자가 조회한 제품을 설명하는 매개변수(예: 이름, 카테고리, 가격)를 포함할 수 있습니다.
- 일부 매개변수는 Google 애널리틱스에서 사전 빌드된 측정기준 및 측정항목을 자동으로 채우며 사용자는 이를 통해 고객을 더 잘 이해할 수 있습니다.
클릭 기반의 전환 이벤트(예: AJAX를 사용하는 사이트의 버튼 클릭 또는 동적 응답)를 측정하려는 경우에는 다음 스니펫을 사용할 수도 있습니다.
<!-- Event snippet for sales conversion page
In your HTML page, add the snippet and call gtag_report_conversion
when someone clicks on the chosen link or button. -->
<script>
function gtag_report_conversion(url) {
var callback = function () {
if (typeof(url) != 'undefined') {
window.location = url;
}
};
gtag('event', 'conversion', {
'developer_id.<developer ID>': true,
'value': <value>,
'currency': '<currency>',
'transaction_id': '<transaction_id>',
'event_callback': callback
});
return false;
}
</script>
핵심 이벤트를 8개 이상 설정하기
사이트 소유자에게 가장 큰 가치를 제공하는 핵심 이벤트 세트를 설정하는 것이 좋습니다. 최소한 다음 이벤트를 설정하는 것이 좋습니다.
view_item_list: 사용자가 상품 목록(예: 제품 목록)을 조회하는 경우 자세히 알아보기gtag('event', 'view_item_list', { item_list_id: "related_products", item_list_name: "Related products", items: [{ item_id: "SKU_123", item_name: "Test Item", currency: "USD", discount: 2.22, price: 99.9, quantity: 1 }] });add_to_cart: 사용자가 장바구니에 하나 이상의 제품을 추가하는 경우 자세히 알아보기gtag('event', 'add_to_cart', { value: 99.0, currency: "USD", items: [{ item_id: "SKU_123", item_name: "Test Product", price: 99.0, currency: ‘USD’, quantity: 1, item_category: "All Products" }] });begin_checkout: 사용자가 하나 이상의 제품에 대한 결제 과정을 시작하는 경우 자세히 알아보기gtag('event', 'begin_checkout') { value: 99.0, currency: "USD", items: [{ item_id: "SKU_123", item_name: "Test Product", price: 99.0, currency: ‘USD’, quantity: 1, item_category: "All Products" }] });purchase: 사용자가 하나 이상의 제품 또는 서비스를 구매하는 경우 자세히 알아보기gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});sign_up: 사용자가 가입하여 최종 사용자가 가장 인기 있는 가입 방법(예: Google 계정, 이메일 주소)을 볼 수 있는 경우 자세히 알아보기gtag('event', 'sign_up', {method: 'web'});generate_lead: 사용자가 양식을 제출하는 경우 자세히 알아보기gtag('event', 'generate_lead', {value: XX, currency: 'USD'});subscribe: 사용자가 서비스 또는 뉴스레터를 구독하는 경우gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});book_appointment: 사용자가 약속을 예약하는 경우gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});
추가 권장사항
Google은 특히 전자상거래를 위한 더 많은 이벤트와 매개변수를 지원합니다. 일반적으로 다음을 포착하는 것이 좋습니다.
- 값과 직접 연결된 성공 이벤트
- 핵심 전환에 기여하는 성공 이벤트(add_to_cart, sign_up, 등)
- 광고주가 최종 사용자와의 소통 방식을 이해하는 데 도움이 되는 참여 및 사용자 상호작용
다음은 이벤트 수집에 대한 상세 설명이 나와 있는 추가 리소스입니다.
이 스키마의 잠재적인 확장에 대해 논의하고 싶습니다. 제안하고 싶은 사항이 있으면 저희에게 알려주시기 바랍니다.
업데이트된 통합 확인하기
변경사항을 프로덕션에 푸시하기 전에 다음 태그와의 호환성을 확인하세요.
- Google 애널리틱스 4 도착 페이지가 있는 Google 태그
- 리마케팅 및 전환 측정을 위한 Google 태그
또한 다음 도구를 사용하여 전환 페이지를 포함한 모든 페이지에서 태그가 올바르게 실행되는지 확인합니다.
- Google Tag Assistant: Tag Assistant를 사용하면 어떤 Google 태그가 어떤 순서로 실행되었는지 확인할 수 있습니다. Tag Assistant 디버그 모드에서는 데이터 영역으로 전달되는 데이터와 해당 데이터 교환을 트리거한 이벤트가 표시됩니다.
- Chrome 개발자 도구: Network 탭을 사용하여 'google'이 포함된 요청을 필터링하면 데이터가 전송되는 방식을 확인할 수 있습니다.
- (서버 측) Google 애널리틱스 실시간 보고서: 무료 Google 애널리틱스 계정을 만들고 실시간 보고서를 참고하여 Google 서버에서 태그 조회를 수신하는지 확인하세요.
버그를 신고하거나 누락된 정보에 관한 의견을 제공하려면 콘텐츠 관리 시스템 지원 양식을 작성하세요.
가능하면 지속적인 확인을 위해 테스트 액세스 권한을 Google과 공유하세요.
사용자 배포 안내 업데이트하기
내 구현을 통해 Google 측정 제품을 구현하는 명확한 방법이 포함되도록 문서를 업데이트하세요. Google에서 의견을 보낼 수 있도록 CMS 통합 설정 문서 검토 양식을 작성하여 안내 초안을 공유해 주세요.