
Как собрать преленд для Telegram-канала через Tilda и привязать пиксель к кнопке
Если вы нацелены на увеличение аудитории своего Telegram-канала через рекламу в Facebook Ads, то это вполне рабочий способ для привлечения подписчиков на схемный трафик. Конечно, организация всего процесса — от ведения канала до создания контента и легенды — требует усилий, но сегодня обсудим лишь технический момент: как быстро собрать простую страницу-прокладку и настроить на ней пиксель.
Заходим в Тильда и создаем Zero Block
Для реализации этого метода потребуется платная версия конструктора Tilda, которая открывает доступ к расширенному функционалу. Заходим в личный кабинет, выбираем Zero Block — он позволяет полностью настраивать структуру страницы по своему усмотрению. Удаляем все элементы, которые могут быть предустановлены, так как весь дизайн будет разрабатываться с нуля.
Для визуальной части идём в Google, вводим запрос типа: “Telegram background” или “фон для Telegram”, скачиваем подходящее изображение и загружаем его в редактор Zero Block. Всё максимально просто — Tilda интуитивно понятна даже новичкам.
Создаем страницу перехода в Telegram
Первым делом установите расширение для браузера, которое позволяет считывать цветовые коды элементов на странице. Затем откройте стандартную прокладку для Telegram — достаточно перейти на любой канал через веб-версию платформы.
Теперь с помощью установленного инструмента скопируйте все цветовые параметры, включая точные оттенки интерфейса. Это позволит воссоздать дизайн, максимально приближенный к оригиналу, что обеспечит визуальную целостность и доверие аудитории.
В нашем Zero Block приступаем к деталям. В левом верхнем углу кликаем на «+» и выбираем опцию “Add Shape”. С помощью установленного расширения настраиваем цвет фона под иконку и название канала, чтобы максимально совпадать с оригинальным дизайном. Подгоняем размеры элемента, а также регулируем скругления углов — главное, чтобы всё выглядело гармонично.
Теперь загружаем логотип вашего Telegram-канала. Обязательно округляем изображение, уменьшаем его размер так, чтобы оно эстетично вписывалось в общий стиль, и добавляем описание. Удаляем всё лишнее: ссылки на контакты, ненужные элементы и отвлекающие детали.
Далее переходим к кнопке. Через ту же панель в левом верхнем углу добавляем её на страницу. Настраиваем цвет, размер шрифта и форму так, чтобы они были идентичны оригиналу. После этого вставляем ссылку на нужный канал.
Не забудьте о важности мобильной версии. Чтобы добиться точного соответствия с оригинальным дизайном, в веб-версии Telegram используйте инструмент «Посмотреть код» и выберите отображение для разных устройств. Затем воспроизведите это оформление в Tilda, чтобы ваш прелендинг выглядел идеально на любом гаджете.
Сохраняем изменения и нажимаем «Опубликовать». Прописываем доменное имя. Кликаем «Сохранить и продолжить»
В настройках страницы добавляем название и описание.
Переходим в раздел «Дополнительно» и выбираем пункт «Редактировать код».
Настройка Facebook Pixel
Для чего нужен пиксель? Это инструмент, который отслеживает действия пользователей на вашей прокладке и помогает оптимизировать рекламные кампании. Если у вас ещё нет пикселя, сначала найдите подробную инструкцию по его созданию. Если же он уже настроен, переходим к делу.
Открываем Event Manager, заходим в раздел Data Sources, выбираем ваш пиксель и кликаем на “Manage Integration”. Следуем инструкциям, аналогичным тем, что показаны на скриншотах ниже.
Получаем код пикселя и вставляем его в настройки страницы в Tilda.
Обновляем сайт и публикуем изменения, чтобы передача данных в Facebook началась.
Теперь идём в Event Manager, открываем вкладку “Settings”, и находим кнопку “Set Up Events”. В появившемся окне указываем ссылку на ваш прелендинг.
Для отслеживания действий пользователей привязываем событие к кнопке перехода. Выбираем “Track a new button”. Нажимаем на кнопку, ведущую в Telegram-канал.
В открывшемся меню выбираем событие, например, “Lead” (хотите — можете протестировать другие варианты). Сохраняем изменения.
Вот и все! Теперь у вас есть рабочий прелендинг с настроенным пикселем, причём для этого не понадобилось копаться в коде или заниматься версткой. А если вы разбираетесь в HTML, можно использовать готовый шаблон, адаптировав его под свои задачи.
Дисклеймер! Схема взята у Хокаге, за что ему отдельное спасибо 🤝