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

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

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

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

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

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

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

• ใช้ setDefaultConsentState และ updateConsentState API ของโหมดความยินยอมของ Tag Manager แทน 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. คัดลอกโค้ดแล้วแทนที่โค้ด Boilerplate ในเครื่องมือแก้ไขเทมเพลตด้วยโค้ดที่คัดลอก
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 รายการต่อบรรทัด
3. คลิกบันทึก

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

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

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

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

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

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

คุณต้องเป็นไปตามเงื่อนไขต่อไปนี้จึงจะใช้การส่งผ่าน URL ได้

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

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

gtagSet('url_passthrough', true);

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

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

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

เมื่อ ads_data_redaction เป็น "จริง" และ ad_storage เป็น denied ระบบจะปกปิดตัวระบุการคลิกโฆษณาที่แท็ก Google Ads และ Floodlight ส่งในคําขอเครือข่าย

gtagSet('ads_data_redaction', true);

รหัสนักพัฒนาแอป

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

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

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

ระบุเอกสารประกอบสําหรับผู้ใช้

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

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

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

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