Tạo mẫu chế độ đồng ý

Tài liệu này dành cho những nhà phát triển duy trì một giải pháp quản lý sự đồng ý trên các trang web sử dụng Trình quản lý thẻ của Google (GTM).

Trang này giới thiệu các loại đồng ý trong Trình quản lý thẻ của Google và hướng dẫn cách tích hợp các loại đồng ý này với giải pháp quản lý sự đồng ý của bạn.

Trạng thái đồng ý và các loại đồng ý

Thẻ Google và thẻ của bên thứ ba điều chỉnh hành vi lưu trữ dựa trên trạng thái đồng ý là granted hoặc denied. Các thẻ này có thể có chế độ kiểm tra trạng thái đồng ý tích hợp sẵn cho bất kỳ loại đồng ý nào sau đây:

Tạo mẫu đồng ý mới

Chế độ đồng ý theo dõi các lựa chọn đồng ý của khách truy cập và chế độ kiểm tra sự đồng ý của thẻ đảm bảo rằng cách hoạt động của thẻ sẽ được điều chỉnh cho phù hợp. Khi tạo một mẫu yêu cầu đồng ý mới, hãy làm theo các phương pháp hay nhất:

• Sử dụng các API chế độ đồng ý của Trình quản lý thẻ setDefaultConsentState và updateConsentState thay vì gtag consent.

• Đặt trạng thái đồng ý mặc định ngay khi kích hoạt bằng trình kích hoạt Hoạt động tiến hành lấy sự đồng ý – Tất cả các trang.

• CMP phải nhắc khách truy cập cấp hoặc từ chối sự đồng ý cho tất cả các loại sự đồng ý hiện hành trong thời gian sớm nhất có thể.

• Khi khách truy cập cho biết lựa chọn về sự đồng ý của họ, CMP phải truyền trạng thái đồng ý đã cập nhật.

1. Tạo mẫu mới

Phương pháp triển khai này sử dụng một trường trong mẫu để giữ trạng thái đồng ý mặc định. Mã triển khai sẽ đọc trường đó để đặt trạng thái đồng ý mặc định trong thời gian chạy. Đối với lệnh cập nhật, mã của bạn sẽ cố gắng đọc một cookie do giải pháp về sự đồng ý đặt để lưu trữ lựa chọn đồng ý của khách truy cập. Bạn cũng sẽ thiết lập một lệnh gọi lại cho updateConsentState để xử lý trường hợp khách truy cập chưa đưa ra lựa chọn đồng ý hoặc quyết định thay đổi lựa chọn đồng ý của họ.

Cách tạo mẫu yêu cầu đồng ý:

1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google.
2. Trong thanh điều hướng bên trái, hãy chọn Mẫu.
3. Trong ngăn Mẫu thẻ, hãy nhấp vào Mới.

Cách đặt trạng thái đồng ý mặc định:

1. Chọn thẻ Trường, nhấp vào Thêm trường > Bảng tham số.
2. Đổi tên thành defaultSettings.
3. Mở rộng trường.
4. Cập nhật Tên hiển thị thành Default settings.
5. Nhấp vào Thêm cột, chọn Nhập văn bản, đổi tên thành region và đánh dấu vào hộp Yêu cầu giá trị cột phải là giá trị riêng biệt.
6. Mở rộng cột và thay đổi tên hiển thị thành Region (leave blank to have consent apply to all regions). Câu trong dấu ngoặc đơn là tài liệu dành cho người dùng mẫu của bạn. Tìm hiểu thêm về cách thiết lập trạng thái đồng ý mặc định cho nhiều khu vực.
7. Nhấp vào Thêm cột, chọn Nhập văn bản, thay đổi tên thành granted.
8. Mở rộng cột và thay đổi tên hiển thị thành Granted Consent Types (comma separated).
9. Nhấp vào Thêm cột, chọn Nhập văn bản, thay đổi tên thành denied.
10. Mở rộng cột và thay đổi tên hiển thị thành Denied Consent Types (comma separated)

Không bắt buộc: Để thêm tính năng hỗ trợ việc che dữ liệu quảng cáo:

1. Nhấp vào Thêm trường, chọn Hộp đánh dấu và thay đổi tên trường thành ads_data_redaction.
2. Cập nhật Tên hiển thị thành Redact Ads Data

Tìm hiểu thêm về hành vi của cookie khi loại bỏ dữ liệu quảng cáo

Không bắt buộc: Để thêm chế độ hỗ trợ truyền thông số URL:

1. Nhấp vào Thêm trường, chọn Hộp đánh dấu và thay đổi tên trường thành url_passthrough.
2. Cập nhật Tên hiển thị thành Pass through URL parameters

Tìm hiểu thêm về việc truyền các tham số URL

Cách thêm mã triển khai:

