trusty — Website Trust Platform
Cookies & Consent

วิธีวางระบบ Cookie Consent Banner สำหรับเอเจนซีและฟรีแลนซ์ทำเว็บไซต์แบบเป็นขั้นตอน

คู่มือทีละขั้นสำหรับเอเจนซีและฟรีแลนซ์ที่ต้องติดตั้ง Cookie Consent Banner ให้ลูกค้าหลายรายพร้อมกัน โดยไม่ต้องออกแบบระบบใหม่ทุกครั้งที่รับงาน

📅 เผยแพร่ 24 กรกฎาคม 2569อัปเดตล่าสุด 24 กรกฎาคม 2569✍️ เขียนโดย trusty Editorial Team⏱ อ่าน 8 นาที
Smiling couple baking cookies together in a cozy kitchen using a laptop for recipe checking.
ภาพโดย Andy Barbour จาก Pexels

💬 สรุปสั้น ๆ

การวางระบบ Cookie Consent Banner สำหรับงานเอเจนซีเริ่มจากสำรวจสคริปต์บุคคลที่สามทั้งหมดของเว็บไซต์ลูกค้า ออกแบบข้อความและตัวเลือกให้ชัดเจนว่ายอมรับหรือปฏิเสธได้เท่าเทียมกัน ผูกการโหลดสคริปต์แต่ละหมวดกับความยินยอมแบบมีเงื่อนไข ทดสอบค่าเริ่มต้นและการคงสภาพก่อนส่งมอบ แล้วเตรียมเอกสารอธิบายให้ลูกค้าดูแลต่อได้เอง เอเจนซีที่มีขั้นตอนมาตรฐานทำซ้ำได้จะประหยัดเวลากว่าการออกแบบใหม่ทุกโปรเจกต์

สารบัญ

ลูกค้ารายใหม่ของเอเจนซีเพิ่งเซ็นสัญญาให้ทำเว็บไซต์บริษัทใหม่ทั้งหมด บรีฟเดิมเน้นแค่ดีไซน์และฟีเจอร์หลัก แต่พอใกล้ deadline ลูกค้าถึงนึกขึ้นได้ว่าต้องมี Cookie Consent Banner ด้วย เพราะเว็บไซต์เก่าเคยถูกทักท้วงจากคู่ค้าว่าไม่มีระบบขอความยินยอมที่ถูกต้อง ทีม Developer ของเอเจนซีที่เคยติดปุ่ม "รับทราบ" ธรรมดาให้ลูกค้าหลายรายมาก่อน ต้องตัดสินใจว่าจะยกระดับให้เป็นแบนเนอร์ที่แยกยอมรับ-ปฏิเสธได้จริงอย่างไรภายในเวลาที่จำกัด

บทความนี้เป็นคู่มือวางระบบ Cookie Consent Banner แบบเป็นขั้นตอนสำหรับเอเจนซีและฟรีแลนซ์ที่ต้องทำงานลักษณะนี้ซ้ำ ๆ กับลูกค้าหลายราย ตั้งแต่การสำรวจสคริปต์ ออกแบบข้อความ ผูกการโหลดสคริปต์ ไปจนถึงทดสอบและเตรียมเอกสารส่งมอบ

ขั้นตอนในบทความนี้เป็นแนวทางเชิงเทคนิคเพื่อวางระบบให้พร้อมเก็บหลักฐานการยินยอม ไม่ใช่การรับรองว่าเว็บไซต์ที่ทำตามขั้นตอนนี้จะสอดคล้องกับกฎหมายโดยอัตโนมัติ ควรตรวจสอบข้อกำหนดที่เป็นทางการกับสำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล (PDPC) หรือที่ปรึกษากฎหมายของลูกค้าประกอบด้วย

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

อีกเหตุผลคือเว็บไซต์ของลูกค้าเอเจนซีมักมีสคริปต์บุคคลที่สามคล้ายกันในหมวดกว้าง การมีขั้นตอนมาตรฐานที่ทำซ้ำได้ช่วยให้ทีมโฟกัสไปที่การสำรวจสคริปต์จริงของลูกค้าแต่ละรายซึ่งเป็นจุดที่ต่างกันจริง แทนที่จะถกเถียงเรื่องโครงสร้างแบนเนอร์ใหม่ทุกครั้ง และช่วยให้ทีมที่รับช่วงดูแลต่อไม่ต้องไล่อ่าน code ใหม่ทั้งหมด

