JavaScript в Тильде можно вставить как минимум в четыре места, и от выбора зависит, сработает скрипт вообще или нет. На практике вижу один и тот же сценарий: клиент присылает рабочий сниппет с другого сайта, я вставляю его в head сайта на Тильде, а скрипт молчит, потому что на момент выполнения обращается к элементу, которого ещё нет на странице. Ниже про то, куда физически попадает код в каждом поле настроек Тильды, что выполняется раньше остального контента, а что позже, и как выбрать место под конкретную задачу: счётчик аналитики, кастомный виджет на лендинге или скрипт для одной акционной страницы.
По теме статьи
Готовое решение
Автоматическая конвертация валюты на Tilda
Цены товаров в нужной валюте по актуальному курсу ЦБ — автоматически и в реальном времени.
от6 000 ₽
Кастомный скрипт
Когда стандартных блоков не хватает
Доработка сайтов на Тильде: скрипты для корзины, промокоды, зоны доставки, интеграции с CRM и Telegram. Простой скрипт от 3 000
от3 000 ₽
Три уровня, где Тильда пускает JavaScript
У Тильды нет единого редактора кода на весь проект. Вставить JavaScript можно на трёх уровнях, и они не исключают друг друга, на реальном проекте обычно задействованы сразу два.
Первый уровень: настройки сайта. Поля для кода в head и перед закрывающим тегом body применяются ко всем страницам проекта, включая те, что появятся позже.
Второй уровень: настройки конкретной страницы. У каждой страницы в Тильде есть собственные поля для head и для кода перед body, они добавляются к общесайтовым, а не заменяют их.
Третий уровень: код внутри вёрстки самой страницы. HTML-блок T123 можно перетащить в любое место между другими блоками, а Zero Block привязывает кастомный код к конкретному элементу конструктора.
Дальше подробно про каждый уровень: что там физически лежит и в какой момент выполняется.
Head и footer: код уровня сайта и уровня страницы
В настройках сайта, раздел «Ещё», два поля под произвольный код: одно вставляется в тег head, второе прямо перед закрывающим тегом body. Оба применяются ко всем страницам проекта разом.
Код в head выполняется раньше, чем браузер построил DOM страницы. Любой скрипт, который ищет элемент через querySelector или getElementById, в head сработает через раз, потому что элемента ещё нет в дереве документа на момент выполнения. Рабочее решение: обернуть код в обработчик DOMContentLoaded.
<script>
document.addEventListener('DOMContentLoaded', function () {
console.log('Скрипт из head сработал после загрузки DOM');
});
</script>Код перед закрывающим body выполняется, когда весь HTML страницы уже в DOM: браузер прочитал все блоки Тильды сверху донизу. Для скриптов, которые работают с содержимым страницы, это поле обычно надёжнее head и не требует обёртки в DOMContentLoaded.
У каждой страницы в тех же настройках, вкладка «Ещё» в настройках страницы, есть свои поля head и перед body. Код из них добавляется к общесайтовому, а не подменяет его: если нужен скрипт только на одной акционной странице, его кладут именно сюда, а не в настройки сайта, иначе он появится на всех страницах, включая те, где он не нужен и может конфликтовать с другим кодом.
Сравнение всех мест вставки:
| Место | Когда выполняется | Где действует |
|---|---|---|
| Head сайта | До построения DOM страницы | Все страницы проекта, включая новые |
| Перед /body сайта | После построения DOM всей страницы | Все страницы проекта, включая новые |
| Head страницы | До построения DOM, добавляется к общесайтовому head | Только эта страница |
| Перед /body страницы | После построения DOM всей страницы | Только эта страница |
| HTML-блок T123 | В момент, когда браузер при разборе страницы доходит до этого блока | Место вставки блока на конкретной странице |
| Элемент HTML в Zero Block | Так же, как T123: когда браузер при разборе страницы доходит до этого элемента | Вся страница, где стоит этот элемент |
Ещё один момент: на опубликованных страницах Тильда подключает библиотеку jQuery, поэтому конструкция вида $(document).ready часто работает без дополнительного подключения, но полагаться на неё в head рискованно по той же причине: элементов может ещё не быть в DOM.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
HTML-блок T123: код прямо в вёрстке страницы
T123, в интерфейсе он называется просто «HTML-код», это блок, который перетаскивается на страницу как любой другой: текст, картинка, кнопка. Внутри него открывается поле, куда можно вставить HTML, CSS и JavaScript.
Ключевое отличие от head и footer: код блока T123 выполняется в момент, когда браузер при разборе страницы доходит до этого блока. Значит, всё, что расположено на странице выше блока, уже в DOM и доступно скрипту, а то, что ниже, ещё нет. Это удобно, когда скрипту нужен доступ к конкретному соседнему блоку сразу после загрузки, без ожидания полной отрисовки страницы.
Например, у меня есть готовый конвертер валют для Tilda, который пересчитывает цены в карточках товаров по актуальному курсу. Такой виджет цепляется к конкретным элементам на странице: полю с ценой, переключателю валют, поэтому его код ставят в блок T123 сразу после нужного блока с ценой, а не в head сайта, где элементов с ценой ещё физически нет в момент выполнения.
Если нужна разовая доработка под конкретный сценарий, а не готовый скрипт из библиотеки, простую правку кода для Tilda я делаю от 3 000 ₽.
Zero Block: кастомный JavaScript на отдельном элементе
Zero Block: отдельный режим конструктора Тильды с более гибкой вёрсткой, сетка, произвольные отступы, вложенные элементы. Настройки «HTML-код» у каждого элемента нет: HTML в Zero Block добавляется отдельным элементом, который ставится на сетку рядом с текстом, картинкой и кнопкой.
Справка прямо пишет, что принципы работы блока T123 и элемента HTML в Zero не имеют существенных отличий, поэтому выигрыш не в изоляции кода, а в позиционировании: элемент ставится в нужное место кастомной сетки и живёт рядом с той версткой, к которой относится, например кастомная галерея, интерактивная карта или калькулятор внутри одной секции.
На практике элемент HTML в Zero Block выбираю, когда виджет должен стоять в конкретном месте кастомной сетки, а обычный блок T123 ставлю, когда достаточно отдельной полосы на странице. Песочницы ни там, ни там нет: справка отдельно просит не использовать теги и универсальные классы как селекторы для кастомных стилей, иначе они влияют на остальную страницу.
Типичные ошибки при размещении скриптов в Тильде
Скрипт ищет элемент, которого ещё нет. Самая частая причина молчания скрипта: код в head пытается найти блок, который отрисовывается позже. Решение простое: DOMContentLoaded для head-кода или перенос скрипта в подвал страницы либо в блок T123 сразу после нужного элемента.
var block = document.querySelector('.js-widget');
if (!block) {
console.warn('Элемент .js-widget ещё не появился в DOM');
} else {
block.addEventListener('click', function () {
console.log('Обработчик подключён');
});
}Код вставлен в настройки страницы вместо настроек сайта, или наоборот. Если скрипт должен работать только на одной странице, например обработка формы на конкретном лендинге, а его добавили в общесайтовый head, он подгрузится на всех страницах и может зря тратить время загрузки или конфликтовать с другим кодом. Обратная ситуация тоже встречается: скрипт нужен на всём сайте, а его вставили только на одну страницу, и после публикации новой страницы код на ней не работает, потому что его там никогда не было.
Дублирование одного и того же id на странице. Если скрипт ищет элемент по id, а на странице случайно оказалось два блока с одинаковым id, частая история при копировании блоков, document.getElementById вернёт только первый, и второй экземпляр окажется без обработчика.
Публикация не запущена после правки. Изменения в полях кода на Тильде применяются только после публикации страницы или всего сайта. Если проверять результат на черновике без публикации, легко решить, что скрипт не работает, хотя он просто ещё не попал на опубликованную версию.
Закешированная версия страницы в браузере. После публикации Тильда обновляет статические файлы, но браузер может отдавать более раннюю закешированную версию. Если правка визуально не проявляется, первым делом обновляю страницу с очисткой кеша, прежде чем искать ошибку в самом скрипте.
Проверка через консоль разработчика. Быстрый способ понять, где застрял код: открыть DevTools, вкладку Console, и посмотреть на ошибки вида «Cannot read properties of null»: это почти всегда сигнал, что скрипт выполнился раньше, чем появился нужный элемент.
Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.
Частые вопросы
Можно ли вставить JavaScript в Тильде без блока кода на странице?
Да. Для скриптов, которые не завязаны на конкретный визуальный блок, счётчики аналитики, пиксели, глобальные обработчики, достаточно поля head или footer в настройках сайта либо страницы, без T123 и Zero Block. Блок на странице нужен, когда код должен физически встроиться в вёрстку рядом с определённым элементом.
Почему скрипт работает на одной странице Тильды, но не на другой?
Чаще всего потому, что код добавлен в настройки конкретной страницы, а не сайта, и на вторую страницу его просто не скопировали. Вторая причина: на второй странице отличается вёрстка, и скрипт ищет класс или id, которого там нет или он называется иначе после копирования блока.
Как проверить, что скрипт вообще подключился на опубликованной странице?
Открыть опубликованную, не черновую, страницу, зайти в DevTools браузера, вкладку Console, и посмотреть на ошибки. Через просмотр исходного кода страницы можно убедиться, что нужный script вообще попал в HTML и стоит в том месте, где его ожидаешь: в head, перед /body или внутри конкретного блока.
Нужен ли отдельный сервер для JavaScript-кода в Тильде?
Нет, если скрипт выполняется в браузере посетителя, он отдаётся вместе со страницей через обычный хостинг Тильды и работает без какого-либо сервера с моей стороны. Отдельный бэкенд нужен, только если сценарий требует серверной логики: скрыть API-ключ, обработать вебхук от платёжной системы, сохранить данные формы в базу. Для таких задач на Тильде обычно хватает PHP-обработчика на обычном хостинге, а не выделенного сервера, VPS или Python-приложения, они нужны для другого класса задач вроде фоновых очередей или парсинга больших объёмов.