Code Injection — единственный способ добавить произвольную логику на Squarespace. Стандартные блоки не покрывают задачи вроде интеграции с CRM, кастомного калькулятора или расширенной аналитики. Мы сталкивались с этим десятки раз: клиент хочет собирать лиды прямо в amoCRM, настроить Cookiebot для GDPR или добавить AJAX-навигацию для бесшовного UX. Без доступа к серверу или шаблонам Code Injection становится главным инструментом. При неправильном использовании он ломает Core Web Vitals — LCP падает на 2 секунды, а скрипты конфликтуют с встроенными виджетами. Разберём, как внедрять код без последствий.
Почему Code Injection — единственный способ?
Squarespace запрещает редактировать исходный код темы. Вместо этого есть четыре точки инжекции, каждая со своей спецификой. Ошибка в выборе места ведёт к конфликтам или потере производительности. Например, скрипт, вставленный в Header, может замедлить загрузку всех страниц, если не обернуть его в defer или async. А код в Footer не сработает до полной загрузки DOM — это подходит только для асинхронных виджетов. Разберём же каждую точку.
Точки внедрения кода
| Место | Путь в панели | Назначение | Особенности |
|---|---|---|---|
| Global Header | Settings → Advanced → Code Injection → Header | Мета-теги, шрифты, синхронные скрипты | Вставляется в <head>, влияет на все страницы |
| Global Footer | Settings → Advanced → Code Injection → Footer | GTM, чаты, асинхронные скрипты | Перед </body>, подходит для виджетов |
| Page-level Header | Page Settings → Advanced → Page Header Code Injection | Уникальные скрипты для одной страницы | Действует только на текущую страницу |
| Lock Page / Order Confirmation | Специализированные разделы | Защищённые страницы, страница успешного заказа | Отдельные поля для разных сценариев |
Как мы это делаем: кейс интеграции с CRM
Из нашей практики: клиент — студия дизайна — попросил подключить amoCRM к сайту на Squarespace. Задача: при заполнении формы лид должен мгновенно попадать в CRM, а менеджер получать уведомление в Telegram. Решение:
- В глобальный футер добавили скрипт-перехватчик события
submitдля формы с конкретнымdata-form-id. - Собрали данные формы через
FormData, отправили черезfetchв REST API amoCRM. - Параллельно вызвали Telegram Bot API для уведомления.
Весь код уместился в 40 строк, тестирование заняло полдня. Без Code Injection пришлось бы менять шаблон или использовать костыли. В итоге клиент сократил время обработки лидов с 3 часов до 5 минут — экономия 98% времени.
Какой инструмент для Cookie Consent выбрать?
Встроенный баннер Squarespace (есть на Business+ планах) не предлагает кнопку «Отклонить все» — это нарушение GDPR. Cookiebot же даёт полный контроль: пользователь может выборочно соглашаться на категории трекеров. Мы используем его в 9 из 10 проектов. Он автоматически блокирует сторонние скрипты до получения согласия и обновляет политику при изменении списка куки. По данным документации Cookiebot, его решение в 5 раз быстрее настраивается, чем самописный баннер.
Сравнение Cookie Consent решений
| Критерий | Встроенный баннер Squarespace | Cookiebot | OneTrust |
|---|---|---|---|
| Кнопка «Отклонить все» | нет | да | да |
| Автоблокировка скриптов | нет | да | да |
| Бесплатный план | да (ограничен) | да (до 100 страниц) | да (ограничен) |
| Интеграция с Google Consent Mode | нет | да | да |
| Стоимость для 50 страниц | включен в план | около $12/мес | $15/мес |
Процесс работы
- Аналитика — изучаем текущие точки внедрения, выявляем конфликты с существующими скриптами.
- Проектирование — пишем архитектуру: какие API использовать, как обрабатывать AJAX-навигацию.
- Реализация — код на JavaScript/CSS, вставка через Code Injection, проверка в инкогнито-режиме. Закажите аудит Code Injection — мы найдём скрытые конфликты и улучшим производительность.
- Тест — проверка LCP, CLS, INP после инжекции; убеждаемся, что скрипты не ломают работу сайта.
- Деплой — переносим готовые скрипты в продакшен, даём гарантию на 7 дней поддержки.
Что входит в работу
- Аудит текущих точек Code Injection на конфликты.
- Разработка кастомных скриптов (CSS, JS) с учётом AJAX-навигации Squarespace.
- Подключение GTM, Cookiebot, Яндекс.Метрики или любой другой аналитики.
- Интеграция с CRM, email-маркетингом, Telegram-ботами.
- Кросс-браузерное тестирование (Chrome, Safari, Firefox).
- Документация по каждому скрипту и контакты на случай правок.
Частые ошибки при Code Injection
- Использование
document.write()— запрещено, вызывает ошибку. - Вставка jQuery поверх встроенного — приводит к дублированию и падению производительности.
- Необработка AJAX-навигации — виджеты перестают работать после перехода по страницам. Решение: подписывайтесь на событие
squarespace:after-body-render. - Синхронные XHR-запросы — блокируют загрузку. Используйте
fetchсasync/await.
Ограничения и обходы
Squarespace запрещает document.write() и синхронные XHR. ES-модули (type="module") работают, но нужно следить за порядком. jQuery уже встроен в ядро — не подключайте его повторно. Для старых функций используйте Y.use('node', ...). Если сайт использует AJAX-навигацию, не забывайте переинициализировать виджеты после события squarespace:after-body-render.
Сроки ориентировочно
- Подключение GTM и Яндекс.Метрики — от 2 часов.
- Кастомный виджет или калькулятор — от 1 до 2 дней.
- Интеграция с CRM с перехватом форм — от 3 до 5 дней.
- Полная миграция аналитики с настройкой Cookiebot — от 1 дня.
Стоимость рассчитывается индивидуально под ваш набор задач. Мы работаем более 5 лет с Squarespace, реализовали свыше 50 проектов — есть опыт с нестандартными требованиями. Получите консультацию — расскажем, как улучшить ваш сайт без боли.