Hướng dẫn tích hợp CMP: Shopify, WordPress, Wix và các trang web tùy chỉnh
Câu hỏi số một chúng tôi nghe từ người dùng mới: "Làm thế nào để cài đặt FlexyConsent trên trang web của tôi?" Câu trả lời giống nhau dù bạn dùng nền tảng nào — dán một dòng JavaScript trước thẻ đóng head. Tuy nhiên, các bước cụ thể có khác nhau đôi chút đối với Shopify, WordPress, Wix, Squarespace và các trang web tự xây dựng. Hướng dẫn này bao gồm tất cả.
Cách tiếp cận chung
FlexyConsent hoạt động với một thẻ script duy nhất. Không cần plugin, không cần SDK, không cần cấu hình phía máy chủ. Mọi nền tảng cho phép HTML tùy chỉnh trong phần head đều hỗ trợ FlexyConsent. Script có dung lượng dưới 50KB và tải không đồng bộ, nghĩa là không ảnh hưởng đến tốc độ trang của bạn.
Script:<script src="https://flexyconsent.com/d/c/c/4/your-site-id.js"></script>
Bạn nhận được script duy nhất của mình từ bảng điều khiển FlexyConsent sau khi tạo tài khoản.
Shopify
- Bước 1: Vào Cửa hàng trực tuyến > Giao diện > Chỉnh sửa mã
- Bước 2: Mở theme.liquid
- Bước 3: Dán script FlexyConsent ngay trước </head>
- Bước 4: Lưu — banner đồng ý của bạn đã hoạt động trên tất cả các trang
Không cần ứng dụng Shopify. Hoạt động với tất cả các giao diện bao gồm Dawn, Debut và các giao diện tùy chỉnh.
WordPress
- Tùy chọn A (không plugin): Giao diện > Trình chỉnh sửa giao diện > header.php > dán trước </head>
- Tùy chọn B (dùng plugin): Cài đặt bất kỳ plugin "Insert Headers" nào > dán script vào phần Head
- Tùy chọn C (functions.php): Thêm hook hành động wp_head để xuất thẻ script
Tương thích với tất cả các giao diện chính (Astra, GeneratePress, Divi, Elementor) và các trình xây dựng trang. Không xung đột với plugin bộ nhớ đệm — script tải độc lập.
Wix
- Bước 1: Vào Cài đặt > Mã tùy chỉnh
- Bước 2: Nhấp "Thêm mã tùy chỉnh"
- Bước 3: Dán script FlexyConsent
- Bước 4: Đặt vị trí là "Head" và áp dụng cho "Tất cả các trang"
Hoạt động trên tất cả các gói Wix hỗ trợ mã tùy chỉnh (gói Business trở lên).
Squarespace
- Bước 1: Vào Cài đặt > Nâng cao > Chèn mã
- Bước 2: Dán script vào phần Header
- Bước 3: Lưu — banner đồng ý xuất hiện trên tất cả các trang
HTML tùy chỉnh / Trang tĩnh
- Bước 1: Mở mẫu HTML hoặc tệp bố cục của bạn
- Bước 2: Dán script trước </head>
- Bước 3: Triển khai — chỉ vậy thôi
Hoạt động với bất kỳ trình tạo trang tĩnh nào (Next.js, Gatsby, Hugo, Jekyll, Astro), bất kỳ framework nào (React, Vue, Angular) và bất kỳ nhà cung cấp hosting nào.
Google Tag Manager
- Bước 1: Tạo thẻ HTML tùy chỉnh mới
- Bước 2: Dán script FlexyConsent
- Bước 3: Đặt trigger là "Tất cả các trang — Xem trang"
- Bước 4: Đặt mức độ ưu tiên để kích hoạt trước các thẻ khác
Khi sử dụng GTM, FlexyConsent tự động tích hợp với Google Consent Mode V2 — không cần cấu hình thêm.
Sau khi cài đặt: Những gì cần xác minh
- Banner xuất hiện — truy cập trang web của bạn trong cửa sổ ẩn danh
- Consent Mode kích hoạt — kiểm tra Google Tag Assistant để xem trạng thái đồng ý
- TC String được tạo ra — xác minh trong bảng điều khiển trình duyệt bằng __tcfapi
- Analytics vẫn hoạt động — xác nhận dữ liệu chạy sau khi chấp nhận đồng ý
- Thiết bị di động hoạt động — thử nghiệm trên thiết bị di động thực tế
Các vấn đề thường gặp và cách khắc phục
- Banner không hiển thị? Kiểm tra xem script có nằm trong <head>, không phải <body>. Xóa bộ nhớ đệm trình duyệt.
- Banner hiển thị mỗi lần truy cập? Đảm bảo cookie không bị chặn bởi trình duyệt hoặc tiện ích mở rộng bảo mật.
- Quảng cáo Google không theo dõi? Đảm bảo script FlexyConsent tải trước các thẻ Google của bạn.