การตั้งค่าโหมดความยินยอมใน Google Analytics

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

พรบ. คุ้มครองข้อมูลส่วนบุคคล (PDPA)

พรบ. คุ้มครองข้อมูลส่วนบุคคล (Personal Data Protection Act หรือ PDPA) คือกฏหมายที่มีผลในการคุ้มครองข้อมูลส่วนบุคคลของบุคคลที่อยู่ในประเทศไทย โดยรวมถึงข้อมูลส่วนบุคคลของผู้เยี่ยมชมเว็บไซต์ หรือข้อมูลส่วนบุคคลที่เกี่ยวข้องกับเว็บไซต์และการใช้บริการออนไลน์  โดยกฎหมายนี้ได้เริ่มบังคับใช้อย่างเต็มรูปแบบเมื่อวันที่ 1 มิถุนายน 2565

สำหรับการเก็บข้อมูลผู้เยี่ยมชมเว็บไซต์มีข้อสำคัญที่ต้องคำนึงถึงดังนี้

1. ความยินยอม: PDPA กำหนดว่าการเก็บข้อมูลส่วนบุคคลของผู้เยี่ยมชมเว็บไซต์ต้องได้รับความยินยอมจากเขาโดยชัดเจน และเขาต้องมีสิทธิ์ในการเลือกว่าจะให้ข้อมูลหรือไม่ หากผู้เยี่ยมชมเว็บไซต์ไม่ยินยอมให้เก็บข้อมูลส่วนบุคคลของเขา คุณต้องปฏิเสธการเก็บข้อมูลหรือดำเนินการตามกฏหมายที่เกี่ยวข้อง.
2. การจัดการข้อมูล: เจ้าของเว็บไซต์ต้องจัดการข้อมูลส่วนบุคคลที่เก็บให้ปลอดภัยและป้องกันการหลุดข้อมูล นอกจากนี้เจ้าของเว็บไซต์ต้องเก็บข้อมูลเพียงเท่าที่จำเป็นและเฉพาะในวัตถุประสงค์ที่ได้รับอนุญาต.
3. การแจ้งให้ทราบและสิทธิของเข้าข้อมูล: PDPA กำหนดว่าผู้เยี่ยมชมเว็บไซต์ต้องมีสิทธิในการทราบถึงการใช้ข้อมูลของเขา และสามารถขอให้เจ้าของเว็บไซต์ให้ข้อมูลเกี่ยวกับเขา เจ้าของเว็บไซต์ต้องรายงานการใช้ข้อมูลในกรณีที่ผู้เยี่ยมชมเว็บไซต์ขอให้รายงาน.
4. ความรับผิดชอบต่อข้อมูลส่วนบุคคล: เจ้าของเว็บไซต์ต้องรับผิดชอบต่อข้อมูลส่วนบุคคลที่เขาเก็บและจัดการ หากมีการละเมิด PDPA อาจมีการลงโทษตามกฏหมาย.
5. ข้อมูลส่วนบุคคลของเด็ก: ควรระมัดระวังในการเก็บข้อมูลส่วนบุคคลของเด็ก และต้องได้รับความยินยอมจากผู้ปกครองหรือผู้ปกครองก่อนที่จะเก็บข้อมูลของเด็ก.
6. การส่งข้อมูลไปยังประเทศอื่น: หากมีการส่งข้อมูลส่วนบุคคลไปยังประเทศอื่น ต้องปฏิบัติตามข้อกำหนดเฉพาะตาม PDPA เช่นการรับความยินยอมจากเจ้าของข้อมูล, การรักษาความปลอดภัยข้อมูล, และการรายงานการส่งข้อมูล.

โหมดความยินยอม (Consent mode)

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

แล้วเว็บไซต์ของเราจะรู้ได้อย่างไรว่าผู้ใช้ยินยอมแล้ว?

การสร้างโหมดความยินยอมบนเว็บไซต์มี 2 ตัวเลือก ตัวเลือกแรกก็คือการสร้างโหมดความยินยอมบนเว็บไซต์ของเราด้วยตัวเอง เพื่อแจ้งให้ผู้ใช้อนุญาต ตัวเลือกที่สองก็คือการใช้แพลตฟอร์มการจัดการความยินยอม (Consent Mode Platform – CMP) ของ 3rd Party ที่ทำเสร็จแล้ว นำไปใช้ได้ทันที ซึ่งคุณสามารถนำมาติดตั้งในเว็บไซต์ของคุณได้โดยที่คุณไม่ต้องสร้างเอง ซึ่งแพลตฟอร์มเหล่านี้จะสามารถทำทุกสิ่งทุกอย่างให้คุณได้

สำหรับบทความนี้จะเป็นตัวอย่างของการสร้าง Consent mode ด้วยตัวคุณเอง เพื่อให้คุณเข้าใจว่ากระบวนการเหล่านี้ทำงานอย่างไร และผลลัพธ์เป็นอย่างไรในเว็บไซต์ของคุณ

