Руководство по интеграции CMP: Shopify, WordPress, Wix и кастомные сайты
Вопрос номер один, который мы слышим от новых пользователей: «Как установить FlexyConsent на мой сайт?» Ответ один и тот же независимо от платформы — вставьте одну строку JavaScript перед закрывающим тегом head. Но точные шаги немного отличаются для Shopify, WordPress, Wix, Squarespace и сайтов, созданных на заказ. Это руководство охватывает их все.
Универсальный подход
FlexyConsent работает с одним тегом script. Никаких плагинов, SDK или настройки на стороне сервера. Каждая платформа, которая позволяет вставлять кастомный HTML в раздел head, поддерживает FlexyConsent. Скрипт занимает менее 50 КБ и загружается асинхронно, то есть нулевое влияние на скорость вашей страницы.
Скрипт:<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
- Вариант A (без плагина): Appearance > Theme Editor > header.php > вставьте перед </head>
- Вариант B (с плагином): Установите любой плагин «Insert Headers» > вставьте скрипт в раздел Head
- Вариант C (functions.php): Добавьте хук действия wp_head, который выводит тег script
Совместимо со всеми основными темами (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.