Devahoy Logo
PublishedAt

•

Web Development

ตัวอย่างการใช้ Cookie Consent เพื่อรองรับ PDPA แบบง่ายๆ

ตัวอย่างการใช้ Cookie Consent เพื่อรองรับ PDPA แบบง่ายๆ

#Web Development #HTML #JavaScript #React

Cookie Consent เป็น JavaScript Plugin ที่ทำให้เราทำ Cookie Consent แสดง Popup เพื่อขอความยินยอมจากผู้ใช้งานได้แบบง่ายๆ เลย ตัว Plugin เป็น Vanilla JavaScript นั่นหมายความว่า สามารถใช้ได้กับทุกๆ เว็บเลย เพียงแค่เพิ่ม script ลงไปในเว็บ

GitHub Cookie Consent บน Github

ตัว Cookie Consent ขั้นตอนการใช้คือ ตัว script จะอ่านค่า config พร้อม UI รวมถึงมี callback function กรณีที่ผู้ใช้งานกด ยินยอม หรือกดปฏิเสธ เราก็ไปใส่ business logic ใน function นั้นตามที่เราต้องการได้เลย

มาลองใช้งานกันดูครับ ตัวเว็บ Cookie Consent มีคำธิบาย การใช้งานอยู่แล้ว

รวมถึงมีหน้าตา Demo ให้เราไปกดเข้าดู ว่าอยากได้หน้าตาประมาณไหน อยากได้กล่องใหญ่ เล็ก ตำแหน่งไหน หรือปรับ Theme ก็ทำได้ เช่นกัน

Cookie Consent

1. แบบ HTML/CSS/JS ธรรมดา

เริ่มต้น สร้างไฟล์ html ขึ้นมาแบบธรรมดาๆ เลย index.html

index.html
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Easy Cookie Consent</title>
8
  </head>
9
  <body>
10
    <h1>This is example</h1>
11
    <p>
12
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore labore quas sit eveniet saepe
13
      repudiandae eligendi perspiciatis sequi earum, natus totam nemo odit, illum nesciunt optio
14
      temporibus nihil doloribus blanditiis.
15
    </p>
16
    <p>
17
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore labore quas sit eveniet saepe
18
      repudiandae eligendi perspiciatis sequi earum, natus totam nemo odit, illum nesciunt optio
19
      temporibus nihil doloribus blanditiis.
20
    </p>
21
    <p>
22
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore labore quas sit eveniet saepe
23
      repudiandae eligendi perspiciatis sequi earum, natus totam nemo odit, illum nesciunt optio
24
      temporibus nihil doloribus blanditiis.
25
    </p>
26
    <p>
27
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore labore quas sit eveniet saepe
28
      repudiandae eligendi perspiciatis sequi earum, natus totam nemo odit, illum nesciunt optio
29
      temporibus nihil doloribus blanditiis.
30
    </p>
31
    <p>
32
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore labore quas sit eveniet saepe
33
      repudiandae eligendi perspiciatis sequi earum, natus totam nemo odit, illum nesciunt optio
34
      temporibus nihil doloribus blanditiis.
35
    </p>
36
  </body>
37
</html>

เพิ่ม cookie consent script และ css ลงไป

1
<head>
2
  <link
3
    rel="stylesheet"
4
    href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.8.6/dist/cookieconsent.css"
5
  />
6
</head>

ส่วน script เพิ่มก่อนปิด body tag และเป็น defer รวมถึงไฟล์ custom js ที่เรากำลังจะสร้างชื่อ cc-init.js ด้วย

1
<body>
2
  <script
3
    defer
4
    src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.8.6/dist/cookieconsent.js"
5
  ></script>
6
  <script defer src="./cc-init.js"></script>
7
</body>

สร้างไฟล์ cc-init.js ขึ้นมา

cc-init.js
1
const config = {}
2


3
let cc = initCookieConsent()
4
cc.run(config)

สุดท้าย config ก็กำหนดค่าให้มัน แบบตัวอย่าง

