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 sebelum tag head penutup. 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 berukuran di bawah 50 KB dan dimuat secara asinkron, artinya nol dampak pada kecepatan halaman Anda.
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 tepat sebelum </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 sebelum </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 sebelum </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.