Panduan Integrasi CMP: Shopify, WordPress, Wix & Situs Kustom
Pertanyaan nomor satu dari pengguna baru: 'Bagaimana cara menginstal FlexyConsent di situs saya?' Jawabannya sama terlepas dari platform — tempelkan satu baris JavaScript di bagian paling atas bagian head. Namun langkah-langkah pastinya sedikit berbeda untuk Shopify, WordPress, Wix, Squarespace, dan situs buatan sendiri. Panduan ini mencakup semuanya.
Pendekatan Universal
FlexyConsent bekerja dengan satu tag skrip. Tidak ada plugin, tidak ada SDK, tidak ada konfigurasi sisi server. Setiap platform yang mengizinkan HTML kustom di bagian head mendukung FlexyConsent. Skrip ini dimuat secara sinkron sebagai skrip pertama di <head>, sehingga dapat memblokir pelacak sebelum berjalan.
Skrip:<script src="https://flexyconsent.com/d/c/c/4/your-site-id.js"></script>
Anda mendapatkan skrip unik Anda dari panel FlexyConsent setelah membuat akun.
Shopify
- Langkah 1: Buka Online Store > Themes > Edit Code
- Langkah 2: Buka theme.liquid
- Langkah 3: Tempelkan skrip FlexyConsent di bagian paling atas <head>
- Langkah 4: Simpan — banner persetujuan Anda aktif di semua halaman
Tidak perlu aplikasi Shopify. Bekerja dengan semua tema termasuk Dawn, Debut, dan tema kustom.
WordPress
- Opsi A (tanpa plugin): Appearance > Theme Editor > header.php > tempelkan di bagian paling atas <head>
- Opsi B (dengan plugin): Instal plugin "Insert Headers" apa pun > tempelkan skrip di bagian Head
- Opsi C (functions.php): Tambahkan wp_head action hook yang menampilkan tag skrip
Kompatibel dengan semua tema utama (Astra, GeneratePress, Divi, Elementor) dan page builder. Tidak ada konflik dengan plugin caching — skrip dimuat secara mandiri.
Wix
- Langkah 1: Buka Settings > Custom Code
- Langkah 2: Klik "Add Custom Code"
- Langkah 3: Tempelkan skrip FlexyConsent
- Langkah 4: Atur penempatan ke "Head" dan terapkan ke "All pages"
Bekerja di semua paket Wix yang mendukung kode kustom (paket Business ke atas).
Squarespace
- Langkah 1: Buka Settings > Advanced > Code Injection
- Langkah 2: Tempelkan skrip di bagian Header
- Langkah 3: Simpan — banner persetujuan muncul di semua halaman
HTML Kustom / Situs Statis
- Langkah 1: Buka template HTML atau file tata letak Anda
- Langkah 2: Tempelkan skrip di bagian paling atas <head>
- Langkah 3: Deploy — itulah saja
Bekerja dengan generator situs statis apa pun (Next.js, Gatsby, Hugo, Jekyll, Astro), framework apa pun (React, Vue, Angular), dan penyedia hosting apa pun.
Google Tag Manager
- Langkah 1: Buat tag Custom HTML baru
- Langkah 2: Tempelkan skrip FlexyConsent
- Langkah 3: Atur pemicu ke "All Pages — Page View"
- Langkah 4: Atur prioritas agar menyala sebelum tag lain
Saat menggunakan GTM, FlexyConsent secara otomatis terintegrasi dengan Google Consent Mode V2 — tidak diperlukan konfigurasi tambahan.
Setelah Instalasi: Yang Perlu Diverifikasi
- Banner muncul — kunjungi situs Anda di jendela incognito
- Consent Mode aktif — periksa Google Tag Assistant untuk status persetujuan
- TC String dibuat — verifikasi di konsol browser dengan __tcfapi
- Analitik masih bekerja — konfirmasi data mengalir setelah menerima persetujuan
- Mobile berfungsi — uji pada perangkat mobile nyata
Masalah Umum dan Solusinya
- Banner tidak muncul? Pastikan skrip ada di <head>, bukan di <body>. Bersihkan cache browser Anda.
- Banner muncul setiap kunjungan? Pastikan cookie tidak diblokir oleh browser atau ekstensi privasi Anda.
- Google Ads tidak melacak? Pastikan skrip FlexyConsent dimuat sebelum tag Google Anda.