Куда вставлять код на Тильде: T123, head и класс на секции

Как добавить код на сайт, собранный на Тильде, — вопрос из двух частей: куда именно его вставить и что при этом окажется вокруг него. Первая часть решается за минуту, вторая объясняет почти все случаи «вставил, а не работает».

Ниже — не пересказ справки, а то, что видно в разметке готовых страниц. Четыре страницы живых сайтов на Тильде разобраны по блокам: где Тильда держит ваш код, чем она его оборачивает и чем блок на странице отличается от слота в настройках сайта.

Короткий ответ

Мест два. Блок T123 — код нужен одной странице: скрипт мода, стиль, виджет. Слот в head из настроек сайта — код нужен всем страницам сразу: счётчик, подтверждение владения. Где стоит блок T123 относительно секции, для скрипта, который ждёт готовности документа, значения не имеет. Имеет значение одно: страница у блока с кодом и у секции должна быть одна.

Как блок T123 выглядит в разметке страницы

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

<div id="rec431627903" class="r t-rec" style=" " data-animationappear="off" data-record-type="131">
  <!-- T123 -->
  <div class="t123">
    <div class="t-container_100 ">
      <div class="t-width t-width_100 ">
        <!-- nominify begin -->
          ← здесь ваш код
        <!-- nominify end -->

Что отсюда полезно знать:

• Тип записи — 131, а не 123. Блок называется T123, но в разметке он помечен data-record-type="131". Это ловушка для селекторов: правило или скрипт, написанные под [data-record-type="123"], не найдут ничего. На четырёх страницах записей с типом 123 нет ни одной, а с типом 131 — ровно тринадцать, столько же, сколько блоков.
• Между маркером <!-- T123 --> и вашим кодом — три вложенных div. Один и тот же фрагмент в 86 символов на всех тринадцати блоках, включая контейнер t-container_100. То есть ваш код лежит не в теле страницы напрямую, а внутри контейнера со своей шириной и отступами: если вы вставляете разметку, а не скрипт, она наследует эту сетку.
• nominify — метка «не сжимать». Тильда минифицирует свою разметку, а этот участок оставляет как есть. Поэтому в готовой странице ваш код читается ровно в том виде, в котором вы его вставили, — по этим двум комментариям его и удобно искать в исходном коде страницы.

Номер блока пишут и латиницей, и кириллицей — т123, — блок при этом один и тот же: в редакторе он подписан «HTML-код», и вставить в него можно любую разметку, стиль или скрипт.

В head и в блоке — один и тот же маркер

Замер вышел резче, чем ожидалось. Областей nominify на четырёх страницах шестнадцать: тринадцать — это блоки T123, а три лежат внутри <head>. Тильда помечает ваш код одинаково независимо от того, вставили вы его блоком на страницу или полем в настройках сайта, — различает их только место.

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

Выше секции или ниже: когда порядок правда важен

Совет «ставьте блок T123 выше секции, иначе скрипт стартует раньше разметки» встречается часто. Он и у нас напечатан на каждой странице мода — и он неверен в своей причине: блок ниже означает, что скрипт стартует позже, а не раньше.

Для модов библиотеки положение блока не меняет вообще ничего, и это видно в трёх местах их кода.

Первое — загрузчик. В блок вставляются два тега:

<script src="https://modkod.ru/mk/mod-041.js" defer></script>
<script>
  window.MK_MOD_041 = { duration: 600 };
</script>

defer означает «выполнить после того, как документ разобран целиком». Где при этом стоял тег — в начале страницы или в конце — на момент запуска не влияет.

Второе — стиль. Мод добавляет своё правило не рядом с собой, а в head:

(document.head || document.documentElement).appendChild(style);

Позиция блока на странице на место стиля не влияет тоже.

Третье — ожидание документа. Мод запускается не сразу, а так:

function ready(fn) {
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    setTimeout(fn, 0);
  }
}

И этого мало: артборд Zero Block собирается уже после готовности документа, а ленивые блоки приезжают ещё позже. Поэтому за первым проходом идёт серия повторов и наблюдатель за изменениями страницы — секция находится и тогда, когда её создали через секунду после загрузки.

Есть и четвёртая причина, от обратного. Правила, которое прячет контент по классу секции, в стиле мода нет намеренно: иначе не доехавший скрипт оставил бы текст спрятанным навсегда. Прячет и показывает сам скрипт, атрибутом. Значит, «мелькания до того, как приехал стиль» — того единственного эффекта, на который порядок блоков мог бы повлиять, — тут не бывает по устройству.

