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

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

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

สถานะความยินยอมและประเภทความยินยอม

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

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

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

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

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

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

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

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 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();

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

วิธีเพิ่มสิทธิ์ในการจัดการสถานะความยินยอม

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

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

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

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

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

3. ผสานรวมเทมเพลตกับโซลูชันความยินยอม

โค้ดต่อไปนี้แสดงตัวอย่างวิธีผสานรวมเทมเพลตนี้ กับโค้ดสำหรับโซลูชันการจัดการความยินยอมโดยการเพิ่ม 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);
  });
};

อัปเดตสถานะความยินยอม

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

ตัวอย่างต่อไปนี้แสดงการเรียก 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 ที่เฉพาะเจาะจงกว่า

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

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

• url_passthrough
• ads_data_redaction
• developer_id

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

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

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

อย่างไรก็ตาม หาก 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 ทุกคน ให้อัปโหลดเทมเพลตไปยังแกลเลอรีเทมเพลตชุมชน