บทความนี้มีไว้สําหรับนักพัฒนาซอฟต์แวร์ที่ดูแลโซลูชันการจัดการความยินยอมในเว็บไซต์ที่ใช้ 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
เพื่อจัดการเคสที่ผู้เข้าชมยังไม่ได้เลือกความยินยอมหรือตัดสินใจที่จะเปลี่ยนแปลงความยินยอม
วิธีสร้างเทมเพลตความยินยอม
- เข้าสู่ระบบบัญชี Google Tag Manager
- เลือกเทมเพลตในการนำทางด้านซ้าย
- คลิกใหม่ในแผงเทมเพลตแท็ก
วิธีตั้งค่าสถานะความยินยอมเริ่มต้น
- เลือกแท็บฟิลด์ แล้วคลิกเพิ่มฟิลด์ > ตารางพารามิเตอร์
- เปลี่ยนชื่อเป็น
defaultSettings
- ขยายช่อง
- อัปเดตชื่อที่แสดงเป็น
Default settings
- คลิกเพิ่มคอลัมน์ เลือกการป้อนข้อความ เปลี่ยนชื่อเป็น
region
แล้วทําเครื่องหมายในช่องกําหนดให้ค่าคอลัมน์ไม่ซ้ำกัน - ขยายคอลัมน์ แล้วเปลี่ยนชื่อที่แสดงเป็น
Region (leave blank to have consent apply to all regions)
ข้อความในวงเล็บคือ เอกสารสำหรับผู้ใช้เทมเพลตของคุณ ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าค่าเริ่มต้นของความยินยอมสำหรับภูมิภาคต่างๆ - คลิกเพิ่มคอลัมน์ เลือกการป้อนข้อความ แล้วเปลี่ยนชื่อเป็น
granted
- ขยายคอลัมน์และเปลี่ยนชื่อที่แสดงเป็น
Granted Consent Types (comma separated)
- คลิกเพิ่มคอลัมน์ เลือกการป้อนข้อความ แล้วเปลี่ยนชื่อเป็น
denied
- ขยายคอลัมน์และเปลี่ยนชื่อที่แสดงเป็น
Denied Consent Types (comma separated)
ไม่บังคับ: หากต้องการเพิ่มการรองรับการปกปิดข้อมูลโฆษณา ให้ทำดังนี้
- คลิกเพิ่มช่อง เลือกช่องทำเครื่องหมาย แล้วเปลี่ยนชื่อช่องเป็น
ads_data_redaction
- อัปเดตชื่อที่แสดงเป็น
Redact Ads Data
ดูข้อมูลเพิ่มเติมเกี่ยวกับลักษณะการทํางานของคุกกี้ด้วยการปกปิดข้อมูลบางส่วนของโฆษณา
ไม่บังคับ: หากต้องการเพิ่มการรองรับการส่งผ่านพารามิเตอร์ของ URL ให้ทำดังนี้
- คลิกเพิ่มช่อง เลือกช่องทำเครื่องหมาย แล้วเปลี่ยนชื่อช่องเป็น
url_passthrough
- อัปเดตชื่อที่แสดงเป็น
Pass through URL parameters
ดูข้อมูลเพิ่มเติมเกี่ยวกับการส่งผ่านพารามิเตอร์ของ URL
วิธีเพิ่มโค้ดการใช้งาน
- เปิดแท็บโค้ดในเครื่องมือแก้ไขเทมเพลต
- แก้ไขช่องตัวยึดตําแหน่งในโค้ดตัวอย่างด้านล่าง
- คัดลอกโค้ดและแทนที่โค้ดที่เขียนไว้ล่วงหน้าในตัวแก้ไขเทมเพลต
- บันทึกเทมเพลต
// 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();
ถัดไป ให้กําหนดค่าสิทธิ์ในการเข้าถึงสถานะความยินยอมและสิทธิ์ในการเข้าถึงคุกกี้
วิธีเพิ่มสิทธิ์สำหรับการจัดการสถานะความยินยอม
- เลือกแท็บสิทธิ์ แล้วคลิกสถานะความยินยอมในการเข้าถึง
- คลิกเพิ่มประเภทความยินยอม
- คลิกช่อง แล้วเลือก
ad_storage
จากเมนูแบบเลื่อนลง - เลือกเขียน
- คลิกเพิ่ม
- ทำขั้นตอนที่ 2-5 ซ้ำสำหรับ
ad_user_data
,ad_personalization
และanalytics_storage
หากต้องการเพิ่มประเภทความยินยอม ให้เพิ่มในลักษณะเดียวกัน - คลิกบันทึก
วิธีเพิ่มสิทธิ์เข้าถึงคุกกี้
- เลือกแท็บสิทธิ์ แล้วคลิกอ่านค่าคุกกี้
- ในส่วนข้อมูลจำเพาะ ให้ป้อนชื่อคุกกี้แต่ละรายการที่โค้ดต้องอ่านเพื่อกำหนดตัวเลือกความยินยอมของผู้ใช้ 1 ชื่อต่อบรรทัด
- คลิกบันทึก
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' |
มีผลกับผู้ใช้ในแคนาดาและสหรัฐอเมริกา |
ไม่ระบุ | 'granted' |
ใช้ค่าเริ่มต้นที่ 'granted' ในตัวอย่างนี้ กรณีนี้มีผลกับผู้ใช้ที่ไม่ได้อยู่ในสหรัฐอเมริกาหรือสหรัฐอเมริกา (US-CA)
|
ข้อมูลเมตาเพิ่มเติม
คุณสามารถใช้ gtagSet API เพื่อตั้งค่าพารามิเตอร์ที่ไม่บังคับต่อไปนี้
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 ทุกคน ให้อัปโหลดเทมเพลตนั้นไปยังแกลเลอรีเทมเพลตชุมชน