Куда Тильда пускает код: четыре места и когда какое

«Как вставить код на Тильду» - запрос, за которым обычно прячется не одна проблема, а три. Человек не знает, куда именно класть код; кладёт не туда; а потом смотрит на страницу и не понимает, почему ничего не изменилось. Мест для кода в Тильде четыре, и они делают разные вещи.

Ниже по порядку: что это за четыре места, какой код в каждое из них идёт, чем страница платит за скрипт в head, как за минуту проверить, что код подключился, и почему без публикации вы смотрите на старую версию сайта.

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

Четыре места: короткая карта

Тильда принимает произвольный код в четырёх точках. Отличаются они двумя вещами: областью действия и моментом выполнения.

Настройки сайта, поле для кода внутри head. Работает на всех страницах, выполняется до того, как браузер отрисует контент.
Настройки сайта, поле для кода перед закрывающим тегом body. Тоже на всех страницах, но выполняется уже после разбора разметки.
Настройки конкретной страницы, там такие же поля. Работает только на этой странице.
HTML внутри самой страницы: блок T123 из категории «Другое» или элемент HTML внутри Zero Block. Код живёт в конкретном месте макета.

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

Настройки сайта: head и перед закрывающим body

Путь: список сайтов, шестерёнка нужного сайта, раздел «Ещё». Там два поля: код внутрь head и код перед закрывающим тегом body. Оба подставляются в каждую страницу сайта.

В head имеет смысл класть то, что должно быть готово раньше контента: подключение шрифтов, ваши CSS-правила, мета-теги для подтверждения прав в поисковиках, счётчик аналитики, которому важно поймать самое начало визита.

Перед закрывающим body идёт всё остальное: чаты, поп-апы, пиксели рекламных систем, сторонние виджеты. Скрипт видеовиджета или онлайн-консультанта ставится именно сюда: он всё равно рисует свой интерфейс после загрузки страницы, и тормозить ради него разбор HTML незачем. Подробнее про установку на Тильду есть в отдельной инструкции.

Учтите, что код из этих полей попадёт и туда, где вы его не ждали: на страницы благодарности, на 404, на служебные страницы. Для счётчика это нормально, для скрипта, который что-то делает с формой, часто нет.

Настройки страницы: код только здесь

У каждой страницы есть собственные поля для кода. Открываются они из списка страниц: шестерёнка у нужной страницы, дальше раздел «Ещё» или «Дополнительно», в зависимости от версии панели.

Сюда кладут то, что относится ровно к одной посадочной: пиксель конкретной рекламной кампании, стили под нестандартный блок, скрипт квиза, разметку для одного лендинга.

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

Блок T123: HTML прямо в потоке страницы

Блок T123 живёт в категории «Другое» и представляет собой кусок разметки, вставленный между обычными блоками. Скрипты и стили внутри него выполняются, а не показываются как текст.

Подходит, когда виджет должен стоять в определённом месте: после первого экрана, перед формой, в конце страницы.
Годится для iframe, форм сторонних сервисов, калькуляторов, таблиц.
Высота блока задаётся содержимым: если внутри вырос большой элемент, страница просто станет длиннее.

Ограничение тоже есть: блок занимает всю ширину контейнера и встаёт в общий поток. Свободно двигать его по экрану нельзя, для этого нужен Zero Block.

И отдельно: в обычный текстовый блок код вставлять бесполезно. Тильда экранирует его и покажет посетителю ваши теги как обычные буквы.

Zero Block: код на свободном холсте

В Zero Block есть отдельный элемент для HTML. Вы добавляете его на холст, открываете содержимое и вставляете код туда же, куда обычно вставляют текст.

У элемента заданы координаты и размеры для каждого разрешения: 1200, 980, 640, 480 и 320 пикселей.
Содержимое не растягивает холст: высота блока остаётся такой, какой вы её задали.
Стили страницы могут перебивать стили внутри вставки, поэтому свои правила лучше делать конкретнее по селекторам.

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

Шпаргалка: что куда класть

