สร้างเทมเพลตโหมดความยินยอม

บทความนี้มีไว้สําหรับนักพัฒนาซอฟต์แวร์ที่ดูแลรักษาโซลูชันการจัดการความยินยอมในเว็บไซต์ที่ใช้ Google Tag Manager (GTM)

หน้านี้จะแนะนำประเภทความยินยอมใน Google Tag Manager และแสดงวิธีผสานรวมประเภทดังกล่าวกับโซลูชันการจัดการความยินยอม

เมื่อคุณให้เทมเพลตแท็ก ผู้ใช้จะผสานรวมโซลูชันความยินยอมของคุณได้โดยไม่ต้องเขียนโค้ด ซึ่งช่วยประหยัดเวลาและแรงงานได้อย่างมาก

ผู้ใช้สามารถตั้งค่าสถานะความยินยอมเริ่มต้นได้โดยใช้เทมเพลตโหมดความยินยอมและแจ้งตัวเลือกความยินยอมของผู้เข้าชมให้ Google Tag Manager ทราบ วิธีนี้ช่วยให้แท็กของ Google และบุคคลที่สามที่รองรับโหมดความยินยอมทํางานได้ดีที่สุด

ในฐานะผู้สร้างเทมเพลต คุณสามารถใช้เทมเพลตโหมดความยินยอมสําหรับการใช้งานภายใน หรือเผยแพร่ในแกลเลอรีเทมเพลตชุมชนเพื่อให้ใช้งานได้แบบสาธารณะ ผู้ให้บริการแพลตฟอร์มการจัดการความยินยอม (CMP) ที่มีเทมเพลตโหมดความยินยอมจะมีโอกาสได้ปรากฏในเอกสารประกอบเกี่ยวกับโหมดความยินยอม และมีฟีเจอร์เครื่องมือเลือกแกลเลอรีเทมเพลตไว้ในเทมเพลต

แท็ก Google และแท็กของบุคคลที่สามจะปรับลักษณะพื้นที่เก็บข้อมูลตามสถานะความยินยอมของ granted หรือ denied โดยผู้ใช้จะมีการตรวจสอบความยินยอมในตัวสำหรับประเภทความยินยอมประเภทใดก็ได้ต่อไปนี้

ประเภทความยินยอม คำอธิบาย
ad_storage เปิดใช้พื้นที่เก็บข้อมูล เช่น คุกกี้ ที่เกี่ยวข้องกับการโฆษณา
ad_user_data ตั้งค่าความยินยอมสำหรับการส่งข้อมูลผู้ใช้ไปยัง Google เพื่อวัตถุประสงค์ในการโฆษณาออนไลน์
ad_personalization ตั้งค่าความยินยอมสำหรับโฆษณาที่ปรับตามโปรไฟล์ของผู้ใช้
analytics_storage เปิดใช้พื้นที่เก็บข้อมูล เช่น คุกกี้ ที่เกี่ยวข้องกับการวิเคราะห์ (เช่น ระยะเวลาการเข้าชม)
functionality_storage เปิดใช้พื้นที่เก็บข้อมูลที่รองรับฟังก์ชันการทํางานของเว็บไซต์หรือแอป เช่น การตั้งค่าภาษา
personalization_storage เปิดใช้พื้นที่เก็บข้อมูลที่เกี่ยวข้องกับการปรับเปลี่ยนในแบบของคุณ เช่น วิดีโอแนะนำ
security_storage เปิดใช้พื้นที่เก็บข้อมูลที่เกี่ยวข้องกับความปลอดภัย เช่น ฟังก์ชันการตรวจสอบสิทธิ์ การป้องกันการประพฤติมิชอบ และการปกป้องผู้ใช้ในรูปแบบอื่นๆ

โหมดความยินยอมจะติดตามตัวเลือกความยินยอมของผู้เข้าชม และการตรวจสอบความยินยอมของแท็กเพื่อให้มั่นใจว่าพฤติกรรมของแท็กจะปรับให้เหมาะสม ทำตามแนวทางปฏิบัติแนะนำต่อไปนี้เมื่อสร้างเทมเพลตคำยินยอมใหม่

  • ใช้ API โหมดความยินยอมของ Tag Manager setDefaultConsentState และ updateConsentState แทน gtag consent

  • ตั้งค่าสถานะความยินยอมเริ่มต้นทันทีที่เริ่มทํางานโดยใช้ทริกเกอร์การเริ่มต้นขอความยินยอม - ทุกหน้า

  • CMP ต้องแจ้งผู้เข้าชมให้อนุญาตหรือปฏิเสธความยินยอมสําหรับคํายินยอมทุกประเภทที่เกี่ยวข้องโดยเร็วที่สุด

  • เมื่อผู้เข้าชมระบุตัวเลือกความยินยอม CMP จะต้องผ่านสถานะความยินยอมที่อัปเดตแล้ว