1. Mở thẻ Mã trong trình chỉnh sửa mẫu.
2. Trong đoạn mã mẫu bên dưới, hãy chỉnh sửa các trường giữ chỗ.
3. Sao chép mã này và thay thế mã nguyên mẫu trong trình chỉnh sửa mẫu bằng mã này.
4. Lưu mẫu.

// 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 JSON = require('JSON');
const COOKIE_NAME = 'Your_cookie_name';
/*
 *   Splits the input string using comma as a delimiter, returning an array of
 *   strings
 */
const splitInput = (input) => {
  if (!input) return [];
  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). Add optional chaining to safely handle cases
  // where defaultSettings might be null or undefined.
  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 cookieValues = getCookieValues(COOKIE_NAME);
  if (cookieValues && cookieValues.length > 0) {
    try {
      const settings = JSON.parse(cookieValues[0]);
      if (settings) {
        onUserConsent(settings);
      }
    } catch (e) {
      // Log an error if the cookie value is not valid JSON.
    }
  }
  /**
   *   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();

Tiếp theo, hãy định cấu hình các quyền để truy cập vào trạng thái đồng ý và để truy cập vào cookie.

Cách thêm quyền quản lý trạng thái đồng ý:

1. Chọn thẻ Quyền rồi nhấp vào Trạng thái đồng ý truy cập.
2. Nhấp vào Thêm loại đồng ý.
3. Nhấp vào hộp rồi chọn ad_storage trong trình đơn thả xuống.
4. Đánh dấu vào Viết.
5. Nhấp vào Thêm.
6. Lặp lại các bước từ 2 đến 5 cho ad_user_data, ad_personalization và analytics_storage. Nếu bạn cần thêm các loại đồng ý khác, hãy thêm theo cách tương tự.
7. Nhấp vào Lưu.

Cách thêm quyền truy cập vào cookie:

1. Chọn thẻ Quyền rồi nhấp vào Đọc(các) giá trị của cookie.
2. Trong mục Cụ thể, hãy nhập tên của từng cookie mà mã của bạn cần đọc để xác định lựa chọn đồng ý của người dùng, mỗi tên trên một dòng.
3. Nhấp vào Lưu.

2. Tạo kiểm thử đơn vị

Hãy xem phần Kiểm thử để biết thông tin về cách tạo kiểm thử cho mẫu của bạn.

3. Tích hợp mẫu với giải pháp về sự đồng ý

Đoạn mã sau đây cho thấy một ví dụ về cách tích hợp mẫu này với mã cho giải pháp quản lý sự đồng ý của bạn bằng cách thêm một trình nghe:

// 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);
  });
};

Cập nhật trạng thái đồng ý

Sau khi khách truy cập trang web đưa ra lựa chọn về sự đồng ý (thường là thông qua việc tương tác với biểu ngữ yêu cầu đồng ý), mã mẫu sẽ cập nhật trạng thái đồng ý cho phù hợp bằng API updateConsentState.

Ví dụ sau đây cho thấy lệnh gọi updateConsentState cho một khách truy cập cho biết họ đồng ý với tất cả các loại bộ nhớ. Một lần nữa, ví dụ này sử dụng các giá trị được mã hoá cứng cho granted, nhưng trên thực tế, các giá trị này phải được xác định trong thời gian chạy bằng sự đồng ý của khách truy cập do CMP thu thập.

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'
});

Giới thiệu về cơ chế hoạt động theo khu vực

Để đặt trạng thái đồng ý mặc định áp dụng cho khách truy cập từ những khu vực cụ thể, hãy chỉ định một khu vực (theo ISO 3166-2) trong mẫu. Việc sử dụng các giá trị khu vực giúp người dùng mẫu tuân thủ các quy định theo khu vực mà không bị mất thông tin của khách truy cập bên ngoài những khu vực đó. Khi bạn không chỉ định khu vực trong lệnh setDefaultConsentState, giá trị sẽ áp dụng cho tất cả các khu vực khác.

Ví dụ: các chế độ cài đặt sau đây đặt trạng thái mặc định cho analytics_storage thành denied đối với khách truy cập từ Tây Ban Nha và Alaska, đồng thời đặt analytics_storage thành granted đối với tất cả những người khác:

const setDefaultConsentState = require('setDefaultConsentState');

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

Cụ thể nhất sẽ được ưu tiên

Nếu hai lệnh mặc định về sự đồng ý xuất hiện trên cùng một trang có các giá trị cho một khu vực và tiểu khu vực, thì lệnh có khu vực cụ thể hơn sẽ có hiệu lực. Ví dụ: nếu bạn đặt ad_storage thành 'granted' cho khu vực US và đặt ad_storage thành 'denied' cho khu vực US-CA, thì một khách truy cập ở California sẽ có chế độ cài đặt cụ thể hơn là US-CA có hiệu lực.

Siêu dữ liệu bổ sung

Bạn có thể sử dụng API gtagSet để đặt các thông số không bắt buộc sau đây:

• url_passthrough
• ads_data_redaction
• developer_id

Các API này chỉ có trong môi trường hộp cát mẫu GTM.

Truyền thông tin về lượt nhấp vào quảng cáo, mã ứng dụng khách và mã phiên trong URL

Khi khách truy cập truy cập vào trang web của nhà quảng cáo sau khi nhấp vào một quảng cáo, thông tin về quảng cáo đó có thể được thêm vào URL trang đích dưới dạng một tham số truy vấn. Để cải thiện độ chính xác của lượt chuyển đổi, thẻ Google thường lưu trữ thông tin này trong cookie của bên thứ nhất trên miền của nhà quảng cáo.

Tuy nhiên, nếu ad_storage là denied, thì thẻ Google sẽ không lưu thông tin này trên thiết bị. Để cải thiện chất lượng đo lường lượt nhấp vào quảng cáo trong trường hợp này, nhà quảng cáo có thể tuỳ ý truyền thông tin về lượt nhấp vào quảng cáo thông qua các tham số URL trên các trang bằng một tính năng gọi là truyền tham số URL.

Tương tự, nếu analytics_storage được đặt thành denied, bạn có thể sử dụng tính năng chuyển tiếp URL để gửi thông tin phân tích dựa trên sự kiện và phiên (bao gồm cả lượt chuyển đổi) mà không cần cookie trên các trang.

Bạn phải đáp ứng các điều kiện sau để sử dụng tính năng chuyển tiếp URL:

• Thẻ Google dựa trên trạng thái đồng ý có trên trang.
• Trang web đã chọn sử dụng tính năng truyền qua URL.
• Chế độ đồng ý được triển khai trên trang.
• Đường liên kết ngoài đề cập đến cùng một miền với miền của trang hiện tại.
• gclid/dclid xuất hiện trong URL (chỉ thẻ Google Ads và Floodlight)

Mẫu của bạn phải cho phép người dùng mẫu định cấu hình xem họ có muốn bật chế độ cài đặt này hay không. Mã mẫu sau đây được dùng để đặt url_passthrough thành true:

gtagSet('url_passthrough', true);

Loại bỏ dữ liệu quảng cáo

Khi ad_storage bị từ chối, hệ thống sẽ không đặt cookie mới cho mục đích quảng cáo. Ngoài ra, cookie của bên thứ ba đã đặt trước đây trên google.com và doubleclick.net sẽ không được sử dụng. Dữ liệu được gửi đến Google vẫn sẽ bao gồm URL đầy đủ của trang, bao gồm cả mọi thông tin về lượt nhấp vào quảng cáo trong các tham số URL.

Để chỉnh sửa thêm dữ liệu quảng cáo khi ad_storage bị từ chối, hãy đặt ads_data_redaction thành true.

Khi ads_data_redaction là true và ad_storage bị từ chối, các giá trị nhận dạng lượt nhấp vào quảng cáo do Google Ads và thẻ Floodlight gửi trong các yêu cầu mạng sẽ được chỉnh sửa.

gtagSet('ads_data_redaction', true);

Mã nhận dạng nhà phát triển

Nếu bạn là nhà cung cấp CMP có mã nhận dạng nhà phát triển do Google cấp, hãy sử dụng phương thức sau để đặt mã nhận dạng này càng sớm càng tốt trong mẫu của bạn.

Bạn chỉ cần mã nhận dạng nhà phát triển khi việc triển khai của bạn sẽ được nhiều trang web sử dụng bởi các công ty hoặc pháp nhân không liên quan. Nếu một trang web hoặc thực thể sẽ sử dụng việc triển khai này, thì đừng đăng ký mã nhận dạng nhà phát triển.

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

Cung cấp tài liệu cho người dùng

Người dùng sẽ sử dụng mẫu yêu cầu đồng ý của bạn để thiết lập một thẻ thu thập sự đồng ý của người dùng. Cung cấp tài liệu cho người dùng để giải thích các phương pháp hay nhất sau đây:

• Cách đặt trạng thái đồng ý mặc định trong bảng Cài đặt.
• Cách thiết lập trạng thái đồng ý mặc định cho nhiều khu vực bằng cách thêm các hàng khác vào bảng.
• Kích hoạt thẻ dựa trên điều kiện kích hoạt Hoạt động tiến hành lấy sự đồng ý – Tất cả các trang.

Các bước tiếp theo

Nếu bạn muốn cung cấp mẫu của mình cho tất cả người dùng Trình quản lý thẻ, hãy tải mẫu đó lên Thư viện mẫu cho cộng đồng.