Посібник з інтеграції CMP: Shopify, WordPress, Wix та власні сайти
Головне питання, яке ми чуємо від нових користувачів: "Як встановити FlexyConsent на свій сайт?" Відповідь однакова незалежно від платформи — вставте один рядок JavaScript перед закриваючим тегом head. Але точні кроки дещо відрізняються для Shopify, WordPress, Wix, Squarespace та сайтів власної розробки. Цей посібник охоплює всі варіанти.
Універсальний підхід
FlexyConsent працює з одним тегом скрипту. Без плагінів, без SDK, без серверної конфігурації. Кожна платформа, яка дозволяє власний HTML у розділі head, підтримує FlexyConsent. Скрипт займає менше 50KB і завантажується асинхронно, що означає нульовий вплив на швидкість вашої сторінки.
Скрипт:<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
- Варіант А (без плагіна): Appearance > Theme Editor > header.php > вставте перед </head>
- Варіант Б (з плагіном): Встановіть будь-який плагін "Insert Headers" > вставте скрипт у розділ Head
- Варіант В (functions.php): Додайте action hook wp_head, який виводить тег скрипту
Сумісно з усіма основними темами (Astra, GeneratePress, Divi, Elementor) та конструкторами сторінок. Без конфліктів із плагінами кешування — скрипт завантажується незалежно.
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 / Статичні сайти
- Крок 1: Відкрийте свій HTML-шаблон або файл макету
- Крок 2: Вставте скрипт перед </head>
- Крок 3: Задеплойте — це буквально все
Працює з будь-яким генератором статичних сайтів (Next.js, Gatsby, Hugo, Jekyll, Astro), будь-яким фреймворком (React, Vue, Angular) та будь-яким хостинг-провайдером.
Google Tag Manager
- Крок 1: Створіть новий тег Custom HTML
- Крок 2: Вставте скрипт FlexyConsent
- Крок 3: Встановіть тригер на "All Pages — Page View"
- Крок 4: Встановіть пріоритет спрацювання перед іншими тегами
При використанні GTM, FlexyConsent автоматично інтегрується з Google Consent Mode V2 — додаткова конфігурація не потрібна.
Після встановлення: Що перевірити
- Банер відображається — відвідайте свій сайт у вікні інкогніто
- Consent Mode спрацьовує — перевірте Google Tag Assistant на стан згоди
- TC String генерується — перевірте в консолі браузера за допомогою __tcfapi
- Аналітика продовжує працювати — підтвердьте потік даних після прийняття згоди
- Мобільні пристрої працюють — протестуйте на реальних мобільних пристроях
Поширені проблеми та їх вирішення
- Банер не відображається? Перевірте, що скрипт знаходиться в <head>, а не в <body>. Очистіть кеш браузера.
- Банер показується при кожному відвідуванні? Переконайтеся, що файли cookie не заблоковані вашим браузером або розширенням конфіденційності.
- Google Ads не відстежує? Переконайтеся, що скрипт FlexyConsent завантажується перед вашими тегами Google.