동의 모드 템플릿 만들기

Google 태그 관리자(GTM)를 사용하는 사이트의 동의 관리 솔루션을 관리하는 경우 Google 동의 모드를 지원하는 템플릿을 만드는 것이 좋습니다. 동의 모드 템플릿을 사용하면 사용자가 동의 모드를 채택하여 코드 없이 자체 동의 솔루션과 통합할 수 있으므로 상당한 시간과 노력을 절약할 수 있습니다.

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

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

이 페이지에서는 동의 상태 및 동의 유형을 소개하고 동의 모드 API와 함께 사용하는 방법을 보여줍니다. 마지막 섹션에서는 API를 사용하여 태그 관리자 템플릿을 만드는 방법의 예를 제공합니다. 동의 모드 또는 태그 관리자 템플릿을 처음 사용하는 경우 다음 도움말에서 배경 정보를 확인하세요.

• 동의 모드
• 맞춤 템플릿 빠른 시작 가이드
• 동의 설정 관리

동의 상태 및 동의 유형

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

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

템플릿을 사용하면 사용자가 웹사이트에서 사용하는 각 동의 유형의 기본 동의 상태를 설정할 수 있습니다. 여러 지역의 기본 동의 상태를 설정할 수도 있습니다.

GTM 사용자는 동의 초기화 트리거를 사용하여 모든 페이지에서 템플릿으로 만든 태그를 실행해야 합니다. 이렇게 해야 다른 태그보다 먼저 실행됩니다. 템플릿 코드는 실행 즉시 구성된 기본 동의 상태를 설정해야 합니다. 그런 다음 CMP가 방문자에게 모든 관련 동의 유형에 대한 동의를 부여하거나 거부하라는 메시지를 최대한 빨리 표시해야 합니다. 방문자가 동의 여부를 밝히면 CMP는 적절한 템플릿 API를 통해 업데이트된 동의 상태를 전달해야 합니다. 동의 모드는 방문자 동의 여부를 추적하고 이에 따라 태그 동의 상태 확인을 통해 태그 동작이 조정됩니다.

동의 API

태그 지정에 GTM을 활용하는 사이트를 위한 동의 모드 구현에서는 동의 상태 관리를 위해 GTM 관련 API를 사용해야 합니다(setDefaultConsentState 및 updateConsentState). 필요에 따라 gtagSet API를 사용하여 ads_data_redaction 및 url_passthrough 설정을 적절하게 조정할 수도 있습니다. 이러한 API는 GTM 템플릿 샌드박스 환경에서만 사용할 수 있습니다.

페이지가 로드될 때 동의 초기화 이벤트를 사용하여 태그를 트리거하여 최대한 빨리 기본 동의 상태를 설정해야 합니다. 사용자가 동의한 후 또는 쿠키에서 사용자의 이전 동의 여부가 로드된 후 최대한 빨리 동의 여부 업데이트를 GTM에 전송해야 합니다. updateConsentState를 트리거하는 방법에는 여러 가지가 있습니다. 이 도움말 뒷부분의 예에서는 가능한 두 가지 방법을 보여줍니다.

기본 동의 상태

기본 동의 설정을 구성하려면 setDefaultConsentState API를 사용하세요. 다음 예에서는 setDefaultConsentState 호출을 사용하는 방법을 보여줍니다. 기본적으로 ad_storage를 거부하고 다른 저장 유형에 동의를 부여합니다. 또한 wait_for_update를 사용하여 CMP에서 방문자의 선택 항목을 수신할 수 있는 시간을 제공합니다.

const setDefaultConsentState = require('setDefaultConsentState');

setDefaultConsentState({
  'ad_storage': 'denied',
  'analytics_storage': 'granted',
  'functionality_storage': 'granted',
  'personalization_storage': 'granted',
  'security_storage': 'granted',
  'wait_for_update': 500
});

동의 상태 업데이트

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

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

const updateConsentState = require('updateConsentState');

