동의 모드 템플릿 만들기

다음은 Google 태그 관리자(GTM)를 사용하는 웹사이트에서 동의 관리 솔루션을 관리하는 개발자를 위한 도움말입니다.

이 페이지에서는 Google 태그 관리자의 동의 유형을 소개하며 해당 유형을 동의 관리 솔루션에 통합하는 방법을 설명합니다.

태그 템플릿을 제공하면 사용자가 코드를 사용하지 않아도 동의 솔루션을 통합할 수 있으므로 상당한 시간과 노력을 절약할 수 있습니다.

사용자는 동의 모드 템플릿으로 기본 동의 상태를 설정하고 Google 태그 관리자에 방문자의 동의 선택을 전달할 수 있습니다. 이렇게 하면 동의 모드를 지원하는 Google 및 서드 파티 태그가 최적의 상태로 작동합니다.

템플릿 제작자는 동의 모드 템플릿을 내부용으로 구현하거나 커뮤니티 템플릿 갤러리에 게시하여 공개할 수 있습니다. 동의 모드 템플릿을 제공하는 동의 관리 플랫폼(CMP) 제공업체는 Google의 동의 모드 문서에 표시되고 템플릿 갤러리 선택 도구에 자사 템플릿을 포함할 수 있습니다.

gtag consent 명령어를 사용하는 템플릿은 만들지 마세요. 대신 Tag Manager API updateConsentState를 사용하세요. gtag 명령어는 대기 중인 다른 모든 메시지 이후의 목록에 추가되고, 처리되지 않은 상태에서 다음 이벤트가 시작될 수 있습니다. 자세한 내용은 데이터 영역 정보 처리 방식을 참고하세요.

Google 및 서드 파티 태그는 granted 또는 denied의 동의 상태를 기반으로 저장 동작을 조정합니다. 다음 동의 유형의 경우 동의 상태 확인 기능이 기본적으로 포함될 수 있습니다.

동의 유형	설명
`ad_storage`	광고와 관련된 저장을 사용 설정합니다(예: 쿠키).
`ad_user_data`	온라인 광고를 위해 사용자 데이터를 Google에 전송하는 데 대한 동의를 설정합니다.
`ad_personalization`	개인 맞춤 광고에 대한 동의를 설정합니다.
`analytics_storage`	분석과 관련된 저장을 사용 설정합니다(예: 쿠키, 방문 시간).
`functionality_storage`	웹사이트 또는 앱의 기능을 지원하는 저장을 사용 설정합니다(예: 언어 설정).
`personalization_storage`	맞춤설정과 관련된 저장을 사용 설정합니다(예: 동영상 추천).
`security_storage`	보안과 관련된 저장을 지원합니다(예: 인증 기능, 사기 방지 및 기타 사용자 보호).

동의 모드는 방문자 동의 여부를 추적하고 이에 따라 태그 동의 상태 확인을 통해 태그 동작이 조정됩니다. 새 동의 템플릿을 만들 때는 다음 권장사항을 따르세요.

gtag consent 대신 태그 관리자 동의 모드 API인 setDefaultConsentState 및 updateConsentState를 사용합니다.

중요: gtag 명령어는 대기 중인 다른 모든 메시지 이후의 목록에 추가되고, 처리되지 않은 상태에서 다음 이벤트가 시작될 수 있습니다. 자세한 내용은 데이터 영역 처리 방식을 참고하세요.
동의 초기화 - 모든 페이지 트리거를 사용하여 실행 후 즉시 기본 동의 상태를 설정하세요.
그런 다음 CMP가 방문자에게 모든 관련 동의 유형에 대한 동의를 부여하거나 거부하라는 메시지를 최대한 빨리 표시해야 합니다.
방문자가 동의 여부를 밝히면 CMP는 업데이트된 동의 상태를 전달해야 합니다.

1. 새 템플릿 만들기

