Коротко. Кнопка добавляется двумя способами: блоком из категории «Кнопки» или элементом Button внутри Zero Block; текст кнопки задаётся в разделе «Контент», а цвет и размер — в «Настройках» блока. Ссылка может вести на страницу, на якорь блока вида #rec123456789, на всплывающую форму через #popup:имя, на телефон или мессенджер. Настройка кнопки занимает 5 минут, отправка цели в Яндекс.Метрику — ещё 20-30 минут вместе с проверкой.
Три способа поставить кнопку и чем они отличаются
Выбор способа определяет, насколько легко кнопку потом править и как её ловить в аналитике.
Стандартный блок с кнопкой. Самый быстрый вариант: в библиотеке есть категория с блоками из одной, двух или трёх кнопок, а кнопка также встроена в большинство блоков обложек и призывов к действию. Плюс — адаптив работает сам, ничего не ломается на телефоне. В разметке такая кнопка получает класс t-btn, что удобно для аналитики.
Кнопка в Zero Block. В свободном холсте вы добавляете элемент Button и ставите его куда хотите: любой размер, скругление, тень, эффект наведения, иконка. Плата за свободу — адаптив вручную: кнопку нужно проверить и поправить на каждом из пяти разрешений (1200, 980, 640, 480 и 320 пикселей). В коде элементы Zero Block получают класс tn-atom.
Кнопка отправки формы. Это часть блока формы, отдельно она не существует. Настраивается там же, где поля: текст, цвет, ширина на всю форму. В разметке у неё класс t-submit. Важное отличие: цель на такую кнопку нужно вешать не на клик, а на успешную отправку — иначе вы посчитаете и тех, кто нажал с пустыми полями.
Частая путаница новичков: текст кнопки меняется в разделе «Контент» блока, а цвет, размер, скругление и шрифт — в разделе «Настройки». Люди ищут цвет в контенте, не находят и делают вывод, что кнопку нельзя перекрасить.
Куда может вести кнопка: форматы ссылок
Поле «Ссылка» понимает не только адреса сайтов. Ниже форматы, которые закрывают почти все задачи.
| Задача | Что писать в поле ссылки | Нюанс |
|---|---|---|
| Другая страница сайта | /uslugi | Относительный адрес надёжнее полного: не сломается при смене домена |
| Прокрутка к блоку на этой же странице | #rec123456789 | Идентификатор блока виден при наведении на него в редакторе |
| Прокрутка к блоку на другой странице | /uslugi#rec123456789 | Без адреса страницы якорь работать не будет |
| Открыть всплывающую форму | #popup:zayavka | Слово после двоеточия — идентификатор, который вы задали в блоке всплывающего окна |
| Позвонить | tel:+79990000000 | Только цифры и плюс, без скобок и пробелов, иначе на части телефонов не сработает |
| Написать на почту | mailto:info@example.ru | Открывает почтовый клиент, на мобильных срабатывает не у всех |
| WhatsApp с готовым текстом | https://wa.me/79990000000?text=Здравствуйте | Номер без плюса и пробелов |
| Telegram | https://t.me/username | Работает и для канала, и для личного аккаунта |
| Скачать файл | Ссылка на файл из файлового менеджера Tilda | PDF откроется в браузере, а не скачается — предупредите об этом в тексте кнопки |
Для внешних ссылок включайте «Открывать в новом окне», для внутренних — не включайте: лишние вкладки раздражают и ломают путь пользователя в аналитике.
Кнопка, которая всегда на экране
На мобильном трафике липкая кнопка обычно оказывается самым кликаемым элементом страницы. В библиотеке для этого есть готовые блоки: закреплённая внизу панель, кнопки мессенджеров и обратный звонок — ставятся за 10 минут. Два предупреждения по опыту: панель перекрывает 60-80 пикселей внизу экрана и прячет под собой кнопку отправки формы, а связка «липкая панель + чат + всплывающее окно через 15 секунд» на маленьком экране даёт обратный эффект и тормозит страницу.
Как отправить цель в Яндекс.Метрику
Сначала счётчик: номер вставляется в настройках аналитики сайта — отдельный код в тело страницы добавлять не нужно, и дублировать его вручную нельзя, иначе визиты будут считаться дважды. Дальше есть три способа поймать нажатие, и они не равноценны.
Способ 1: страница благодарности. Самый надёжный, подходит для форм. Создайте отдельную страницу с адресом вроде /spasibo, укажите её в настройках формы как страницу после отправки, а в Метрике заведите цель типа «Посещение страниц с условием: адрес содержит /spasibo». Работает без единой строки кода и не ломается при перепубликации. Минус — только для форм, не для кликов.
Способ 2: цель типа «Клик по кнопке» в интерфейсе Метрики. Метрика умеет ловить нажатия по селектору элемента, код писать не нужно. Годится, когда кнопка на странице одна. Если кнопок несколько и селектор общий, вы получите смесь из всех нажатий и не поймёте, какая кнопка работает.
Способ 3: своя цель через JavaScript-событие. Самый точный. В Метрике создайте цель типа «JavaScript-событие» с идентификатором, например btn_hero. Затем на страницу добавьте блок с HTML-кодом (категория «Другое») и вставьте туда обработчик:
<script>
document.addEventListener(‘click’, function (e) {
if (!e.target.closest(‘#rec123456789 .t-btn’)) return;
ym(12345678, ‘reachGoal’, ‘btn_hero’);
});
</script>
Подставьте свои значения: rec123456789 — идентификатор блока с кнопкой, 12345678 — номер счётчика Метрики, btn_hero — идентификатор цели. Для кнопки в Zero Block замените .t-btn на .tn-atom. Обработчик вешается на весь документ, поэтому работает и с блоками, которые подгружаются позже. Блок с кодом достаточно поставить один раз на страницу — в нём можно собрать все кнопки сразу, добавив ещё несколько таких же условий.
Про автоматику: Tilda умеет сама сообщать в подключённый счётчик об отправке формы. Имя этого события не угадывайте — посмотрите его в отчётах Метрики после тестовой отправки и только потом стройте на нём цель. Нет события — делайте через страницу благодарности.
Как проверить, что цель срабатывает
Проверка занимает 10 минут и обязательна: половина «настроенных» целей на сайтах не работает, и обнаруживается это через месяц слитого рекламного бюджета.
- Опубликуйте страницу. Изменения в блоке с кодом не применяются, пока страница не опубликована заново. Это причина номер один жалоб «код вставил, а не работает».
- Откройте страницу с параметром отладки: добавьте к адресу ?_ym_debug=1 и откройте консоль браузера. При нажатии на кнопку в консоли появится строка о достижении цели.
- Проверьте на телефоне, а не только на компьютере. В Zero Block кнопка на мобильном разрешении может быть перекрыта другим элементом — визуально всё нормально, а нажатие уходит в пустоту.
- Загляните в отчёт по конверсиям через час — данные подтягиваются с задержкой. И убедитесь, что счётчик стоит только в настройках аналитики: продублированный вручную код считает каждое действие дважды.
Частые ошибки с кнопками
Якорь без адреса страницы. Кнопка в шапке ведёт на #rec123456789, но блок с этим идентификатором лежит на главной, а посетитель находится на странице услуги — переход просто не происходит. Пишите полный путь: /#rec123456789.
Цель на клик вместо цели на отправку. Кнопка формы нажимается всеми, включая тех, у кого не заполнен телефон. Конверсия в отчётах выглядит прекрасно, заявок при этом нет.
UTM-метки не доезжают до заявки. Чтобы понимать, из какой кампании пришёл клиент, добавьте в форму скрытые поля с именами utm_source, utm_medium, utm_campaign — тогда метки уедут вместе с заявкой в почту или CRM. Без этого весь трафик в отчётах будет выглядеть одинаково.
Кнопка меньше пальца. На мобильных высота кнопки — от 44 пикселей, отступ от соседних элементов — от 8. Тонкая кнопка на 28 пикселей теряет часть нажатий.
Текст «Отправить» и «Подробнее». Кнопка должна называть действие и результат: «Получить смету за 1 день», «Записаться на замер». Замена обезличенного текста на конкретный — самое дешёвое улучшение конверсии из всех.
Частые вопросы
Как сделать кнопку в Tilda, которая открывает форму
Добавьте на страницу блок всплывающего окна с формой и задайте ему идентификатор в настройках, например zayavka. Затем в поле ссылки нужной кнопки напишите #popup:zayavka. Так можно связать с одной формой сколько угодно кнопок по всей странице — блок всплывающего окна нужен только один. После настройки обязательно опубликуйте страницу и проверьте, что окно открывается на телефоне: в узких разрешениях длинные формы иногда не помещаются и кнопка отправки уходит за экран.
Как поменять цвет кнопки в Tilda
Цвет, размер, скругление и шрифт кнопки находятся в разделе «Настройки» блока, а не в «Контенте» — в контенте задаётся только текст и ссылка. Если хотите единый стиль на весь сайт, задайте цвет кнопок в общих настройках шрифтов и цветов: тогда все блоки подхватят его автоматически. Не подхватят те блоки, где цвет когда-то меняли вручную — в них нужно сбросить стиль.
Как поставить цель на кнопку в Яндекс.Метрике
Самый точный способ: создайте в Метрике цель типа «JavaScript-событие» с понятным идентификатором, затем добавьте на страницу блок с HTML-кодом и обработчиком клика, который вызывает reachGoal с этим идентификатором и селектором нужного блока. Проще, но менее гибко — цель типа «Клик по кнопке», настраиваемая прямо в интерфейсе Метрики без кода. Для форм надёжнее всего цель на посещение страницы благодарности: она не зависит ни от вёрстки, ни от перепубликации.
Почему кнопка на Tilda не кликается
Три типичные причины. Первая — страница не опубликована после правок, в редакторе всё верно, а на сайте старая версия. Вторая — в Zero Block кнопку перекрывает прозрачный элемент, например растянутый блок с фоном или текстовое поле большего размера: подвиньте его или измените порядок наложения. Третья — в поле ссылки лишний пробел или адрес без протокола: телефон должен быть в формате tel:+79990000000, внешняя ссылка — начинаться с https://.
Можно ли сделать кнопку, которая всегда видна при прокрутке
Да, в библиотеке есть готовые блоки закреплённой панели с кнопкой, кнопок мессенджеров и обратного звонка — настройка занимает около 10 минут, код не нужен. Проверьте после установки две вещи: панель не должна перекрывать кнопку отправки формы на мобильных, и на странице не должно быть одновременно трёх перехватчиков внимания — липкой панели, чата и всплывающего окна.
Если кнопок и форм на сайте много, а понимания, какая из них реально приносит заявки, нет — это задача не про кнопки, а про аналитику. В DZ Digital разработка сайтов сдаётся вместе с настроенными целями: каждая форма и каждая значимая кнопка размечены, заявки уходят в CRM с сохранёнными UTM-метками, и по отчёту сразу видно, какой экран страницы работает, а какой стоит переделать.