Счётчик Метрики или другой аналитики - head в настройках сайта, один раз на весь сайт.
Пиксель одной рекламной кампании - head конкретной страницы, а не всего сайта.
Чат, обратный звонок, всплывающие виджеты - поле перед закрывающим body в настройках сайта.
Глобальные правки оформления - тег style в head сайта.
Сторонний виджет в определённом месте макета - блок T123 или HTML-элемент в Zero Block.
Внешний шрифт - head сайта, иначе текст успеет отрисоваться дважды.

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

Почему код в head тормозит загрузку

Браузер читает документ сверху вниз. Встретив обычный тег script с внешним адресом в head, он останавливает разбор HTML, скачивает файл, выполняет его и только потом идёт дальше. Всё это время человек смотрит на пустой экран.

Переносите в поле перед закрывающим body всё, что не обязано стартовать первым.
Для своих скриптов используйте атрибуты defer или async, они снимают блокировку.
Не тащите в head тяжёлую библиотеку ради одной функции, которую можно написать в десять строк.
Проверьте, что все внешние адреса начинаются с https: иначе браузер вырежет запрос на защищённом сайте.

Разница особенно заметна на мобильном интернете, где каждый лишний запрос стоит сотни миллисекунд. Замерьте страницу в PageSpeed Insights до переноса и после - цифра покажет цену вопроса лучше любых советов.

Как проверить, что код подключился

Откройте опубликованную страницу в обычном окне браузера, не в режиме предпросмотра.
Нажмите Ctrl+U и поищите по исходному коду кусок своей вставки. Нет фрагмента - код до страницы не доехал.
Откройте F12, вкладку Network, перезагрузите страницу и найдите файл скрипта. Статус 200 значит, что файл получен, 404 или красная строка - адрес неверный.
Загляните во вкладку Console: красные ошибки означают, что скрипт загрузился, но упал на выполнении.
Через вкладку Elements убедитесь, что виджет действительно вставил свою разметку в страницу.

Типичные причины «кода нет на странице»: правили один сайт, а смотрите другой; вставили в настройки страницы, а открыли соседнюю; блокировщик рекламы вырезал счётчик; скрипт подключается по http на https-сайте.

Если фрагмент в исходном коде есть, а эффекта нет - проблема уже не в Тильде, а в самом скрипте. Дальше разбираться нужно по ошибкам в консоли.

Публикация: шаг, без которого ничего не работает

Тильда хранит черновик отдельно от опубликованной версии. Пока вы не нажали «Опубликовать», посетители видят прежнюю страницу, а вы ищете ошибку в совершенно правильном коде.

Правили код страницы - опубликуйте эту страницу.
Правили настройки сайта, то есть head или поле перед закрывающим body, - переопубликуйте все страницы, где код должен работать. В списке страниц для этого есть массовая публикация.
После публикации обновляйте страницу через Ctrl+F5: обычное обновление часто отдаёт версию из кэша браузера.

Если сайт стоит на своём домене и перед ним есть CDN или кэширующий прокси, добавьте ещё один шаг: сброс кэша на его стороне. Иначе картина не изменится - у вас всё новое, у клиента всё старое.

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

Можно ли вставить скрипт в обычный текстовый блок Тильды?

Нет, Тильда экранирует такой код и покажет теги как текст. Для работающего HTML нужен блок T123 из категории «Другое» или элемент HTML внутри Zero Block. Если код должен работать на всех страницах, его место в настройках сайта.

Почему код работает в предпросмотре, но не на сайте?

Скорее всего страница не опубликована после правки. Изменения в настройках сайта требуют переопубликовать страницы, а браузер после этого стоит обновить через Ctrl+F5. Если и это не помогло, проверьте, тот ли домен вы открываете.

Сколько кода можно положить в head?

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

Где вставлять код счётчика аналитики?

В поле для head в настройках сайта, один раз на весь сайт. Не дублируйте его в блоках на страницах: визиты начнут считаться дважды, и отчёты будут завышены. После вставки проверьте через F12 и вкладку Network, что запрос счётчика уходит.