이 구현 방법에서는 템플릿에 기본 동의 상태를 유지하기 위한 필드 하나를 만듭니다. 구현 코드는 런타임 시 이 필드를 읽어 기본 동의 상태를 설정합니다. 업데이트 명령어의 경우 코드가 동의 솔루션에 의해 설정된 쿠키를 읽어 방문자 동의 여부를 저장하려고 시도합니다. 또한 방문자가 아직 동의 여부를 선택하지 않았거나 변경하기로 결정하는 경우를 처리하기 위해 updateConsentState의 콜백을 설정할 수도 있습니다.

동의 템플릿을 만들려면 다음 단계를 따르세요.

Google 태그 관리자 계정에 로그인합니다.
왼쪽 탐색 메뉴에서 템플릿을 선택합니다.
태그 템플릿 창에서 새로 만들기를 클릭합니다.

기본 동의 상태를 설정하려면 다음 단계를 따르세요.

필드 탭을 선택한 다음 필드 추가 > 매개변수 표를 클릭합니다.
이름을 defaultSettings로 변경합니다.
필드를 펼칩니다.
표시 이름을 Default settings로 업데이트합니다.
열 추가를 클릭하고 텍스트 입력을 선택한 다음 이름을 region으로 변경하고 고유한 항목 값 필요 체크박스를 선택합니다.
열을 펼치고 표시 이름을 Region (leave blank to have consent apply to all regions)으로 변경합니다. 괄호 안의 설명은 템플릿 사용자를 위한 정보입니다. 여러 지역에서 기본 동의 상태를 설정하는 방법을 자세히 알아보세요.
열 추가를 클릭하고 텍스트 입력을 선택한 다음 이름을 granted로 변경합니다.
열을 펼치고 표시 이름을 Granted Consent Types (comma separated)로 변경합니다.
열 추가를 클릭하고 텍스트 입력을 선택한 다음 이름을 denied로 변경합니다.
열을 펼치고 표시 이름을 Denied Consent Types (comma separated)로 변경합니다.

선택사항: 광고 데이터 삭제에 대한 지원을 추가하려면 다음 단계를 따르세요.

필드 추가를 클릭하고 체크박스를 선택한 후 필드 이름을 ads_data_redaction으로 변경합니다.
표시 이름을 Redact Ads Data로 업데이트합니다.

광고 데이터 삭제 사용 시 쿠키 작동 방식에 관해 자세히 알아보세요.

선택사항: URL 매개변수를 통한 전달에 대한 지원을 추가하려면 다음 단계를 따르세요.

필드 추가를 클릭하고 체크박스를 선택한 후 필드 이름을 url_passthrough로 변경합니다.
표시 이름을 Pass through URL parameters로 업데이트합니다.

URL 매개변수를 통한 전달에 대해 자세히 알아보세요.

구현 코드를 추가하려면 다음 단계를 따르세요.

템플릿 편집기에서 코드 탭을 엽니다.
다음 코드 샘플에서 자리표시자 필드를 수정합니다.
코드를 복사한 다음 이 코드로 템플릿 편집기의 상용구 코드를 대체합니다.
템플릿을 저장합니다.

// The first two lines are optional, use if you want to enable logging
const log = require('logToConsole');
log('data =', data);
const setDefaultConsentState = require('setDefaultConsentState');
const updateConsentState = require('updateConsentState');
const getCookieValues = require('getCookieValues');
const callInWindow = require('callInWindow');
const gtagSet = require('gtagSet');
const COOKIE_NAME = 'Your_cookie_name';
/*
 *   Splits the input string using comma as a delimiter, returning an array of
 *   strings
 */
const splitInput = (input) => {
  return input.split(',')
      .map(entry => entry.trim())
      .filter(entry => entry.length !== 0);
};
/*
 *   Processes a row of input from the default settings table, returning an object
 *   which can be passed as an argument to setDefaultConsentState
 */
const parseCommandData = (settings) => {
  const regions = splitInput(settings['region']);
  const granted = splitInput(settings['granted']);
  const denied = splitInput(settings['denied']);
  const commandData = {};
  if (regions.length > 0) {
    commandData.region = regions;
  }
  granted.forEach(entry => {
    commandData[entry] = 'granted';
  });
  denied.forEach(entry => {
    commandData[entry] = 'denied';
  });
  return commandData;
};
/*
 *   Called when consent changes. Assumes that consent object contains keys which
 *   directly correspond to Google consent types.
 */
