Новый формат
Как вставить JavaScript на сайт: инструкция для CMS и конструкторов
Счётчики, чаты, пиксели и виджеты почти всегда приходят куском JavaScript. Задача владельца сайта — вставить код туда, где он загрузится на нужных страницах, не продублировать его и не отдать кэшем старую версию без скрипта.
Ниже — какой код бывает, куда его класть в WordPress и конструкторах, как править шаблон без панели и что проверить после вставки. Установка Метрики разобрана отдельно; здесь общий принцип.
Какой код обычно добавляют
Чаще всего это фрагмент из кабинета сервиса: аналитика, пиксель рекламы, чат, A/B, виджет записи. Он выглядит как `<script>…</script>` или подключение внешнего файла.
Не путайте с HTML-блоком контента и с CSS. JS выполняет логику в браузере; ошибка в нём может сломать кнопку или форму на странице.
Берите код только из:
- официального кабинета сервиса;
- документации платформы;
- задания от вашего разработчика/агентства.
Общий принцип: где должен жить скрипт
Код должен попадать в HTML всех (или выбранных) шаблонов: главная, категории, карточки, спасибо. Идеально — одно место: header/footer темы, «скрипты в head», контейнер тег-менеджера.
После вставки смотрите исходный код страницы и Network: скрипт загрузился? нет ли дубля? не режет ли CSP?
Проверка:
- Ctrl+U / «Просмотр кода» — есть ли фрагмент;
- инкогнито без блокировщика;
- сброс кэша CMS/CDN;
- мобильная и десктоп-версия.
WordPress (self-hosted)
Типовые пути: плагин для header/footer scripts, настройки темы («код в head»), child-theme с правкой `header.php`/`footer.php`, тег-менеджер. Не правьте родительскую тему без child — обновление сотрёт правки.
Визуальный редактор записи для JS не подходит. На WordPress.com кастомный JS может быть недоступен на младших тарифах — смотрите актуальные ограничения площадки.
Порядок:
- бэкап;
- вставить код в одно штатное место;
- сбросить кэш;
- проверить 3–4 типа страниц;
- не дублировать тем же кодом в GTM и в теме сразу.
Сайт без удобной админки: правка шаблона
Если есть только FTP/файловый менеджер — находите общий header/footer шаблона (часто `header.php`, `index.html`, layout в движке). Вставляйте фрагмент по рекомендации сервиса, сохраняйте кодировку UTF-8, не ломая соседние теги.
Опечатка в `header` может «уронить» весь сайт. Держите копию файла до правки и проверяйте главную сразу после загрузки.
Мини-техника безопасности:
- скачать файл → править локально → залить;
- не удалять закрывающие теги;
- не светить бэкапы `.php.bak` в webroot.
Конструкторы: Wix, Squarespace, Shopify и аналоги
У конструкторов свои пункты: «Custom code», «Header scripts», настройки темы, checkout scripts. Названия меню меняются — ищите «код», «скрипты», «pixel», «head».
Ограничения тарифов реальны: на бесплатных планах кастомный JS часто закрыт. Shopify: theme code / additional scripts — с осторожностью и бэкапом темы. Не копируйте устаревшие скриншоты 2018 года как догму.
Общий алгоритм на конструкторе:
- найти поле кастомного кода в настройках сайта/темы;
- вставить фрагмент из кабинета сервиса;
- опубликовать;
- проверить на опубликованной (не только превью) странице.
Типичные ошибки после вставки
Два одинаковых счётчика, код только на главной, кэш отдаёт HTML без скрипта, минификатор ломает JS, Content-Security-Policy режет домен сервиса, вставили HTML-инструкцию вместе с поясняющим текстом из письма.
Если «вчера работало» — вспомните деплой темы, плагин кэша и обновление конструктора. Диагностику Метрики см. в отдельной статье.
Чеклист приёмки:
- один экземпляр кода;
- нужные URL покрыты;
- нет ошибок в консоли из-за вашего фрагмента;
- событие/визит виден в кабинете сервиса.
Частые вопросы
Куда лучше: в head или перед </body>?
Смотрите рекомендацию поставщика кода. Аналитику часто ставят как можно раньше в head; тяжёлые виджеты иногда ниже. Не угадывайте против инструкции сервиса.
Можно ли вставлять JS в текст страницы через визуальный редактор?
Плохая идея: редактор может вырезать теги. Нужны поля «скрипты», плагин, тег-менеджер или правка шаблона.
Что такое тег-менеджер?
Контейнер (например GTM), куда кладут маркетинговые теги без постоянной правки темы. Удобно при многих счётчиках и ответственном за публикации.
Почему после вставки ничего не работает?
Кэш, код не на всех шаблонах, опечатка, блокировщик, CSP, скрипт только на черновике темы, двойная установка.
Безопасно ли копировать любой сниппет из интернета?
Нет. Берите код только из кабинета сервиса (Метрика, реклама, чат). Чужие «ускорители» и «SEO-скрипты» — риск вредоноса.
Нужен ли доступ по FTP?
Для правки header.php/темы — часто да или через файловый менеджер хостинга. На конструкторах — только их панель.
WordPress.com и WordPress.org — одно и то же?
Нет. На .com ограничения на кастомный JS зависят от тарифа. На self-hosted .org гибче через тему/плагины.
Скрипт вставил — SEO выросло?
Сам факт вставки JS не поднимает позиции. Счётчик нужен для аналитики; рост — контент, техника и спрос, горизонт месяцев.
Нужно вставить счётчик или виджет?
Подскажем, куда класть JS в CMS и конструкторе — без дублей и потери после кэша.
Обсудить задачу
