Custom — свой ZIP-архив
— режим лендинга, в котором вы загружаете в Tracker свой ZIP-архив с готовой HTML-страницей.
Custom — режим лендинга, в котором вы загружаете в Tracker свой ZIP-архив с готовой HTML-страницей. Tracker использует содержимое архива как основу страницы. Вёрстка, дизайн, логика, анимации — всё на вашей стороне. Tracker просто хостит страницу и подменяет ссылку на Telegram при клике.
Когда использовать Custom
Нужен брендированный дизайн с собственным шрифтом, цветами, анимациями. Сложная страница с интерактивом — квиз, калькулятор, видеоплеер, форма. b2b-сегмент или премиум-продукт — Default выглядит «слишком стандартно». Полный контроль над аналитикой — несколько счётчиков, своя CDP-интеграция. Перенос существующего лендинга с другого трекера или сайта — есть готовая страница, не хочется переделывать.
Как это работает
Чтобы кнопка перехода в Telegram работала, у элемента, который должен переводить, нужно поставить атрибут
tracker. Например:Кнопка переходаhtml
<button tracker class="cta">Открыть Telegram</button>
<a tracker class="link">Подписаться</a>Tracker автоматически подменяет
href / клик — пользователь переходит в Telegram по invite-link, который Tracker строит динамически (зависит от Source кампании). Кликов по таким элементам учитывается событие Click. Можно поставить атрибут tracker на несколько элементов — все они будут вести в Telegram, и каждый клик считается.Шаги настройки
Подготовьте ZIP-архив
Соберите страницу. В корне архива должен лежатьindex.html. Все стили, скрипты, картинки — внутри архива (по относительным путям). Подробно — см. раздел «Требования к архиву» ниже.Создайте лендинг и переключите в Custom
Загрузите архив
В разделе Custom — кнопка загрузки ZIP-файла. Выберите ваш архив, дождитесь обработки.Сохраните и протестируйте
После загрузки сохраните лендинг. Подключите его к кампании в Information — базовая идентификация кампании, пройдите Test — проверка кампании перед запуском — убедитесь что страница открывается, кнопка работает.
Требования к архиву
Требование | Что значит | Пример |
|---|---|---|
Формат | Только ZIP. Не RAR, не 7Z, не TAR.GZ. | landing.zip |
Корневой файл | В корне архива (не во вложенной папке) лежит index.html. | archive.zip / index.html |
Стили | Все CSS-файлы внутри архива. Без CDN-ссылок (или CDN-ссылки на внешние файлы — это ОК). | css/style.css |
Изображения | Все внутри архива. Относительные пути от index.html. | img/hero.jpg |
Скрипты | Все JS внутри архива. Можно подключать CDN (Bootstrap, jQuery) если нужно. | js/main.js |
Размер | Разумный — Tracker оптимизирует, но огромные ZIP (100+ MB) загружать долго. Сжимайте картинки. | < 20 MB обычно достаточно |
Структура архива (пример)
landing.zipplaintext
landing.zip
├── index.html ← обязательно в корне
├── css/
│ └── style.css
├── js/
│ └── main.js
├── img/
│ ├── hero.jpg
│ ├── logo.svg
│ └── benefits.png
└── fonts/
└── custom-font.woff2Атрибут tracker — кнопка перехода
Чтобы Tracker узнал, какой элемент кликабелен и должен вести в Telegram, поставьте атрибут
tracker на нужный элемент.Один элемент
index.htmlhtml
<button tracker class="cta">Открыть Telegram</button>Несколько элементов
Атрибут можно поставить на несколько элементов. Все они будут вести в Telegram, каждый клик считается отдельно:
index.htmlhtml
<header>
<button tracker class="header-btn">Подписаться</button>
</header>
<main>
<button tracker class="hero-btn">Перейти в канал</button>
</main>
<footer>
<a tracker href="#">Open Telegram</a>
</footer>Tracker автоматически:
- — Подменяет href / поведение клика на динамический invite-link.
- — Считает клики по любому элементу с этим атрибутом как событие Click.
- — Открывает Telegram (через app или web в зависимости от устройства).
Не пишите href вручную
Не добавляйте к элементу с атрибутом tracker свой собственный
href="https://t.me/...". Tracker подменит, но это создаст конфликт. Просто атрибут tracker — этого достаточно. Tracker сформирует переход автоматически на основе настроек кампании и Source.Примеры использования
Брендированный лендинг b2b-продукта — performance-маркетинг
CRM-провайдер для салонов. Дизайнер делает страницу с фирменным шрифтом, видео в hero, анимациями, секцией отзывов с фотографиями. Архив 8 MB. Tracker хостит, кнопка «Записаться на демо» имеет атрибут tracker — ведёт в Telegram-бота, где собираются контакты для звонка.
Квиз-лендинг — performance-маркетинг
Школа онлайн-обучения. Лендинг — интерактивный квиз («Какой курс подходит вам?»). 5 вопросов, в конце — рекомендация и кнопка «Начать обучение в Telegram». Кнопка с атрибутом tracker. Квиз-логика на JS внутри архива.
Перенос с предыдущего трекера — арбитраж
Buyer мигрирует с Voluum на Chatterfy Tracker. У него есть 5 готовых лендингов в HTML. Архивирует каждый в ZIP, заменяет старые tracking-кнопки на
<button tracker>...</button>, загружает в Tracker. Лендинги работают, переходы фиксируются.Видео-лендинг — арбитраж
Crypto-оффер с видеообращением «эксперта». Лендинг — большое HTML5-видео с автозапуском (без звука), под ним кнопка «Начать торговать». В архив включён файл видео (несколько MB), в
<video> тэг с атрибутами autoplay muted playsinline. Кнопка с атрибутом tracker.Что важно учесть
Tracker не «собирает» страницу за вас — это ваш ZIP, ваша работа. Если вёрстка сломана — она будет сломана и в продакшене. Хорошо тестируйте локально перед загрузкой. Не используйте абсолютные пути типа
/css/style.css — только относительные (./css/style.css или css/style.css). Не забывайте про responsive-вёрстку: 80% трафика мобильный. Большие картинки замедляют загрузку — оптимизируйте через сжатие (WebP, Squoosh).Частые вопросы
Связанное
Эта статья была полезна?