Куда вставлять скрипт в Тильде: HTML-блок, head или footer

Вопрос, куда вставлять скрипт в Тильде, у новичков обычно решается методом тыка: копируют код, суют в первое попавшееся поле, а потом два часа разбираются, почему счётчик не считает или калькулятор СДЭК не рисуется. У Тильды три уровня для вставки кода - HTML-блок на странице, поле head и поле перед закрывающим тегом body, - и каждый предназначен для разных задач. Разберу, что куда класть, на примерах из своих проектов: аналитика, виджет Т‑Банка, калькулятор доставки, кастомные интеграции.

Три места, куда можно вставить скрипт в Тильде

В Тильде код можно разместить четырьмя способами, которые сводятся к трём логическим уровням:

• HTML-блок (Т123) - блок, который перетаскиваешь на конкретную страницу, внутри него свой набор тегов, включая script
• Head проекта - поле в настройках сайта, код попадает на все страницы перед тегом /head
• Head страницы - то же самое, но только для одной конкретной страницы, в её настройках
• Footer проекта или страницы - код вставляется перед закрывающим тегом /body, тоже глобально или точечно

Разница не только в области видимости, но и в моменте выполнения кода. Head грузится до отрисовки страницы, footer - после того как весь DOM уже построен, а HTML-блок выполняется в момент, когда браузер доходит до этого места в вёрстке. От этого напрямую зависит, заработает скрипт или выдаст ошибку про undefined.

HTML-блок на странице: точечная вставка кода

HTML-блок - это блок T123, который добавляется прямо в конструкторе как любой другой элемент страницы: заголовок, картинка, форма. Внутри него можно писать произвольный HTML, CSS и JS, и всё это оказывается ровно в том месте вёрстки, куда блок перетащили.

Сюда я вставляю виджеты, которым нужен конкретный div на странице: калькулятор стоимости доставки СДЭК, кастомную карту с точками выдачи, виджет бронирования. Если скрипту нужен элемент вроде <div id="cdek-map"></div>, разумнее держать его вместе с этим div в одном блоке, чем разносить по head и странице - так меньше шансов, что скрипт выполнится раньше, чем элемент появится в DOM.

<div id="cdek-widget"></div>
<script src="https://cdn.jsdelivr.net/npm/@cdek-it/widget@3"></script>
<script>
  const widget = new ISDEKWidget({
    defaultLocation: 'Москва',
    from: 'Москва',
    goods: [{ length: 10, width: 10, height: 10, weight: 0.5 }],
    element: 'cdek-widget'
  });
</script>

Важный момент: HTML-блок работает только на той странице, куда его добавили. Если у вас интернет-магазин на Тильде и калькулятор доставки нужен на 40 карточках товара, добавлять блок вручную на каждую - не вариант, тут уже нужен либо footer проекта с проверкой на URL, либо единый шаблон страницы товара. Готовые заготовки под похожие сценарии я собираю в библиотеке готовых скриптов - оттуда часто быстрее взять рабочий вариант, чем писать с нуля.

Head проекта и head страницы: для чего нужен

Head - это метаданные и код, который должен отработать до того, как пользователь увидит контент. Классический пример - счётчики аналитики: Яндекс.Метрика, Google Analytics 4, Facebook Pixel (VK Реклама). Их задача - зафиксировать визит с первой миллисекунды, поэтому вставлять их в footer бессмысленно: часть коротких визитов просто не попадёт в статистику.

В head проекта (Настройки сайта → Ещё → Код для вставки в head) я кладу:

• счётчики аналитики и пиксели ретаргетинга
• верификационные мета-теги для Search Console и Яндекс.Вебмастера
• подключение шрифтов через preconnect, если Тильда не тянет их сама
• глобальные переменные конфигурации, которые нужны скриптам на всех страницах

Head страницы (в настройках конкретной страницы, вкладка SEO, пункт «Ещё код») использую реже - обычно для акционных лендингов с отдельным пикселем ретаргетинга или для страницы оплаты, где нужен скрипт эквайринга Т‑Банка с привязкой к конкретному терминалу. У Т‑Банка (бывший Тинькофф) виджет оплаты требует подключения библиотеки до инициализации формы, и если вставить его в footer, форма оплаты иногда успевает отрисоваться раньше, чем библиотека готова - тогда кнопка «Оплатить» просто не реагирует на клик.

Одна оговорка: то, что вставлено в head страницы, не отменяет head проекта - они складываются. Если один и тот же счётчик поставить и туда, и туда, аналитика задвоится, а в Метрике визиты будут считаться дважды - я такое видел на паре аудитов, когда после смены подрядчика старый код никто не убрал.

Footer (перед /body): куда девать скрипты, которым нужен DOM

Всё, что должно сработать после того, как страница полностью отрисована, отправляется в footer - поле «Код для вставки перед /body» в тех же настройках сайта или страницы. Это подходящее место для:

