Skip to content

Подключение

О разделе

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

JS-Скрипт

Сейчас этот скрипт подключается к странице автоматически.

Предупреждение

Важно убедиться, что к странице подключен только один подобный скрипт.

js
<script>
try {
    const head = document.head;
    const script = document.createElement('script');
    script.type = 'text/javascript';
    const uniqId = new Date().getTime();
    script.src = `https://likecentre-files.website.yandexcloud.net/autotilda/preloader.js?v=${uniqId}`;
    head.appendChild(script);
} catch (error) {
    console.log('Preloader initializing error')
}
</script>

Дополнения

В автотильде существует ряд дополнений, которые автоматизируют процессы: автодаты, автоцены, автоселект пакетов. Для гуглформы и мультиформы также существует своя специфика подключения.

Админка

После публикации страницы в тильде, следует скопировать её ID, tilda_id перейти в админку и открыть раздел Создать страницу.

В нём заполнить всю первичную информацию о странице:

URI страницы - название пути, который будет использоваться после домена.

ID страницы - скопированный из тильды идентификатор.

Редирект на страницу "Спасибо" - ссылка на страницу, которая будет отображаться после оформления заявки или оплаты продукта, обязательно в формате https://.

Title, Description и Keywords - для метаинформации о странице.

Редирект на страницу - если страницу необходимо закрыть редиректом. При заходе на указанный URI произойдет редирект.

Привязанные продукты - обязательно выбрать ID продуктов, которые предоставил заказчик.

Страница без продукта

Если лендинг не подразумевает оформление заявки, рекомендуется указывать ID 3114

admin_page

Затем необходимо выбрать формат дизайна и настроить поля формы.

admin_page

admin_page

Последний пункт - настройка дополнительных параметров. Подробнее о них можно посмотреть тут.

admin_page

Специфика мультиформ

При развороте мультиформы очень важно соблюдать правила, которые позволят скрипту корректно обработать страницу.

Примечание #1

Убедись, что отсутствуют элементы, в том числе прозрачные, которые мешают нажатию на кнопку отправки заявки

Примечание #2

Убедись, что получившаяся форма помещается на всех адаптивных экранах

Примечание #3

Убедись, что стрелочка для кнопки или иные элементы подходят в итогой странице

Примечание #4

Убедись, что на кнопке перехода между шагами стоит CSS-класс next_step

Примечание #5

Убедись, что старый кастомный скрипт мультиформы удален

Специфика гуглформ

При развороте гуглформы очень важно соблюдать правила, которые позволят скрипту корректно обработать страницу.

Примечание #1

Убедись, что получившаяся форма ничем не перекрывается, в том числе на мобильных устройствах

Примечание #2

Убедись, плашки для полей формы имеют ссылку #rectangle

Специфика квизов

При развороте квиза очень важно соблюдать правила, которые позволят скрипту корректно обработать страницу.

Если есть стартовый экран

Необходимо убрать у кнопки класс next_step и добавить ссылку #form-start. Тогда квиз отобразит приветственный экран и перейдет к вопросам только после нажатия

Примечание #1

Убедись, что отсутствуют элементы, в том числе прозрачные, которые мешают нажатию на кнопку отправки заявки

Примечание #2

Убедись, что получившаяся форма помещается на всех адаптивных экранах

Примечание #3

Убедись, что стрелочка для кнопки или иные элементы подходят в итогой странице

Примечание #4

Убедись, что на кнопке перехода между шагами стоит CSS-класс next_step

Примечание #5

Убедись, что старый кастомный скрипт квизов удален