Когда порядок всё-таки важен. Не для нашего кода, а для чужого сниппета, который написан без ожидания документа и лезет в разметку сразу:

<script>
  document.querySelector('.my-section').style.display = 'none';
</script>

Такому блоку нужно стоять ниже секции — иначе к моменту запуска секции ещё нет и querySelector вернёт null. Правило, которое обычно и имеют в виду, звучит наоборот, и запомнить его стоит именно в этой формулировке: скрипт, который ждёт документ, ставится где угодно; скрипт, который не ждёт, — после того, с чем он работает.

Второй настоящий случай — два блока со стилями. Между собой они порядком связаны: при равной весомости селекторов побеждает правило из блока, который стоит ниже.

Класс — на секции, а не на элементе Zero Block

Скрипт мода ищет свою секцию по классу из поля «CSS класс», и это второе по частоте место ошибки после публикации. Спрашивают чаще всего именно про зеро блок: «как добавить код в зеро блок». Развилка там такая:

• Класс ставится в настройках блока-секции, а не элемента. В разметке это запись — <div class="r t-rec" data-record-type="396"> для Zero Block, и класс должен оказаться на ней.
• Внутри Zero Block у каждого элемента есть своё поле класса. Класс, поставленный элементу, скрипт секции не найдёт: он ищет секцию.

Проверить это можно не глядя в код: на опубликованной странице в консоли набрать document.querySelectorAll('.mk-reveal').length. Ноль означает, что класс либо не на секции, либо не сохранён — а не что мод не работает.

Zero Block’ов на четырёх снятых страницах 34 — это самый частый тип записи из всех. Ошибиться уровнем есть где.

Что кладут в head, а что в блок

Разница не в том, «что удобнее», а в области действия: head — на все страницы сайта, блок — на одну. Что нашлось в слоте head на снятых страницах:

И один случай, который стоит целого раздела. У учебного центра слот head пуст, а единственный блок T123 на странице содержит ровно одну строку — мета-тег подтверждения владения сервисом:

<meta name="zen-verification" content="…" />

Мета-тег в теле страницы не работает: подтверждение владения читают из head. Блок при этом сохранён, опубликован и выглядит как сделанная работа. Это и есть типичная цена путаницы между двумя местами — не ошибка в коде, а код, положенный не туда, где его ищут.

Простое правило, которое закрывает почти все случаи:

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

Сколько кода влезает в один блок

Полезная нагрузка тринадцати блоков на снятых страницах — от 109 до 15 914 символов. Самый большой — один <style>, и он сохранён и отдаётся страницей. Значит, потолок выше пятнадцати килобайт, а вот где он — из этих замеров не следует.

Своей цифры для блока с кодом Тильда не публикует. Документированное ограничение «30000 байт на блок» она называет для блоков с товарами, вместе с ошибкой «Слишком много текста в блоке». Совпадает ли оно с блоком кода — из справки не следует, поэтому у больших сниппетов это проверяют сохранением, а не расчётом.

Практический вывод отсюда один: класть по одному скрипту в блок. Два сниппета в одном блоке складывают свои байты, два блока — нет. Подробнее про соседство скриптов — два мода на одной странице.

Код вставлен, а ничего не происходит

По порядку, от самого частого:

1. Страница не опубликована. В редакторе и в предпросмотре Тильда пользовательский JS не выполняет — блок показывается как текст. Это не поломка, а режим, и у него есть отдельный разбор с тремя причинами, по которым в редакторе работает, а на сайте нет.
2. Класс не на секции. См. выше: в консоли document.querySelectorAll('.ваш-класс').length должен быть больше нуля.
3. Кеш. Ctrl+Shift+R. Тильда отдаёт закешированный HTML до пяти минут, и первые минуты после публикации вы смотрите старую страницу.
4. Блок и секция на разных страницах. Скрипт из блока T123 действует только на своей странице. Нужен на всех — либо блок в каждую, либо тег в head.
5. Консоль. Строки с ошибками там появляются раньше, чем гипотезы: наши моды пишут туда свой идентификатор — [ModKod] MOD-041: …, — то есть сразу видно, упал мод или он вообще не приехал.

Кода для вставки в каталоге библиотеки — по два тега на мод, и ставятся все одинаково: каталог модов. Если нужного эффекта в библиотеке нет или он завязан на корзину, формы и доставку, это уже мод под задачу.