const onUserConsent = (consent) => {
  const consentModeStates = {
    ad_storage: consent['adConsentGranted'] ? 'granted' : 'denied',
    ad_user_data: consent['adUserDataConsentGranted'] ? 'granted' : 'denied',
    ad_personalization: consent['adPersonalizationConsentGranted'] ? 'granted' : 'denied',
    analytics_storage: consent['analyticsConsentGranted'] ? 'granted' : 'denied',
    functionality_storage: consent['functionalityConsentGranted'] ? 'granted' : 'denied',
    personalization_storage: consent['personalizationConsentGranted'] ? 'granted' : 'denied',
    security_storage: consent['securityConsentGranted'] ? 'granted' : 'denied',
  };
  updateConsentState(consentModeStates);
};
/*
 *   Executes the default command, sets the developer ID, and sets up the consent
 *   update callback
 */
const main = (data) => {
  /*
   * Optional settings using gtagSet
   */
  gtagSet('ads_data_redaction', data.ads_data_redaction);
  gtagSet('url_passthrough', data.url_passthrough);
  gtagSet('developer_id.your_developer_id', true);
  // Set default consent state(s)
  data.defaultSettings.forEach(settings => {
    const defaultData = parseCommandData(settings);
  // wait_for_update (ms) allows for time to receive visitor choices from the CMP
    defaultData.wait_for_update = 500;
    setDefaultConsentState(defaultData);
  });

  // Check if cookie is set and has values that correspond to Google consent
  // types. If it does, run onUserConsent().
  const settings = getCookieValues(COOKIE_NAME);
  if (typeof settings !== 'undefined') {
    onUserConsent(settings);
  }
  /**
   *   Add event listener to trigger update when consent changes
   *
   *   References an external method on the window object which accepts a
   *   function as an argument. If you do not have such a method, you will need
   *   to create one before continuing. This method should add the function
   *   that is passed as an argument as a callback for an event emitted when
   *   the user updates their consent. The callback should be called with an
   *   object containing fields that correspond to the five built-in Google
   *   consent types.
   */
  callInWindow('addConsentListenerExample', onUserConsent);
};
main(data);
data.gtmOnSuccess();

다음으로 동의 상태 및 쿠키 액세스를 위한 권한을 구성합니다.

동의 상태 관리 권한을 추가하려면 다음 단계를 따르세요.

권한 탭을 선택하고 동의 상태 액세스를 클릭합니다.
동의 유형 추가를 클릭합니다.
상자를 클릭하고 드롭다운 메뉴에서 ad_storage를 선택합니다.
쓰기를 선택합니다.
추가를 클릭합니다.
ad_user_data, ad_personalization 및 analytics_storage에 대해 2~5단계를 반복합니다. 추가 동의 유형이 필요한 경우 이 방식으로 추가하면 됩니다.
저장을 클릭합니다.

쿠키 액세스 권한을 추가하려면 다음 단계를 따르세요.

권한 탭을 선택하고 쿠키 값 읽기를 클릭합니다.
구체적인 항목 아래에 코드가 사용자의 동의 여부를 확인하기 위해 읽어야 하는 각 쿠키의 이름을 한 줄에 하나씩 입력합니다.
저장을 클릭합니다.

2. 단위 테스트 만들기

템플릿 테스트를 만드는 방법은 테스트를 참고하세요.

3. 템플릿을 동의 솔루션과 통합

다음 코드는 리스너를 추가하여 이 템플릿을 동의 관리 솔루션 코드와 통합하는 방법의 한 가지 예를 보여줍니다.

// Array of callbacks to be executed when consent changes
const consentListeners = [];

/**
 *   Called from GTM template to set callback to be executed when user consent is provided.
 *   @param {function} Callback to execute on user consent
 */
window.addConsentListenerExample = (callback) => {
  consentListeners.push(callback);
};