รู้จักกับแบนเนอร์ขอความยินยอม (Consent banner)

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

• ยอมรับคุกกี้ทั้งหมด (Accept All)
• เลือกยอมรับบางส่วน (Accept Selection)
• ปฏิเสธทั้งหมด (Reject All)

โดยค่าเริ่มต้นที่ถูกตั้งค่าในเว็บไซต์ได้ถูกตั้งค่าให้ปฏิเสธทั้งหมด (Denied Necessary, Analytics, Preferences and Marketing) ซึ่งหากผู้ใช้ยังไม่ได้เลือกที่จะกดปุ่มอะไร ข้อมูลจะยังไม่ถูกส่งไปยัง Google Analytics ซึ่งหากเข้าไปดูใน Realtime report ตามรูปด้านล่าง คุณก็จะยังไม่เห็นข้อมูลผู้ใช้ในรายงาน เพราะผู้ใช้ได้ปฏิเสธการวิเคราะห์ (denied analytics) ทำให้ไม่สามารถจัดเก็บข้อมูลใดๆ ได้

ตอนนี้สิ่งที่เกิดขึ้นแต่คุณไม่สามารถมองเห็นได้ในที่นี้ก็คือ “Ping ที่ไม่ระบุชื่อ” (anonymous pings) โดยมันจะถูกส่งไปยังการวิเคราะห์ ซึ่งสามารถนำไปใช้ในการสร้างแบบจำลองพฤติกรรมได้ และนั่นจะช่วยให้คุณสามารถเติมเต็มช่องว่างระหว่างผู้ที่ยอมรับคุกกี้ของคุณกับผู้ที่ไม่ยอมรับ ทำให้คุณได้รับการนำเสนอที่ดีขึ้นเกี่ยวกับสิ่งที่เกิดขึ้นจริงบนเว็บไซต์ของคุณ โดยไม่กระทบต่อความเป็นส่วนตัวหรือความปลอดภัยของผู้ใช้ แต่ถ้าผู้ใช้กดยอมรับคุกกี้ทั้งหมด ก่อนเข้าใช้งานเว็บไซต์ ข้อมูลเหตุการณ์ต่างๆ ก็จะถูกส่งไปยัง Google Analytics ดังรูปด้านล่าง

การสร้าง Consent mode ที่เว็บไซต์ของคุณด้วยตนเอง

ติดตั้ง Consent mode script

ให้คุณใส่ Consent mode script ไว้ใต้ ก่อน Google Tag Manager script ในทุกๆ หน้าของเว็บไซต์ดังรูปด้านล่าง โดย script ได้กำหนดความยินยอมเบื้องต้น (defualt consent) เป็นปฏิเสธทั้งหมด เมื่อมีการโหลด Tag Manager script การตั้งค่านั้นก็จะส่งไปที่ Google Tag Manager ด้วย 

ที่คำสั่ง gtag เราสามารถตั้งค่าพื้นที่เก็บข้อมูลของคุกกี้ (storage) ประเภทต่างๆ ให้เป็นค่าที่เราต้องการ ซึ่งตอนนี้ storage ทั้งหมดถูกตั้งค่าให้ถูกปฏิเสธ (denied)

จาก Script ด้านบนคุณจะเห็นว่า defualt consent ของทุก storage ถูกตั้งค่าเป็นปฏิเสธ (denied) ทั้งหมด และหากพวกเขาเลือกความยินยอมแล้ว เราจะจัดเก็บการเลือกไว้ในที่จัดเก็บในตัวเครื่อง (localStorage) และหากพวกเขาเข้ามาที่เว็บอีกครั้ง เราเพียงแค่โหลดซ้ำสิ่งที่เลือกก่อนหน้านั้นมาจาก localStorage ได้

ประเภทคํายินยอมใน Tag Manager

<div id="cookie-consent-banner" class="cookie-consent-banner"><h3 id="heading-7">Cookie settings</h3>
<p style="text-align:center">เราใช้คุกกี้ (cookies) เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้งานเว็บไซต์ของคุณ คุณสามารถอ่านข้อมูลเพิ่มเติมได้ที่หน้า <a href="https://www.teamdigital.team/privacy-policy/" target="_blank" rel="noopener">นโยบายความเป็นส่วนตัว</a></p>
<button id="btn-accept-all" class="cookie-consent-button btn-success">Accept All</button><button id="btn-accept-some" class="cookie-consent-button btn-outline">Accept Selection</button><button id="btn-reject-all" class="cookie-consent-button btn-grayscale">Reject All</button><div class="cookie-consent-options"><label><input id="consent-necessary" type="checkbox" value="Necessary" checked disabled>Necessary</label><label><input id="consent-analytics" type="checkbox" value="Analytics" checked>Analytics</label><label><input id="consent-preferences" type="checkbox" value="Preferences" checked>Preferences</label><label><input id="consent-marketing" type="checkbox" value="Marketing">Marketing</label></div>
</div>

