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

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

วิธีการติดตั้งใช้งานนี้ใช้ช่องเพียงช่องเดียวในเทมเพลตเพื่อเก็บค่า สถานะความยินยอมเริ่มต้น รหัสการใช้งานจะอ่านช่องนั้นเพื่อตั้งค่า สถานะความยินยอมเริ่มต้นขณะรันไทม์ สำหรับคำสั่งอัปเดต โค้ดจะพยายาม เพื่ออ่านคุกกี้ที่โซลูชันการขอความยินยอมตั้งค่าไว้ให้จัดเก็บตัวเลือกความยินยอมของผู้เข้าชม คุณยังจะต้องตั้งค่าการติดต่อกลับสำหรับ 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 ที่เฉพาะเจาะจงจะมีผล

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

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

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

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