Cookie Consent ตัวช่วยสำหรับเจ้าของเว็บไซต์ ในการจัดเก็บคุกกี้ตามกฎหมาย PDPA

Coding Sep 13, 2022

Cookie Consent คือ การขอความยินยอมเพื่อจัดเก็บไฟล์ Cookies และข้อมูลต่างๆ ของผู้ใช้งานในเว็บไซต์ ซึ่งตามกฎหมาย PDPA เจ้าของเว็บมีหน้าที่ควบคุมข้อมูลส่วนตัวและ ผู้ใช้งานก็ต้องสามารถ ยินยอม หรือ ปฎิเสธการจัดเก็บข้อมูลได้เช่นกัน

สำหรับการจัดเก็บ Cookies หลักๆ ก็จะมีด้วยกันคือ

  • Necessary cookies (คุกกี้ที่จำเป็น) ถ้าไม่จัดเก็บ ก็อาจจะส่งผลให้เว็บใช้งานไม่ได้
  • Preference cookies คุกกี้เพื่อให้เว็บทำงานได้ดี
  • Analytics cookies พวกการเก็บข้อมูลเข้าชมต่างๆ
  • Marketing cookies เป็นคุกกี้ที่จะเก็บข้อมูลของผู้ใช้ พฤติกรรมการใช้งาน หรือประวัติ ขึ้นอยู่กับ Platform เพื่อไปทำโฆษณา หรือส่งต่อให้ 3rd Party

แต่สำหรับบทความนี้ เราจะไม่ได้ลงลึกไปในรายละเอียดของกฎหมายหรือ Cookies แต่จะพูดถึง Tool ตัวนึงที่เป็น JavaScript นำมาติดหน้าเว็บ เราก็จะได้ Cookie Consent อย่างง่ายๆเลย

ชื่อ Plugin ก็ชื่อง่ายๆ ตรงตัวเลยครับ เค้าให้นิยามความหมายของตัวเองไว้ว่า

A lightweight & gdpr compliant cookie consent plugin written in plain javascript.
หน้าตา Popup เมื่อเราเอา Script ไปใส่ในเว็บ เรียกว่าสะดวกมากๆ แถมสามารถปรับแต่ง UI ได้ด้วย

เราสามารถเข้าเว็บเพื่อดู Demo ได้ และยังสามารถปรับแต่งได้อีกด้วย ว่าอยากได้ Popup แบบไหน เป็นแบบ Box หรือแบบ Cloud หรือเป็น Bar เลย

CookieConsent demo — Orest Bida
cookieconsent demo page
หน้า Demo ให้เราลองปรับ ว่าอยากได้แบบไหน พร้อมตัวอย่างให้ดู
ปรับแต่งสีก็ได้ด้วยนะ

วิธีใช้งานก็ง่ายแสนง่าย เพียงแค่ใส่ Script 2 บรรทัดนี้เพื่อเพิ่ม JavaScript และ CSS ของ Cookie Consent

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.css">
<script src="https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.js"></script>

ส่วนสุดท้าย ก็คือ Config ต่างๆ ของเรา ตัวอย่าง

<script>
  window.addEventListener('load', function () {
    var cc = initCookieConsent();
    console.log('onload', cc)
    cc.run({
      current_lang: 'th',
      autorun: true,
      autoclear_cookies: true,
      page_scripts: true,
      gui_options: {},
      languages: {
        th: {
          consent_modal: {},
          settings_modal: {}
        }
      }

    });
  });
</script>

อยากเปลี่ยน Layout ก็เปลี่ยน gui_options เป็นที่เราต้องการได้เลย

cookieconsent.run({
    // ...
    gui_options: {
        consent_modal: {
            layout: 'cloud',               // box/cloud/bar
            position: 'bottom center',     // bottom/middle/top + left/right/center
            transition: 'slide',           // zoom/slide
            swap_buttons: false            // enable to invert buttons
        },
        settings_modal: {
            layout: 'box',                 // box/bar
            // position: 'left',           // left/right
            transition: 'slide'            // zoom/slide
        }
    }
    //...
});

เพียงแค่นี้เราก็ได้ Cookie Consent สวยๆ สำหรับเว็บไซต์ของเราแล้ว 🎉

อ่านรายละเอียดเพิ่มเติม (Docs) - https://github.com/orestbida/cookieconsent

GitHub - orestbida/cookieconsent: Simple cross-browser cookie-consent plugin written in vanilla js
:cookie: Simple cross-browser cookie-consent plugin written in vanilla js - GitHub - orestbida/cookieconsent: Simple cross-browser cookie-consent plugin written in vanilla js

สำหรับรายละเอียดเรื่อง PDPA หรือ Cookie Consent แนะนำ อ่านเพิ่มเติม จาก Links ด้านล่างครับ ผมก็อ่านแล้วเอามาสรุปคร่าวๆ นี่แหละครับ ขอบคุณครับ

อะไรคือ Cookies consent ทำไมเจ้าของเว็บไซต์ต้องมี
เกี่ยวกับ การขอความยินยอมเพื่อจัดเก็บไฟล์คุกกี้และข้อมูลต่างๆ จากผู้ใช้งานเว็บไซต์
Cookie Consent คืออะไร? ทำไมทุกเว็บต้องมี แนะนำวิธีติดตั้งคุกกี้แบนเนอร์ ที่คุณทำได้ง่ายๆ
ทำความรู้จัก คุกกี้ คืออะไร และ Cookie Consent คืออะไร สิ่งที่เว็บไซต์ทุกเว็บไซต์ต้องมีเพื่อทำให้ถูกกฎหมาย พร้อมวิธีสร้างคุกกี้แบนเนอร์ง่ายๆ
PDPA คืออะไร
เรียนรู้ข้อมูลเพิ่มเติมเกี่ยวกับ พ.ร.บ. คุ้มครองข้อมูลส่วนบุคคล และผลกระทบต่อเว็บไซต์ของคุณมีอะไรบ้าง
PDPA พ.ร.บ.คุ้มครองข้อมูลส่วนบุคคล เรื่องใกล้ตัวที่ทุกคนต้องรู้
รู้จัก PDPA (Personal Data Protection Act) พ.ร.บ.คุ้มครองข้อมูลส่วนบุคคล PDPA คืออะไร ทำไมต้องรู้เอาไว้ ไปทำความเข้าใจพร้อมกัน

Tags

Chai Phonbopit

Frontend Dev ธรรมดาคนนึง ประสบการณ์ 10 ปีนิดๆ ปัจจุบันกำลังสนใจเรื่องของ Crypto, Web3, Blockchain และ Smart Contract กำลังหัดเรียนรู้ยามว่าง 👻