ติดตั้งแบนเนอร์ความยินยอม (Consent banner)

จาก Code ด้านบน เป็น HTML ของ Consent banner โดยมีการเขียน setConsent function เพื่อตั้งค่าความยินยอมตามที่ผู้ใช้ได้เลือกไว้ ดังรูปด้านล่าง

จาก Script ด้านบน ถ้ายังไม่มีการเก็บค่า consentMode ไว้ใน localStorrage (localStorage.getItem(‘consentMode’)=== null) เว็บไซต์ก็จะแสดง Consent banner เพื่อให้ผู้ใช้เลือกการตั้งค่า Cookies

หลังจากที่ผู้ใช้เลือกแล้ว Consent banner ก็จะถูกซ่อนไว้ และค่าที่ผู้ใช้เลือกก็จะถูกจัดเก็บไว้ที่ localStorage ดังรูปด้านล่าง และหากผู้ใช้เข้ามาที่เว็บไซต์อีกครั้ง ก็จะไม่มีการแสดง Consent banner อีก โดยจะนำค่า consentMode ที่เก็บไว้ใน localStorage มาใช้งาน

การตั้งค่าความยินยอมที่ Google Tag Manager

• เปิด Google Tag Manager แล้วไปยัง Container ของเว็บไซต์ คลิกที่แท็บ Adminแล้วเลือก Container Settings
• ที่ Additional Settings ให้คลิกถูกที่ Enable consent overview เพื่อเปิดใช้งานโหมดความยินยอม ดังรูปด้านล่าง

กลับมาที่แท็บ Workspace คลิกที่ Tags เราจะเห็นโล่เล็กๆที่มุมขวาใกล้ๆ ปุ่ม New ซึ่งสิ่งนี้จะช่วยให้เราระบุได้ว่า tag ใดที่ได้รับการกำหนดค่าเพื่อความยินยอมแล้ว และแท็กใดที่ไม่ได้กำหนดค่าความยินยอม

กลับมาที่แท็บ Workspace คลิกที่ Tags เราจะเห็นโล่เล็กๆที่มุมขวาใกล้ๆ ปุ่ม New ซึ่งสิ่งนี้จะช่วยให้เราระบุได้ว่า tag ใดที่ได้รับการกำหนดค่าเพื่อความยินยอมแล้ว และแท็กใดที่ไม่ได้กำหนดค่าความยินยอม ให้คลิกโลห์เพื่อเข้าไปตั้งค่า

จากรูปด้านบนจะเห็นว่า ยังไม่มีการกำหนดค่าแท็กของเราเลย

จากรูปด้านบนจะเห็นว่า ยังไม่มีการกำหนดค่าแท็กของเราเลย ให้คลิกไปที่แท็กที่เราต้องการตั้งค่า แล้วคลิกไปที่โลห์ และให้ตั้งค่าความยินยอมเป็น ไม่จำเป็นต้องได้รับความยินยอมเพิ่มเติม (No additional consent required) แล้วกดบันทึกและปิดหน้าต่าง

หลังจากตั้งค่าความยินยอมเรียบร้อยแล้ว แท็กจะถูกย้ายไปที่ช่อง Consent Configured ให้ปิดหน้าต่างแล้วกลับไปที่ Workspace เพื่อกด Preview เพื่อทดสอบการตั้งค่าที่เราทำไว้ ที่หน้าต่าง Tag assistant ให้เราป้อน URL ของเว็บไซต์แล้วคลิก Connect เว็บไซต์จะถูกเปิดที่หน้าต่างใหม่ ให้เราคลิกไปที่เมนูอะไรก็ได้ที่หน้าเว็บ แล้วคลิกกลับมาที่หน้าแรก (ในตัวอย่างนี้คลิกไปที่หน้าเกี่ยวกับแล้วจึงกลับมาที่หน้าแรก)  

กลับมาที่หน้าต่าง Tag assistant อีกครั้ง ให้คลิกที่ Consent Initialization จากนั้นคลิกที่ Consent

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

นี่คือวิธีที่เราสามารถตรวจสอบได้ว่าแบนเนอร์ของเราใช้งานได้จริง

VDO

บทสรุป

ตอนนี้คุณคงเข้าใจภาพรวมแล้วว่าโหมดความยินยอมคืออะไร และจะใช้งานอย่างไร 

หากคุณต้องการดู Code ของบทความนี้เพื่อนำไปใช้อย่างไรบนเว็บไซต์ของคุณ คุณสามารถ download  ได้้จาก GitHub ที่นี่