1
const config = {
2
  current_lang: 'th',
3
  autorun: true,
4
  autoclear_cookies: true,
5
  languages: {
6
    en: {
7
      consent_modal: {
8
        title: 'We use cookies!',
9
        description:
10
          'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',
11
        primary_btn: {
12
          text: 'Accept all',
13
          role: 'accept_all' // 'accept_selected' or 'accept_all'
14
        },
15
        secondary_btn: {
16
          text: 'Reject all',
17
          role: 'accept_necessary' // 'settings' or 'accept_necessary'
18
        }
19
      },
20
      settings_modal: {
21
        title: 'Cookie preferences',
22
        save_settings_btn: 'Save settings',
23
        accept_all_btn: 'Accept all',
24
        reject_all_btn: 'Reject all',
25
        close_btn_label: 'Close',
26
        cookie_table_headers: [
27
          { col1: 'Name' },
28
          { col2: 'Domain' },
29
          { col3: 'Expiration' },
30
          { col4: 'Description' }
31
        ],
32
        blocks: [
33
          {
34
            title: 'Cookie usage 📢',
35
            description:
36
              'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#" class="cc-link">privacy policy</a>.'
37
          },
38
          {
39
            title: 'Strictly necessary cookies',
40
            description:
41
              'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',
42
            toggle: {
43
              value: 'necessary',
44
              enabled: true,
45
              readonly: true // cookie categories with readonly=true are all treated as "necessary cookies"
46
            }
47
          },
48
          {
49
            title: 'Performance and Analytics cookies',
50
            description:
51
              'These cookies allow the website to remember the choices you have made in the past',
52
            toggle: {
53
              value: 'analytics', // your cookie category
54
              enabled: false,
55
              readonly: false
56
            },
57
            cookie_table: [
58
              // list of all expected cookies
59
              {
60
                col1: '^_ga', // match all cookies starting with "_ga"
61
                col2: 'google.com',
62
                col3: '2 years',
63
                col4: 'description ...',
64
                is_regex: true
65
              },
66
              {
67
                col1: '_gid',
68
                col2: 'google.com',
69
                col3: '1 day',
70
                col4: 'description ...'
71
              }
72
            ]
73
          },
74
          {
75
            title: 'Advertisement and Targeting cookies',
76
            description:
77
              'These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you',
78
            toggle: {
79
              value: 'targeting',
80
              enabled: false,
81
              readonly: false
82
            }
83
          },
84
          {
85
            title: 'More information',
86
            description:
87
              'For any queries in relation to our policy on cookies and your choices, please <a class="cc-link" href="#yourcontactpage">contact us</a>.'
88
          }
89
        ]
90
      }
91
    }
92
  }
93
}

ทดสอบเปิดเว็บขึ้นมา เราจะเห็น Cookie Consent ขึ้นมาที่หน้าเว็บของเราแล้ว

HTML Cookie Consent

กรณีต้องการปรับแต่งหน้าตา อยากได้แบบ กล่อง อยากได้แบบใหญ่ๆ ก็ปรับจาก gui_options ใน config ได้เลย

1
cookieconsent.run({
2
  // ...
3
  gui_options: {
4
    consent_modal: {
5
      layout: 'cloud', // box/cloud/bar
6
      position: 'bottom center', // bottom/middle/top + left/right/center
7
      transition: 'slide', // zoom/slide
8
      swap_buttons: false // enable to invert buttons
9
    },
10
    settings_modal: {
11
      layout: 'box', // box/bar
12
      // position: 'left',           // left/right
13
      transition: 'slide' // zoom/slide
14
    }
15
  }
16
  //...
17
})

สุดท้าย การเปลี่ยน Theme ก็แค่ไปโหลด css จากหน้า Demo ของ Cookie Consent มาครับ แล้วเพิ่ม stylesheet ลงไป ส่วน index.html ก็เพิ่ม class ให้ body ที่เราต้องการ เช่น theme theme_turquoise

1
<body class="theme_turquoise">
2
  ...
3
</body>

HTML Cookie Consent

ลองดูไฟล์ Config ว่าเราสามารถทำอะไรได้บ้าง? ลองปรับ เพิ่มลดดูได้นะครับ

2. แบบใช้ React.js

สำหรับวิธีนี้ จำเป็นต้องมี Node.js บนเครื่องก่อน และสามารถใช้งาน Command Line / Terminal เพื่อพิมพ์คำสั่งได้

Create Project

โดยขั้นตอนนี้ผมจะยกตัวอย่าง ด้วยการใช้ Vite ขึ้นโปรเจ็ค เริ่มต้น ก็สร้างโปรเจ็คด้วยคำสั่ง

