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

Bài viết này dành cho những nhà phát triển duy trì giải pháp quản lý sự đồng ý trên những 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à cho bạn biết cách tích hợp các loại đồng ý đó với giải pháp quản lý sự đồng ý.

Khi bạn cung cấp mẫu thẻ, người dùng có thể tích hợp giải pháp yêu cầu đồng ý của bạn mà không cần dùng mã, giúp tiết kiệm đáng kể thời gian và công sức.

Người dùng có thể đặt trạng thái đồng ý mặc định bằng cách sử dụng mẫu chế độ đồng ý và cung cấp thông tin về các lựa chọn đồng ý của khách truy cập cho Trình quản lý thẻ của Google. Việc này giúp đảm bảo các thẻ của Google và bên thứ ba có hỗ trợ chế độ đồng ý hoạt động tối ưu.

Là người tạo mẫu, bạn có thể triển khai các mẫu chế độ đồng ý để sử dụng nội bộ hoặc xuất bản các mẫu đó trong Thư viện mẫu cho cộng đồng để công khai các mẫu đó. Những nhà cung cấp Nền tảng quản lý sự đồng ý (CMP) cung cấp mẫu chế độ đồng ý sẽ có cơ hội được liệt kê trong tài liệu về chế độ đồng ý của chúng tôi và có bộ chọn Thư viện mẫu có các mẫu của họ.

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

Loại đồng ý Mô tả
ad_storage Cho phép lưu trữ, chẳng hạn như cookie, có liên quan đến quảng cáo.
ad_user_data Đặt sự đồng ý cho việc gửi dữ liệu người dùng đến Google cho mục đích quảng cáo trực tuyến.
ad_personalization Đặt trạng thái đồng ý cho quảng cáo được cá nhân hoá.
analytics_storage Bật tính năng lưu trữ (chẳng hạn như cookie) có liên quan đến số liệu phân tích (ví dụ: thời lượng truy cập).
functionality_storage Cho phép bộ nhớ hỗ trợ các chức năng của trang web hoặc ứng dụng, chẳng hạn như chế độ cài đặt ngôn ngữ.
personalization_storage Bật bộ nhớ liên quan đến hoạt động cá nhân hoá, chẳng hạn như các mục đề xuất video.
security_storage Bật hoạt động lưu trữ có liên quan đến bảo mật, chẳng hạn như chức năng xác thực, phòng chống gian lận và các biện pháp bảo vệ người dùng khác

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

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

  • Đặt trạng thái đồng ý mặc định ngay sau khi kích hoạt bằng cách sử dụng điều kiện kích hoạt 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àng sớm càng tốt về việc đồng ý hoặc từ chối đối với mọi loại đồng ý hiện hành.

  • Khi khách truy cập cho biết lựa chọn về sự đồng ý của họ, CMP phải chuyển sang 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 để duy trì 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 cookie do giải pháp đồng ý đặt để lưu trữ các lựa chọn đồng ý của khách truy cập. Bạn cũng sẽ thiết lập 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 chưa quyết định thay đổi sự đồng ý của họ.

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google.
  2. Trong bảng đ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.
  1. Chọn thẻ Trường, nhấp vào Thêm trường > Bảng thông 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 các giá trị cột phải là duy nhất.
  6. Mở rộng cột rồi đổi tên hiển thị thành Region (leave blank to have consent apply to all regions). Câu lệnh trong ngoặc đơn là tài liệu cho người dùng mẫu của bạn. Tìm hiểu thêm về cách thiết lập chế độ mặc định về sự đồng ý cho nhiều khu vực.
  7. Nhấp vào Thêm cột, chọn Nhập văn bản, đổi tên thành granted.
  8. Mở rộng cột rồi đổ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, đổi tên thành denied.
  10. Mở rộng cột rồi đổi tên hiển thị thành Denied Consent Types (comma separated)

Không bắt buộc: Cách thêm tính năng hỗ trợ cho tính năng loại bỏ dữ liệu quảng cáo:

  1. Nhấp vào Thêm trường, chọn Hộp đánh dấu rồi đổ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 thông qua tính năng loại bỏ dữ liệu quảng cáo