1. สร้างเทมเพลตใหม่

วิธีการใช้งานนี้จะใช้ 1 ช่องในเทมเพลตเพื่อเก็บสถานะความยินยอมเริ่มต้น โค้ดการใช้งานจะอ่านช่องดังกล่าวเพื่อตั้งค่าสถานะความยินยอมเริ่มต้นขณะรันไทม์ สำหรับคำสั่งอัปเดต โค้ดจะพยายามอ่านคุกกี้ที่กำหนดโดยโซลูชันความยินยอมเพื่อเลือกตัวเลือกความยินยอมของผู้เข้าชมร้านค้า นอกจากนี้ คุณยังจะตั้งค่าโค้ดเรียกกลับสำหรับ updateConsentState เพื่อจัดการกรณีที่ผู้เข้าชมยังไม่ได้เลือกความยินยอมหรือตัดสินใจเปลี่ยนความยินยอมด้วย

  1. เข้าสู่ระบบบัญชี Google Tag Manager
  2. เลือกเทมเพลตที่การนำทางด้านซ้าย
  3. ในแผงเทมเพลตแท็ก ให้คลิกใหม่
  1. เลือกแท็บช่อง แล้วคลิกเพิ่มช่อง > ตารางพารามิเตอร์
  2. เปลี่ยนชื่อเป็น defaultSettings
  3. ขยายช่อง
  4. อัปเดตชื่อที่แสดงเป็น Default settings
  5. คลิกเพิ่มคอลัมน์ เลือกการป้อนข้อความ เปลี่ยนชื่อเป็น region และเลือกช่องกำหนดให้ค่าของคอลัมน์ไม่ซ้ำกัน
  6. ขยายคอลัมน์และเปลี่ยนชื่อที่แสดงเป็น Region (leave blank to have consent apply to all regions) ข้อความในวงเล็บคือเอกสาร สำหรับผู้ใช้เทมเพลต ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าเริ่มต้นสำหรับความยินยอมสำหรับภูมิภาคต่างๆ
  7. คลิกเพิ่มคอลัมน์ เลือกการป้อนข้อความ แล้วเปลี่ยนชื่อเป็น granted
  8. ขยายคอลัมน์และเปลี่ยนชื่อที่แสดงเป็น Granted Consent Types (comma separated)
  9. คลิกเพิ่มคอลัมน์ เลือกการป้อนข้อความ แล้วเปลี่ยนชื่อเป็น denied
  10. ขยายคอลัมน์และเปลี่ยนชื่อที่แสดงเป็น Denied Consent Types (comma separated)

ไม่บังคับ: วิธีเพิ่มการรองรับการปกปิดข้อมูลในบริบทโฆษณา

  1. คลิกเพิ่มช่อง เลือกช่องทำเครื่องหมาย แล้วเปลี่ยนชื่อช่องเป็น ads_data_redaction
  2. อัปเดตชื่อที่แสดงเป็น Redact Ads Data

ดูข้อมูลเพิ่มเติมเกี่ยวกับลักษณะการทำงานของคุกกี้ด้วยการปกปิดข้อมูลบางส่วนโฆษณา

ไม่บังคับ: หากต้องการเพิ่มการสนับสนุนสำหรับการส่งผ่านพารามิเตอร์ URL ให้ทำดังนี้

  1. คลิกเพิ่มช่อง เลือกช่องทำเครื่องหมาย แล้วเปลี่ยนชื่อช่องเป็น url_passthrough
  2. อัปเดตชื่อที่แสดงเป็น Pass through URL parameters

ดูข้อมูลเพิ่มเติมเกี่ยวกับการส่งผ่านพารามิเตอร์ของ URL

วิธีเพิ่มโค้ดการใช้งาน

  1. เปิดแท็บโค้ดในเครื่องมือแก้ไขเทมเพลต
  2. แก้ไขช่องตัวยึดตำแหน่งในตัวอย่างโค้ดด้านล่าง
  3. คัดลอกโค้ดและแทนที่โค้ดต้นแบบในเครื่องมือแก้ไขเทมเพลต
  4. บันทึกเทมเพลต
// 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();