updateConsentState({
  'ad_storage': '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'를 사용합니다. 이 예에서는 미국 또는 미국 캘리포니아주에 거주하지 않는 사용자에게 적용됩니다.

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로 설정하세요.

gtagSet('ads_data_redaction', true);

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

개발자 ID

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

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

구현 예

이 예에서는 동의 관리 솔루션에서 쿠키를 읽고 방문자 동의 여부를 가져오는 템플릿을 만드는 방법을 보여줍니다. 이렇게 하면 방문자가 이전 페이지에서 옵션을 선택할 때 로드 과정 중에 최대한 빨리 동의 여부를 GTM에 제공할 수 있습니다.

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

주요 단계는 다음과 같습니다.

• 템플릿 편집기를 사용하여 템플릿 만들기
• 템플릿을 동의 솔루션과 통합
• 템플릿 사용자 설정

템플릿 편집기를 사용하여 템플릿 만들기

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

필드 추가

1. 필드 탭을 선택하고 필드 추가를 클릭합니다.
2. 매개변수 표를 선택합니다.
3. 이름을 defaultSettings로 변경합니다.
4. 필드를 펼칩니다.
5. 표시 이름을 Default settings로 업데이트합니다.
6. 열 추가를 클릭하고 텍스트 입력을 선택한 다음 이름을 region로 변경하고 고유한 항목 값 필요 체크박스를 선택합니다.
7. 열을 펼치고 표시 이름을 Region (leave blank to have consent apply to all regions)로 변경합니다. 괄호 안의 설명은 템플릿 사용자를 위한 정보입니다.
8. 열 추가를 클릭하고 텍스트 입력을 선택한 다음 이름을 granted로 변경합니다.
9. 열을 펼치고 표시 이름을 Granted Consent Types(comma separated)로 변경합니다.
10. 열 추가를 클릭하고 텍스트 입력을 선택한 다음 이름을 denied로 변경합니다.
11. 열을 펼치고 표시 이름을 Denied Consent Types (comma separated)로 변경합니다.
12. 필드 추가를 클릭하고 체크박스를 선택한 후 필드 이름을 ads_data_redaction으로 변경합니다.
13. 표시 이름을 Redact Ads Data로 업데이트합니다.

코드 추가

아래 코드를 복사하여 대괄호 안의 매개변수(쿠키 이름 및 업데이트된 동의 상태 확인)를 구현에 적합한 매개변수로 바꿉니다. 업데이트된 후 코드를 사용하여 GTM 코드 탭의 상용구 코드를 바꿉니다. 붙여넣은 후 템플릿을 저장합니다.

// 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 = '<replace_with_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',
    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
 * 
 * Note: Developer IDs are only required when you're building an implementation
 * that will be used across multiple websites by unrelated companies or
 * entities. If the implementation will be used by one site or entity,
 * please do not apply for a developer ID.
 */
const main = (data) => {
  // Set developer ID
  gtagSet('developer_id.<replace_with_your_developer_id>', true);
  // Set default consent state(s)
  data.defaultSettings.forEach(settings => {
    const defaultData = parseCommandData(settings);
    defaultData.wait_for_update = 500;
    setDefaultConsentState(defaultData);
  });
  gtagSet('ads_data_redaction', data.ads_data_redaction);
  // Check if cookie is set and has values that corresopnd 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();

권한 추가

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

동의 상태 관리:

1. 권한 탭을 선택하고 동의 상태 액세스를 클릭합니다.
2. 동의 유형 추가를 클릭합니다.
3. 상자를 클릭하고 드롭다운 메뉴에서 ad_storage를 선택합니다.
4. 쓰기를 선택합니다.
5. 추가를 클릭합니다.

ad_storage를 analytics_storage로 바꾸고 2~5단계를 반복합니다.

저장을 클릭하여 완료합니다.

쿠키 액세스:

1. 권한 탭을 선택하고 쿠키 값 읽기를 클릭합니다.
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);
  });
};

템플릿 사용자 설정

템플릿 사용자용 문서를 제공해야 합니다. 사용자는 이 템플릿을 사용하여 동의 초기화 - 모든 페이지 트리거를 사용하는 태그를 설정합니다. 사용자는 설정 표에 동의 유형 목록과 각 동의 유형을 기본적으로 부여 또는 거부할지를 입력해야 합니다. 사용자 위치에 따라 기본 설정이 달라야 하는 경우 동일한 기본 동의 상태를 공유하는 각 지역 집합마다 하나의 행을 만들어야 합니다.