Không bắt buộc: Cách thêm hỗ trợ cho việc truyền các tham số URL:

  1. Nhấp vào Thêm trường, chọn Hộp đánh dấu rồi đổ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ề cách chuyển thông số URL

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

  1. Mở thẻ Code (Mã) trong trình chỉnh sửa mẫu.
  2. Trong mã mẫu bên dưới, hãy chỉnh sửa các trường phần giữ chỗ.
  3. Sao chép mã và thay thế mã nguyên mẫu trong trình chỉnh sửa mẫu bằng mã đó.
  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 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();

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.

  1. Chọn thẻ Quyền rồi nhấp vào Truy cập vào trạng thái đồng ý.
  2. Nhấp vào Thêm loại đồng ý.
  3. Nhấp vào ô và chọn ad_storage từ trình đơn thả xuống.
  4. Đánh dấu vào phần Viết.
  5. Nhấp vào Thêm
  6. Lặp lại các bước từ 2 đến 5 đối với ad_user_data, ad_personalizationanalytics_storage. Nếu bạn cần các loại đồng ý khác, hãy thêm các loại đồng ý đó 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 giá trị 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 các lựa chọn đồng ý của người dùng, một tên trên mỗi dòng.
  3. Nhấp vào Lưu.

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

Xem phần Kiểm thử để biết thông tin về cách tạo thử nghiệm cho mẫu.

Mã sau đây cho thấy 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 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);
  });
};

Sau khi khách truy cập trang web đã cho biết các 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 với API updateConsentState.

Ví dụ sau đây minh hoạ lệnh gọi updateConsentState cho một khách truy cập cho biết rằng họ đồng ý với mọi loại bộ nhớ. Một lần nữa, ví dụ này sử dụng các giá trị được cố định giá trị trong mã cho granted, nhưng trên thực tế, bạn nên xác định các giá trị này trong thời gian chạy bằng cách sử dụng sự đồng ý của khách truy cập mà 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ề hành vi theo khu vực cụ thể

Để đặt các trạng thái đồng ý mặc định áp dụng cho khách truy cập ở 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 giá trị khu vực cho phé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 từ khách truy cập bên ngoài những khu vực đó. Khi một khu vực không được chỉ định 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 mục sau đây sẽ đặt trạng thái mặc định của analytics_storage thành denied đối với khách truy cập đến từ Tây Ban Nha và Alaska, đồng thời đặt analytics_storage thành granted cho tất cả những khách truy cập khác:

const setDefaultConsentState = require('setDefaultConsentState');

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

Nội dung cụ thể nhất sẽ được ưu tiên

Nếu 2 lệnh yêu cầu đồng ý mặc định xuất hiện trên cùng một trang có giá trị cho một khu vực và tiểu vùng, thì lệnh cho một 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 USad_storage được đặt thành 'denied' cho khu vực US-CA, thì chế độ cài đặt US-CA cụ thể hơn cho khách truy cập ở California sẽ có hiệu lực.

Khu vực ad_storage Hành vi
Hoa Kỳ 'granted' Áp dụng cho người dùng ở Hoa Kỳ không ở Canada
Hoa Kỳ-Canada 'denied' Áp dụng cho người dùng ở US-CA
Không xác định 'granted' Sử dụng giá trị mặc định là 'granted'. Trong ví dụ này, quy tắc đó áp dụng cho người dùng không ở Hoa Kỳ hoặc Canada

Siêu dữ liệu bổ sung

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

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

Chuyển qua 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 một 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 tham số truy vấn. Để cải thiện độ chính xác của lượt chuyển đổi, các 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_storagedenied, thì các thẻ Google sẽ không lưu thông tin này trên máy. Để cải thiện chất lượng đo lường lượt nhấp quảng cáo trong trường hợp này, nhà quảng cáo có thể tuỳ ý chuyể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 cách sử dụng một tính năng có tên là truyền qua URL.

Tương tự, nếu bạn đặt analytics_storage thành từ chối, thì hệ thống có thể sử dụng tính năng truyền qua URL để gửi dữ liệu 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 giữa các trang.

Để sử dụng tính năng truyền qua URL, bạn phải đáp ứng các điều kiện sau:

  • Có các thẻ Google nhận biết sự đồng ý 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 đi nói đế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ỉ áp dụng cho 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, sẽ không có cookie mới nào được đặt 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 sẽ vẫn 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 tham số URL.

Để loại bỏ dữ liệu quảng cáo hơn nữa khi ad_storage bị từ chối, hãy đặt ads_data_redaction thành true.

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

gtagSet('ads_data_redaction', true);

Mã nhà phát triển

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

Bạn chỉ cần mã nhà phát triển khi cách triển khai của bạn được các công ty hoặc pháp nhân không liên quan sử dụng trên nhiều trang web. Nếu một trang web hoặc pháp nhân chỉ sử dụng phương thức triển khai đó, thì đừng đăng ký mã 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 lấy sự đồ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 cho người dùng tài liệu giải thích các phương pháp hay nhất sau đây:

  • Cách đặt chế độ mặc định về sự đồng ý trong bảng Cài đặt.
  • Cách thiết lập chế độ mặc định về sự đồng ý cho các khu vực khác nhau bằng cách thêm các hàng bổ sung trong bảng.
  • Kích hoạt thẻ trên trình kích hoạt 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 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.