Terminal window
npm create vite@latest

ทำการตั้งชื่อ เลือก React และ JavaScript

Terminal window
✔ Project name: … easy-cc-react
✔ Select a framework: › React
✔ Select a variant: › JavaScript

เปิดโปรเจ็คขึ้นมา ทำการ install แล้วลองทดสอบรัน เพื่อให้เห็นหน้าเว็บก่อน http://127.0.0.1:5174/

Terminal window
npm install
npm run dev

ต่อมา ทำการ install cookie consent

1
npm i vanilla-cookieconsent

หลังจากติดตั้ง เราจะทำการสร้าง Component ขึ้นมา เพื่อเอาไว้โหลด Cookie Consent ใน useEffect() ตัวอย่างผมใช้ชื่อว่า CookieConsent.jsx ในโฟลเดอร์ components (สร้างใหม่)

1
import { useEffect } from 'react'
2


3
import 'vanilla-cookieconsent/dist/cookieconsent.js'
4
import 'vanilla-cookieconsent/dist/cookieconsent.css'
5


6
const config = {}
7


8
export default function CookieConsent() {
9
  useEffect(() => {
10
    const cc = window.initCookieConsent()
11
    cc.run(config)
12
  }, [])
13


14
  return null
15
}

ส่วนไฟล์ config ก็คือ config แบบเดียวกันกับที่ใช้ HTML ธรรมดาเลย ก็อปมาแปะใส่ได้เลยครับ

สุดท้าย นำ Component ที่เราสร้างใหม่ ไปใส่ไว้ในหน้า App.jsx

App.jsx
1
import CookieConsent from './components/CookieConsent'
2


3
function App() {
4
  const [count, setCount] = useState(0)
5


6
  return (
7
    <div className="App">
8
      <CookieConsent />
9
      ...
10
      ... โค๊ดอื่นๆ
11
  )
12
}

ทดสอบดูว่า เราจะมีหน้าเว็บ ที่มี Cookie Consent ขึ้นแล้ว

React Cookie Consent

ทีนี้อยากเปลี่ยน Theme ก็ทำเหมือน HTML ปกติเลยครับ เพิ่ม CSS และเพิ่ม class ไปที่ body ในไฟล์ index.html

index.html
1
<body class="theme_turquoise">
2
  <div id="root"></div>
3
  <script type="module" src="/src/main.jsx"></script>
4
</body>

เป็นอันเรียบร้อย

React Cookie Consent

นอกจากนี้ เราก็ยังใส่ custom attribute เพื่อให้ Cookie Consent มันทำงานได้ เช่น ให้เปิด Setting, ให้ Accept ตัวอย่าง แก้ไข CookieConsent.jsx ให้มีปุ่ม เมื่อกด ให้เปิด Setting ขึ้นมา ก็ใช้ง่ายๆ แบบนี้เลย

CookieConsent.jsx
1
export default function CookieConsent() {
2
  useEffect(() => {
3
    const cc = window.initCookieConsent()
4
    cc.run(config)
5
  }, [])
6


7
  return (
8
    <button type="button" data-cc="c-settings">
9
      Show cookie settings
10
    </button>
11
  )
12
}

ลองไปเล่นกันดูได้นะครับ ลองปรับแต่งจาก Demo เลือกหน้าตาที่ชอบ ดูว่า Config มันทำอะไรได้บ้าง และปรับใช้ตามความต้องการของเราได้เลย หวังว่าบทความนี้จะเป็นประโยชน์นะครับ สุดท้าย Source Code ใน Repo ด้านล่างเลย

GitHub Source Code

Happy Coding ❤️

Authors
avatar

Chai Phonbopit

เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust

Related Posts

อัพเดทเว็บอีกแล้ว v6.0 จาก Gatsby มา Next.js

Web Development

อัพเดทเว็บอีกแล้ว v6.0 จาก Gatsby มา Next.js

PublishedAt
แชร์วิธีการเพิ่ม Giscus Comment System ให้กับ Static Website

Web Development

แชร์วิธีการเพิ่ม Giscus Comment System ให้กับ Static Website

PublishedAt
ว่าด้วยเรื่อง Caching ของ Cloudflare

Web Development

ว่าด้วยเรื่อง Caching ของ Cloudflare

PublishedAt