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

Chai Phonbopit

Sep 13, 2022 • 2 min read

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

CookieConsent demo — Orest BidaOrest Bida

หน้า 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

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