เรียงตามลำดับที่ทำจริงในโปรเจกต์เอเจนซี สำหรับเว็บไซต์ทั่วไปที่ไม่ซับซ้อนใช้เวลารวมประมาณสามถึงห้าวันทำการ

ขั้นที่ 1: สำรวจสคริปต์บุคคลที่สามทั้งหมดของเว็บไซต์ลูกค้า

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

ขั้นที่ 2: จัดกลุ่มสคริปต์เป็นหมวดคุกกี้และออกแบบข้อความแบนเนอร์

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

ขั้นที่ 3: ผูกการโหลดสคริปต์แต่ละหมวดกับความยินยอมแบบมีเงื่อนไข

เขียนโค้ดให้สคริปต์ในหมวดที่ไม่จำเป็นโหลดก็ต่อเมื่อผู้ใช้งานกดยอมรับหมวดนั้นแล้วเท่านั้น ทดสอบด้วยการโหลดหน้าเว็บแบบยังไม่กดอะไรเลยแล้วตรวจ network tab ว่าไม่มี request ไปยังโดเมนของหมวดที่ไม่จำเป็น จุดนี้คือจุดที่พลาดบ่อยที่สุดในงานเร่งด่วน เพราะทีมมักโฟกัสที่หน้าตาแบนเนอร์จนลืมตรวจพฤติกรรมจริงของสคริปต์เบื้องหลัง

ขั้นที่ 4: เพิ่มช่องทางให้ผู้ใช้งานเปลี่ยนใจภายหลัง

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

ขั้นที่ 5: ทดสอบค่าเริ่มต้นและการคงสภาพก่อนส่งมอบ

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

ขั้นที่ 6: เตรียมเอกสารส่งมอบให้ลูกค้าดูแลต่อได้เอง

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

คำถามที่ควรตอบให้ได้ก่อนเริ่มออกแบบ

ก่อนลงมือเขียนโค้ดจริง ทีมควรตอบคำถามเหล่านี้ให้ได้ก่อน เว็บไซต์นี้มีกี่โดเมนและ subdomain ที่ต้องแสดงแบนเนอร์ ลูกค้าใช้ CMP สำเร็จรูปอยู่แล้วหรือจะให้เอเจนซีพัฒนาเอง และทีมฝั่งลูกค้ามีคนดูแลต่อหลังส่งมอบหรือไม่ คำตอบเหล่านี้กำหนดว่าควรเลือกใช้เครื่องมือสำเร็จรูปที่ตั้งค่าผ่านหน้าจอ Admin หรือพัฒนาระบบเองที่ยืดหยุ่นกว่าแต่ต้องมีทีมเทคนิคดูแลต่อเนื่อง

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

การทดสอบก่อนส่งมอบให้ลูกค้า

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

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

พร้อมตรวจสอบความน่าเชื่อถือของเว็บไซต์คุณหรือยัง?

ทดลองใช้งาน trusty ฟรี ไม่ต้องใช้บัตรเครดิต เริ่มสแกนได้ทันที

ทดลองใช้งานระบบฟรี

สถานการณ์ตัวอย่างจริง

กรณีที่หนึ่ง — ปุ่มยอมรับเด่นกว่าปุ่มปฏิเสธจนต้องแก้ก่อนส่งมอบ: ทีมออกแบบของเอเจนซีทำปุ่ม "ยอมรับทั้งหมด" เป็นสีเด่นตามธีมหลักของเว็บไซต์ ขณะที่ปุ่มปฏิเสธเป็นตัวอักษรสีเทาเล็ก ๆ ระหว่างตรวจตามขั้นที่ 2 ทีม Developer ที่รับผิดชอบด้าน consent สังเกตเห็นความไม่เท่าเทียมนี้และเสนอให้แก้ก่อนส่งมอบ เพราะถ้าปฏิเสธยากกว่ายอมรับอย่างเห็นได้ชัด ถือว่าไม่ใช่ความยินยอมที่เกิดจากความสมัครใจอย่างแท้จริง

