คู่มือการรวม CMP: Shopify, WordPress, Wix และเว็บไซต์แบบกำหนดเอง
คำถามอันดับหนึ่งที่เราได้ยินจากผู้ใช้ใหม่: "ฉันจะติดตั้ง FlexyConsent บนเว็บไซต์ของฉันได้อย่างไร?" คำตอบเหมือนกันโดยไม่คำนึงถึงแพลตฟอร์ม — วาง JavaScript หนึ่งบรรทัดก่อนแท็กปิด head แต่ขั้นตอนที่แน่นอนจะแตกต่างกันเล็กน้อยสำหรับ Shopify, WordPress, Wix, Squarespace และเว็บไซต์ที่สร้างเอง คู่มือนี้ครอบคลุมทั้งหมด
แนวทางสากล
FlexyConsent ทำงานด้วยแท็กสคริปต์เดียว ไม่มีปลั๊กอิน ไม่มี SDK ไม่มีการกำหนดค่าฝั่งเซิร์ฟเวอร์ ทุกแพลตฟอร์มที่อนุญาต HTML ที่กำหนดเองในส่วน head รองรับ FlexyConsent สคริปต์มีขนาดต่ำกว่า 50KB และโหลดแบบ asynchronous ซึ่งหมายความว่าไม่มีผลกระทบต่อความเร็วหน้าเว็บของคุณ
สคริปต์:<script src="https://flexyconsent.com/d/c/c/4/your-site-id.js"></script>
คุณจะได้รับสคริปต์เฉพาะของคุณจากแผงควบคุม FlexyConsent หลังจากสร้างบัญชี
Shopify
- ขั้นตอนที่ 1: ไปที่ Online Store > Themes > Edit Code
- ขั้นตอนที่ 2: เปิด theme.liquid
- ขั้นตอนที่ 3: วางสคริปต์ FlexyConsent ก่อน </head>
- ขั้นตอนที่ 4: บันทึก — แบนเนอร์ความยินยอมของคุณพร้อมใช้งานในทุกหน้า
ไม่จำเป็นต้องใช้แอป Shopify ใด ๆ ใช้งานได้กับทุกธีมรวมถึง Dawn, Debut และธีมที่กำหนดเอง
WordPress
- ตัวเลือก A (ไม่มีปลั๊กอิน): Appearance > Theme Editor > header.php > วางก่อน </head>
- ตัวเลือก B (มีปลั๊กอิน): ติดตั้งปลั๊กอิน "Insert Headers" ใด ๆ > วางสคริปต์ในส่วน Head
- ตัวเลือก C (functions.php): เพิ่ม action hook wp_head ที่แสดงแท็กสคริปต์
เข้ากันได้กับธีมหลักทั้งหมด (Astra, GeneratePress, Divi, Elementor) และตัวสร้างหน้า ไม่มีความขัดแย้งกับปลั๊กอิน caching — สคริปต์โหลดอย่างอิสระ
Wix
- ขั้นตอนที่ 1: ไปที่ Settings > Custom Code
- ขั้นตอนที่ 2: คลิก "Add Custom Code"
- ขั้นตอนที่ 3: วางสคริปต์ FlexyConsent
- ขั้นตอนที่ 4: ตั้งค่าตำแหน่งเป็น "Head" และใช้กับ "All pages"
ใช้งานได้กับแผน Wix ทั้งหมดที่รองรับโค้ดที่กำหนดเอง (แผน Business ขึ้นไป)
Squarespace
- ขั้นตอนที่ 1: ไปที่ Settings > Advanced > Code Injection
- ขั้นตอนที่ 2: วางสคริปต์ในส่วน Header
- ขั้นตอนที่ 3: บันทึก — แบนเนอร์ความยินยอมจะปรากฏในทุกหน้า
HTML ที่กำหนดเอง / เว็บไซต์แบบ Static
- ขั้นตอนที่ 1: เปิดเทมเพลต HTML หรือไฟล์เลย์เอาต์ของคุณ
- ขั้นตอนที่ 2: วางสคริปต์ก่อน </head>
- ขั้นตอนที่ 3: ดีพลอย — นั่นคือทุกอย่างจริง ๆ
ใช้งานได้กับ static site generator ใด ๆ (Next.js, Gatsby, Hugo, Jekyll, Astro) framework ใด ๆ (React, Vue, Angular) และผู้ให้บริการ hosting ใด ๆ
Google Tag Manager
- ขั้นตอนที่ 1: สร้างแท็ก Custom HTML ใหม่
- ขั้นตอนที่ 2: วางสคริปต์ FlexyConsent
- ขั้นตอนที่ 3: ตั้งค่า trigger เป็น "All Pages — Page View"
- ขั้นตอนที่ 4: ตั้งค่าลำดับความสำคัญให้ทำงานก่อนแท็กอื่น
เมื่อใช้ GTM, FlexyConsent จะรวมเข้ากับ Google Consent Mode V2 โดยอัตโนมัติ — ไม่จำเป็นต้องกำหนดค่าเพิ่มเติม
หลังการติดตั้ง: สิ่งที่ต้องตรวจสอบ
- แบนเนอร์ปรากฏ — เยี่ยมชมเว็บไซต์ของคุณในหน้าต่าง incognito
- Consent Mode ทำงาน — ตรวจสอบ Google Tag Assistant สำหรับสถานะความยินยอม
- TC String ถูกสร้าง — ตรวจสอบในคอนโซลเบราว์เซอร์ด้วย __tcfapi
- Analytics ยังคงทำงาน — ยืนยันการไหลของข้อมูลหลังจากยอมรับความยินยอม
- มือถือทำงาน — ทดสอบบนอุปกรณ์มือถือจริง
ปัญหาทั่วไปและวิธีแก้ไข
- แบนเนอร์ไม่แสดง? ตรวจสอบว่าสคริปต์อยู่ใน <head> ไม่ใช่ <body> ล้างแคชเบราว์เซอร์ของคุณ
- แบนเนอร์แสดงทุกครั้งที่เยี่ยมชม? ตรวจสอบให้แน่ใจว่าคุกกี้ไม่ถูกบล็อกโดยเบราว์เซอร์หรือส่วนขยายความเป็นส่วนตัว
- Google Ads ไม่ติดตาม? ตรวจสอบให้แน่ใจว่าสคริปต์ FlexyConsent โหลดก่อนแท็ก Google ของคุณ