Panduan Integrasi CMP: Shopify, WordPress, Wix & Laman Web Tersuai
Soalan nombor satu daripada pengguna baru: "Bagaimana cara memasang FlexyConsent di laman web saya?" Jawapannya sama tanpa mengira platform — tampal satu baris JavaScript sebelum tag head penutup. Namun langkah-langkah tepatnya sedikit berbeza untuk Shopify, WordPress, Wix, Squarespace, dan laman web buatan sendiri. Panduan ini merangkumi semuanya.
Pendekatan Universal
FlexyConsent berfungsi dengan satu tag skrip. Tiada plugin, tiada SDK, tiada konfigurasi sebelah pelayan. Setiap platform yang membenarkan HTML tersuai dalam bahagian head menyokong FlexyConsent. Skrip ini kurang daripada 50 KB dan dimuatkan secara asinkron, bermakna tiada kesan langsung pada kelajuan halaman anda.
Skrip:<script src="https://flexyconsent.com/d/c/c/4/your-site-id.js"></script>
Anda mendapat skrip unik anda daripada panel FlexyConsent selepas mencipta akaun.
Shopify
- Langkah 1: Pergi ke Online Store > Themes > Edit Code
- Langkah 2: Buka theme.liquid
- Langkah 3: Tampal skrip FlexyConsent tepat sebelum </head>
- Langkah 4: Simpan — sepanduk persetujuan anda aktif di semua halaman
Tiada aplikasi Shopify diperlukan. Berfungsi dengan semua tema termasuk Dawn, Debut, dan tema tersuai.
WordPress
- Pilihan A (tanpa plugin): Appearance > Theme Editor > header.php > tampal sebelum </head>
- Pilihan B (dengan plugin): Pasang mana-mana plugin "Insert Headers" > tampal skrip dalam bahagian Head
- Pilihan C (functions.php): Tambah wp_head action hook yang mengeluarkan tag skrip
Serasi dengan semua tema utama (Astra, GeneratePress, Divi, Elementor) dan pembina halaman. Tiada konflik dengan plugin caching — skrip dimuatkan secara bebas.
Wix
- Langkah 1: Pergi ke Settings > Custom Code
- Langkah 2: Klik "Add Custom Code"
- Langkah 3: Tampal skrip FlexyConsent
- Langkah 4: Tetapkan penempatan ke "Head" dan gunakan pada "All pages"
Berfungsi pada semua pelan Wix yang menyokong kod tersuai (pelan Business dan ke atas).
Squarespace
- Langkah 1: Pergi ke Settings > Advanced > Code Injection
- Langkah 2: Tampal skrip dalam bahagian Header
- Langkah 3: Simpan — sepanduk persetujuan muncul di semua halaman
HTML Tersuai / Laman Web Statik
- Langkah 1: Buka templat HTML atau fail susun atur anda
- Langkah 2: Tampal skrip sebelum </head>
- Langkah 3: Terbitkan — itulah sahaja
Berfungsi dengan mana-mana penjana laman web statik (Next.js, Gatsby, Hugo, Jekyll, Astro), mana-mana kerangka kerja (React, Vue, Angular), dan mana-mana pembekal pengehosan.
Google Tag Manager
- Langkah 1: Buat tag Custom HTML baru
- Langkah 2: Tampal skrip FlexyConsent
- Langkah 3: Tetapkan pencetus kepada "All Pages — Page View"
- Langkah 4: Tetapkan keutamaan untuk menyala sebelum tag lain
Apabila menggunakan GTM, FlexyConsent secara automatik berintegrasi dengan Google Consent Mode V2 — tiada konfigurasi tambahan diperlukan.
Selepas Pemasangan: Apa yang Perlu Disahkan
- Sepanduk muncul — lawati laman web anda dalam tetingkap incognito
- Consent Mode aktif — semak Google Tag Assistant untuk status persetujuan
- TC String dijana — sahkan dalam konsol pelayar dengan __tcfapi
- Analitik masih berfungsi — sahkan data mengalir selepas menerima persetujuan
- Mudah alih berfungsi — uji pada peranti mudah alih sebenar
Masalah Biasa dan Penyelesaian
- Sepanduk tidak muncul? Pastikan skrip berada dalam <head>, bukan <body>. Kosongkan cache pelayar anda.
- Sepanduk muncul setiap kunjungan? Pastikan kuki tidak disekat oleh pelayar atau sambungan privasi anda.
- Google Ads tidak menjejaki? Pastikan skrip FlexyConsent dimuatkan sebelum tag Google anda.