• обработчиков отправки форм (например, чтобы прокинуть данные в CRM или в n8n-сценарий)
• чат-виджетов и виджетов обратного звонка
• скриптов, которые ищут элементы по классам Тильды (querySelector, addEventListener)
• кода, завязанного на события Тильды вроде tildaForm или t_onFuncLoad

Причина простая: если скрипт пытается найти элемент формы через document.querySelector('.t-form'), а сам код выполняется в head до того, как эта форма прогрузилась, он получит null и упадёт с ошибкой в консоли. В footer к моменту выполнения скрипта DOM уже собран, так что обращения к элементам страницы работают предсказуемо.

Пример: клиент просил после успешной отправки формы записи на консультацию сразу пушить лид в Bitrix24 и параллельно слать уведомление в Telegram через n8n-вебхук. Логика ловит событие Тильды, достаёт значения полей и делает fetch-запрос на вебхук n8n - весь этот код живёт в footer страницы с формой, потому что завязан на уже готовый DOM-элемент формы.

document.addEventListener('tildaForm:aftersuccess', function (e) {
  const data = new FormData(e.detail.form);
  fetch('https://n8n.example.com/webhook/lead', {
    method: 'POST',
    body: JSON.stringify(Object.fromEntries(data)),
    headers: { 'Content-Type': 'application/json' }
  });
});

Проект целиком или одна страница - как выбрать уровень

Правило у меня простое: если скрипт нужен на всех страницах сайта - он идёт в настройки проекта, если только на одной или на группе однотипных страниц - в настройки конкретной страницы или в HTML-блок.

Аналитику, антифрод-скрипты платёжных систем общего назначения, чаты поддержки - в проект. Разовый скрипт для акционного лендинга, который через месяц снесут, - в head или footer именно этой страницы, чтобы потом не искать по всему сайту, что и где забыли выключить.

Отдельно стоит связка HTML-блок + footer: если виджет требует и div на странице, и обработчик событий, который завязан на форму рядом, я делю код - разметку и инициализацию виджета кладу в HTML-блок, а слушатель событий формы - в footer страницы. Так проще найти, что где лежит, когда через полгода понадобится что-то поправить.

Для сложных случаев - интеграция эквайринга, синхронизация с CRM, калькулятор с несколькими API - комплексная работа обычно тянет на интеграцию, а не на точечную правку: у меня она стоит от 40 000 ₽, простая доработка вроде добавления одного стороннего скрипта - от 3 000 ₽.

Частые ошибки при вставке скриптов в Тильде

За несколько лет работы с Тильдой чаще всего встречаю одни и те же грабли:

• Дублирование кода. Скрипт вставлен и в head проекта, и в head страницы одновременно - счётчики считают визиты дважды, форма отправляет данные в CRM два раза подряд.
• Скрипт в head, которому нужен DOM. Код падает в консоли с ошибкой Cannot read properties of null, потому что элемент, который он ищет, ещё не отрисован.
• Конфликт с Zero Block. Если страница собрана в Zero Block, у неё своя логика подгрузки скриптов, и код, работающий на T123-странице, может вести себя иначе - тестировать нужно именно на той версии редактора, где страница реально собрана.
• Скрипт остаётся после удаления виджета. Убрали блок с формы или калькулятора, а обработчик события в footer не тронули - он продолжает искать элемент, которого больше нет, и штампует ошибки в консоли на пустом месте.
• HTTP вместо HTTPS в src. Тильда отдаёт сайт по HTTPS, и подключение стороннего скрипта по HTTP браузер молча блокирует как mixed content - визуально ничего не происходит, а скрипт просто не грузится.

Последний пункт всплывает регулярно на аудитах: смотришь консоль разработчика - ни одной ошибки, а виджет не отображается. Причина в блокировке mixed content, которую браузер даже не всегда явно подсвечивает как ошибку, а просто игнорирует запрос.

Частые вопросы

Можно ли вставить один и тот же скрипт сразу и в head, и в footer?

Технически да, но смысла в этом нет почти никогда: скрипт выполнится дважды, и если это счётчик аналитики или обработчик формы, данные задвоятся. Выбирайте одно место исходя из того, нужен ли скрипту готовый DOM, и вставляйте только туда.

Почему скрипт в HTML-блоке работает на одной странице, а на других - нет?

HTML-блок привязан к конкретной странице, на которую его перетащили в редакторе. Если код нужен на нескольких страницах, либо копируйте блок на каждую вручную, либо переносите логику в footer проекта с проверкой текущего URL через window.location.pathname.

Как вставить скрипт только на одну страницу, а не на весь сайт?

Откройте настройки нужной страницы, а не настройки сайта целиком, и найдите там поля «Код для вставки в head» и «Код для вставки перед /body» - они относятся именно к этой странице и не затрагивают остальные.

Что делать, если после вставки скрипта в head сломалась вёрстка?

Чаще всего дело в незакрытом теге или в CSS, который был вставлен вместе со скриптом и переопределил стили Тильды глобально. Проверьте код на валидность построчно и, если стили должны действовать только в рамках одного блока, оберните их в уникальный класс вместо общих селекторов вроде div или a.