ถัดไป ให้กำหนดค่าสิทธิ์ในการเข้าถึงสถานะความยินยอมและการเข้าถึงคุกกี้

  1. เลือกแท็บสิทธิ์ แล้วคลิกเข้าถึงสถานะความยินยอม
  2. คลิกเพิ่มประเภทความยินยอม
  3. คลิกช่องแล้วเลือก ad_storage จากเมนูแบบเลื่อนลง
  4. เลือกเขียน
  5. คลิกเพิ่ม
  6. ทำซ้ำขั้นตอนที่ 2-5 สำหรับ ad_user_data, ad_personalization และ analytics_storage หากต้องการประเภทความยินยอมเพิ่มเติม ให้เพิ่มด้วยวิธีเดียวกัน
  7. คลิกบันทึก

วิธีเพิ่มสิทธิ์ในการเข้าถึงคุกกี้

  1. เลือกแท็บสิทธิ์ แล้วคลิกอ่านค่าของคุกกี้
  2. ในส่วนเจาะจง ให้ป้อนชื่อของคุกกี้แต่ละรายการที่โค้ดต้องอ่านเพื่อระบุตัวเลือกความยินยอมของผู้ใช้ บรรทัดละ 1 ชื่อ
  3. คลิกบันทึก

2. สร้างการทดสอบ 1 หน่วย

ดูข้อมูลเกี่ยวกับการสร้างการทดสอบสำหรับเทมเพลตได้ที่การทดสอบ

โค้ดต่อไปนี้แสดงตัวอย่าง 1 ตัวอย่างวิธีผสานรวมเทมเพลตนี้กับโค้ดสำหรับโซลูชันการจัดการความยินยอมโดยการเพิ่ม Listener

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

เจาะจงที่สุดจะมีความสำคัญเหนือกว่า

หากมีคำสั่งความยินยอมเริ่มต้น 2 คำสั่งในหน้าเดียวกันที่มีค่าสำหรับภูมิภาคและภูมิภาคย่อย คำสั่งที่มีภูมิภาคที่เจาะจงมากกว่าจะมีผลบังคับใช้ ตัวอย่างเช่น หากคุณตั้งค่า ad_storage เป็น 'granted' สำหรับภูมิภาค US และตั้ง ad_storage เป็น 'denied' สำหรับภูมิภาค US-CA ผู้เข้าชมจากแคลิฟอร์เนียจะใช้การตั้งค่า US-CA ที่เจาะจงมากกว่า

ภูมิภาค ad_storage ลักษณะการทำงาน
สหรัฐอเมริกา 'granted' มีผลกับผู้ใช้ในสหรัฐอเมริกาที่ไม่ได้อยู่ในแคนาดา
สหรัฐอเมริกา-แคนาดา 'denied' มีผลกับผู้ใช้ US-CA
ไม่ระบุ 'granted' ใช้ค่าเริ่มต้น 'granted' ในตัวอย่างนี้ นโยบายนี้ใช้กับผู้ใช้ที่ไม่ได้อยู่ในสหรัฐอเมริกาหรือแคนาดา

ข้อมูลเมตาเพิ่มเติม

คุณใช้ gtagSet API เพื่อตั้งค่าพารามิเตอร์ที่ไม่บังคับต่อไปนี้ได้

API เหล่านี้ใช้ได้เฉพาะในสภาพแวดล้อมแซนด์บ็อกซ์ของเทมเพลต GTM เท่านั้น

ส่งผ่านข้อมูลการคลิกโฆษณา รหัสไคลเอ็นต์ และรหัสเซสชันใน URL

เมื่อผู้เข้าชมไปที่เว็บไซต์ของผู้ลงโฆษณาหลังจากที่คลิกโฆษณา ข้อมูลเกี่ยวกับโฆษณาอาจต่อท้าย URL ของหน้า Landing Page เป็นพารามิเตอร์การค้นหา เพื่อปรับปรุงความแม่นยำของ Conversion แท็กของ Google มักจะเก็บข้อมูลนี้ ไว้ในคุกกี้ของบุคคลที่หนึ่งในโดเมนของผู้ลงโฆษณา

อย่างไรก็ตาม หาก ad_storage คือ denied แท็ก Google จะไม่บันทึกข้อมูลนี้ในเครื่อง หากต้องการปรับปรุงคุณภาพการวัดการคลิกโฆษณาในกรณีนี้ ผู้ลงโฆษณาสามารถเลือกส่งข้อมูลการคลิกโฆษณาผ่านพารามิเตอร์ของ URL ในหน้าเว็บต่างๆ โดยใช้ฟีเจอร์ที่เรียกว่า "การส่งผ่าน URL"

