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

บทความนี้มีไว้สําหรับนักพัฒนาซอฟต์แวร์ที่ดูแลโซลูชันการจัดการความยินยอมในเว็บไซต์ที่ใช้ 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 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 หน่วย

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

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

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

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

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

• url_passthrough
• ads_data_redaction
• developer_id

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

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

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

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

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

คุณต้องปฏิบัติตามเงื่อนไขต่อไปนี้เพื่อใช้การส่งผ่าน URL

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

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

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