กรณีที่สอง — สคริปต์โฆษณาโหลดก่อนแบนเนอร์ทำงาน: เว็บไซต์ของลูกค้าอีคอมเมิร์ซรายหนึ่งใช้สคริปต์รีมาร์เก็ตติ้งที่ฝังไว้ในส่วนหัวของหน้าเว็บมาตั้งแต่เทมเพลตเดิม เมื่อเอเจนซีติดตั้งแบนเนอร์ใหม่แล้วทดสอบตามขั้นที่ 3 พบว่าสคริปต์นี้ยังยิง request ออกไปก่อนผู้ใช้งานกดปุ่มใด ๆ เพราะไม่ได้ถูกย้ายเข้าไปอยู่ในระบบโหลดแบบมีเงื่อนไข ทีมจึงต้องย้ายโค้ดสคริปต์เดิมทั้งหมดเข้าระบบใหม่ก่อนส่งมอบจริง

กรณีที่สาม — ลูกค้าขอให้แบนเนอร์เด้งขึ้นทุกครั้งที่เข้าเว็บ: ลูกค้ารายหนึ่งขอให้แบนเนอร์แสดงทุกครั้งที่ผู้ใช้งานเข้าเว็บไซต์ เพราะเข้าใจผิดว่าจะช่วยให้ดู "โปร่งใส" มากกว่า ทีมเอเจนซีอธิบายว่าการคงสภาพค่าที่เลือกไว้ต่างหากที่เป็นแนวทางที่ถูกต้อง เพราะการให้แบนเนอร์เด้งซ้ำทุกครั้งจะรบกวนผู้ใช้งานและไม่มีประโยชน์เพิ่มเติมด้านหลักฐาน ลูกค้าจึงเข้าใจและยอมรับแนวทางมาตรฐาน

ดูแลระบบหลังส่งมอบ ไม่ใช่แค่ปิดโปรเจกต์

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

สำหรับทีมที่รับงานหลายโปรเจกต์พร้อมกัน การจดบันทึกการตัดสินใจสำคัญระหว่างขั้นตอนวางระบบไว้ในเอกสารโปรเจกต์ เช่น เหตุผลที่จัดสคริปต์ตัวหนึ่งไว้ในหมวดใดหมวดหนึ่ง จะช่วยประหยัดเวลามากเมื่อต้องกลับมาแก้ไขหรือ Audit ในอนาคต โดยไม่ต้องพึ่งความจำของคนที่เขียนโค้ดไว้ตั้งแต่แรก

สรุป

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

ข้อผิดพลาดที่พบบ่อย

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

แหล่งข้อมูลอ้างอิง

แนวปฏิบัติเกี่ยวกับการขอความยินยอมและการจัดการคุกกี้ควรอ้างอิงจาก สำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล (PDPC) โดยตรง บทความนี้อธิบายขั้นตอนเชิงเทคนิคสำหรับงานเอเจนซี ไม่ได้ตีความข้อกฎหมายแทนหน่วยงานกำกับดูแล

คำถามที่พบบ่อย

ควรใช้เทมเพลตแบนเนอร์เดียวกับลูกค้าทุกรายหรือออกแบบใหม่ทุกครั้ง

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

ปุ่มยอมรับกับปฏิเสธต้องมีขนาดเท่ากันเป๊ะหรือไม่

ไม่จำเป็นต้องเหมือนกันเป๊ะ แต่ต้องมีความชัดเจนและเข้าถึงง่ายในระดับเดียวกัน ไม่ใช่ทำปุ่มปฏิเสธให้เป็นตัวอักษรเล็กจนสังเกตยาก หรือซ่อนไว้หลายคลิกกว่าจะเจอ เพราะจะทำให้ความยินยอมที่ได้ไม่ถือเป็นการเลือกโดยสมัครใจอย่างแท้จริง

ทำไมต้องทดสอบสคริปต์เดิมที่มีอยู่แล้วในเว็บไซต์ลูกค้าด้วย

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

ถ้าลูกค้าเพิ่มปลั๊กอินใหม่หลังส่งมอบงาน เอเจนซีต้องรับผิดชอบไหม

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

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

พร้อมตรวจสอบความน่าเชื่อถือของเว็บไซต์คุณหรือยัง?

ทดลองใช้งาน trusty ฟรี ไม่ต้องใช้บัตรเครดิต เริ่มสแกนได้ทันที