/**
 *   Called when user grants/denies consent.
 *   @param {Object} Object containing user consent settings.
 */
const onConsentChange = (consent) => {
  consentListeners.forEach((callback) => {
    callback(consent);
  });
};

동의 상태 업데이트

웹사이트 방문자가 일반적으로 동의 배너와 상호작용함으로써 동의 여부를 밝힌 후 템플릿 코드는 이에 따라 updateConsentState API에 동의 상태를 업데이트해야 합니다.

다음 예에서는 모든 저장 유형에 동의한다고 표시한 방문자의 updateConsentState 호출을 보여줍니다. 이 예에서는 또한 granted에 하드코딩된 값을 사용하지만 실제로 이 값은 CMP에서 수집한 방문자의 동의를 사용하여 런타임 시 결정되어야 합니다.

const updateConsentState = require('updateConsentState');

updateConsentState({
  'ad_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
  'analytics_storage': 'granted',
  'functionality_storage': 'granted',
  'personalization_storage': 'granted',
  'security_storage': 'granted'
});

지역별 동작에 관한 정보

특정 지역의 방문자에게 적용되는 기본 동의 상태를 설정하려면 템플릿에 (ISO 3166-2에 따라) 지역을 지정하세요. 지역 값을 사용하면 템플릿 사용자가 해당 지역 외부에서 온 방문자로부터 얻은 정보를 잃지 않으면서 지역 규정을 준수할 수 있습니다. setDefaultConsentState 명령어에 지역이 지정되지 않으면 값이 다른 모든 지역에 적용됩니다.

예를 들어 다음 코드는 스페인과 알래스카에서 온 방문자의 경우 analytics_storage의 기본 상태를 denied로 설정하고 기타 모든 방문자의 경우 analytics_storage를 granted로 설정합니다.

const setDefaultConsentState = require('setDefaultConsentState');

setDefaultConsentState({
  'analytics_storage': 'denied',
  'region': ['ES', 'US-AK']
});
setDefaultConsentState({
  'analytics_storage': 'granted'
});

가장 구체적인 설정이 우선 적용됨

지역 및 하위 지역 값이 나타나는 동일한 페이지에서 두 개의 기본 동의 명령어가 실행되면 더 구체적인 지역이 포함된 명령어가 적용됩니다. 예를 들어 US 지역의 경우 ad_storage를 'granted'로 설정하고 US-CA 지역의 경우 ad_storage를 'denied'로 설정한 경우 캘리포니아에서 온 방문자에게는 더 구체적인 US-CA 설정이 적용됩니다.

지역	`ad_storage`	동작
US	`'granted'`	US에 있지만 CA에 없는 사용자에게 적용됩니다.
US-CA	`'denied'`	US-CA 사용자에게 적용됩니다.
미지정	`'granted'`	기본값 `'granted'`를 사용합니다. 이 예에서는 미국 또는 미국 캘리포니아주에 거주하지 않는 사용자에게 적용됩니다.

추가 메타데이터

gtagSet API를 사용하여 선택사항인 다음 매개변수를 설정할 수 있습니다.

url_passthrough
ads_data_redaction
developer_id

이러한 API는 GTM 템플릿 샌드박스 환경에서만 사용할 수 있습니다.

URL의 광고 클릭, 클라이언트 ID, 세션 ID 정보 전달

방문자가 광고를 클릭한 후 광고주의 웹사이트를 방문하면 광고에 대한 정보가 방문 페이지 URL에 쿼리 매개변수로 추가될 수 있습니다. 전환 정확성을 개선하기 위해 Google 태그에서는 일반적으로 이 정보를 광고주 도메인의 퍼스트 파티 쿠키에 저장합니다.

하지만 ad_storage가 denied로 설정된 경우 Google 태그에서는 이 정보를 로컬로 저장하지 않습니다. 이 경우 광고 클릭 측정 품질을 개선하기 위해 광고주가 URL 패스 스루라는 기능을 사용하여 여러 페이지에서 URL 매개변수를 통해 광고 클릭 정보를 전달할 수도 있습니다.