ในทำนองเดียวกัน หากตั้งค่า analytics_storage เป็น "ปฏิเสธ" การส่งผ่าน URL จะใช้เพื่อส่งข้อมูลวิเคราะห์ตามเหตุการณ์และเซสชัน (รวมถึง Conversion) ได้โดยไม่ต้องใช้คุกกี้ในหน้าเว็บต่างๆ

การส่งผ่าน URL จะต้องเป็นไปตามเงื่อนไขต่อไปนี้

  • หน้าเว็บมีแท็ก Google ที่รับรู้ถึงความยินยอม
  • เว็บไซต์ได้เลือกใช้ฟีเจอร์การส่งผ่าน URL
  • มีการใช้โหมดความยินยอมในหน้าเว็บ
  • ลิงก์ขาออกจะอ้างอิงโดเมนเดียวกับโดเมนของหน้าเว็บปัจจุบัน
  • gclid/dclid มีอยู่ใน URL (แท็ก Google Ads และ Floodlight เท่านั้น)

เทมเพลตของคุณควรอนุญาตให้ผู้ใช้เทมเพลตกำหนดค่าได้ว่าต้องการเปิดใช้การตั้งค่านี้หรือไม่ โค้ดเทมเพลตต่อไปนี้ใช้ในการตั้งค่า url_passthrough เป็น true

gtagSet('url_passthrough', true);

ปกปิดข้อมูลในบริบทโฆษณา

เมื่อปฏิเสธ ad_storage จะไม่มีการตั้งค่าคุกกี้ใหม่เพื่อใช้ในการโฆษณา นอกจากนี้ ระบบจะไม่ใช้คุกกี้ของบุคคลที่สามที่ตั้งค่าไว้ก่อนหน้านี้ใน google.com และ doubleclick.net ข้อมูลที่ส่งไปยัง Google จะยังคงมี URL แบบเต็ม รวมถึงข้อมูลการคลิกโฆษณาในพารามิเตอร์ของ URL

หากต้องการปกปิดข้อมูลโฆษณาของคุณเพิ่มเติมเมื่อ ad_storage ถูกปฏิเสธ ให้ตั้งค่า ads_data_redaction เป็น "จริง"

เมื่อ ads_data_redaction เป็นจริงและ ad_storage ถูกปฏิเสธ ตัวระบุการคลิกโฆษณาที่ส่งในคำขอเครือข่ายโดยแท็ก Google Ads และ Floodlight จะได้รับการปกปิด

gtagSet('ads_data_redaction', true);

รหัสนักพัฒนาซอฟต์แวร์

หากคุณเป็นผู้ให้บริการ CMP ที่มีรหัสนักพัฒนาซอฟต์แวร์ที่ออกโดย Google ให้ใช้วิธีการต่อไปนี้เพื่อตั้งค่าให้เร็วที่สุดในเทมเพลต

คุณต้องใช้รหัสนักพัฒนาซอฟต์แวร์เฉพาะเมื่อการใช้งานของคุณจะใช้กับหลายๆ เว็บไซต์โดยบริษัทหรือบุคคลที่ไม่เกี่ยวข้อง หากจะใช้โดยเว็บไซต์หรือเอนทิตีเดียว ก็ไม่ต้องใช้รหัสนักพัฒนาซอฟต์แวร์

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

ส่งเอกสารให้กับผู้ใช้

ผู้ใช้จะใช้เทมเพลตความยินยอมเพื่อตั้งค่าแท็กที่รวบรวมความยินยอมของผู้ใช้ได้ จัดเตรียมเอกสารอธิบายแนวทางปฏิบัติ ที่ดีที่สุดต่อไปนี้ให้กับผู้ใช้

  • วิธีตั้งค่าเริ่มต้นสำหรับความยินยอมในตารางการตั้งค่า
  • วิธีตั้งค่าค่าเริ่มต้นสำหรับความยินยอมสำหรับภูมิภาคต่างๆ โดยการเพิ่มแถวในตาราง
  • ทริกเกอร์แท็กในทริกเกอร์การเริ่มต้นขอความยินยอม - ทุกหน้า

ขั้นตอนถัดไป

หากต้องการมอบเทมเพลตให้ผู้ใช้ Tag Manager ทุกคน ให้อัปโหลดไปยังแกลเลอรีเทมเพลตชุมชน