마찬가지로 analytics_storage가 denied로 설정된 경우 URL 패스 스루를 사용하여 여러 페이지에서 쿠키 없이 이벤트 및 세션 기반 분석 정보(전환수 포함)를 전송할 수 있습니다.

URL 패스 스루를 사용하려면 다음 조건을 충족해야 합니다.

페이지에 동의 인식 Google 태그가 있어야 합니다.
사이트에서 URL 패스 스루 기능을 사용하도록 선택해야 합니다.
페이지에 동의 모드가 구현되어 있어야 합니다.
발신 링크는 현재 페이지의 도메인과 동일한 도메인을 참조해야 합니다.
URL에 gclid/dclid가 있어야 합니다(Google Ads 및 플러드라이트 태그만 해당).

템플릿 사용자가 이 설정의 사용 설정 여부를 구성할 수 있어야 합니다. 다음 템플릿 코드는 url_passthrough를 true로 설정하는 데 사용됩니다.

gtagSet('url_passthrough', true);

광고 데이터 수정

ad_storage가 거부되면 광고 목적을 위해 새 쿠키가 설정되지 않습니다. 또한 이전에 google.com 및 doubleclick.net에 설정된 서드 파티 쿠키가 사용되지 않습니다. Google로 전송되는 데이터에는 URL 매개변수의 모든 광고 클릭 정보를 포함한 전체 페이지 URL이 계속 포함됩니다.

ad_storage가 거부될 때 광고 데이터를 추가로 삭제하려면 ads_data_redaction을 true로 설정하세요.

ads_data_redaction이 true이고 ad_storage가 거부되면 Google Ads 및 플러드라이트 태그에서 네트워크 요청에 전송된 광고 클릭 식별자가 삭제됩니다.

gtagSet('ads_data_redaction', true);

개발자 ID

Google에서 발급한 개발자 ID가 있는 CMP 공급업체는 다음 메서드를 사용하여 템플릿에서 최대한 빨리 해당 ID를 설정할 수 있습니다.

서로 관련이 없는 회사나 법인의 여러 웹사이트에서 구현이 사용되는 경우에만 개발자 ID가 필요합니다. 구현을 한 사이트 또는 법인에서만 사용하는 경우 개발자 ID를 적용하지 마세요.

gtagSet('developer_id.<your_developer_id>', true);

사용자를 위한 문서 제공

사용자는 동의 템플릿을 통해 사용자 동의를 수집하는 태그를 설정합니다. 사용자를 위해 다음 권장사항을 설명하는 문서를 제공하세요.

설정 표에서 기본 동의를 설정하는 방법
표에서 행을 추가하여 여러 지역을 위한 기본 동의를 설정하는 방법
동의 초기화 - 모든 페이지 트리거의 태그를 트리거하는 방법

다음 단계

모든 태그 관리자 사용자에게 템플릿을 제공하려는 경우 커뮤니티 템플릿 갤러리에 업로드하세요.

동의 모드 템플릿 만들기

동의를 위한 태그 템플릿을 사용해야 하는 이유

동의 상태 및 동의 유형

새 동의 템플릿 만들기

1. 새 템플릿 만들기

동의 템플릿을 만들려면 다음 단계를 따르세요.

기본 동의 상태를 설정하려면 다음 단계를 따르세요.

선택사항: 광고 데이터 삭제에 대한 지원을 추가하려면 다음 단계를 따르세요.

선택사항: URL 매개변수를 통한 전달에 대한 지원을 추가하려면 다음 단계를 따르세요.

구현 코드를 추가하려면 다음 단계를 따르세요.

동의 상태 관리 권한을 추가하려면 다음 단계를 따르세요.

쿠키 액세스 권한을 추가하려면 다음 단계를 따르세요.

2. 단위 테스트 만들기

3. 템플릿을 동의 솔루션과 통합

동의 상태 업데이트

지역별 동작에 관한 정보

추가 메타데이터

URL의 광고 클릭, 클라이언트 ID, 세션 ID 정보 전달

광고 데이터 수정

개발자 ID

사용자를 위한 문서 제공

다음 단계