Тикер криптовалют для сайта

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

Тикер не заменяет график и не торгует. Он читает тот же снапшот или короткий WS-поток, что и основная лента. Если в тикере BTC один, а на карточке другой last из другого API, доверие к сайту падает быстрее, чем вы успеете объяснить «это же просто виджет».

Параметры, которые задают сразу

• Список монет и пар (USDT, USD, иногда BTC-пары).
• Интервал обновления или подписка WebSocket.
• Поля: price, change24h, опционально объём.
• Цвета роста/падения под бренд, плюс нецветовой знак +/-.
• Лимит элементов на мобиле — не тащите 40 пар в одну строку.

Полная витрина: CoinMarket-скрипт. Источник: котировки, API. Живой поток: WebSocket.

REST или сокет

Для 5–15 пар в шапке достаточно polling раз в несколько секунд. Сокет оправдан, если тикер на той же странице, что терминал, и вы уже держите соединение. Не открывайте отдельный WS только ради бегущей строки на маркетинговом лендинге — получите лишнюю точку отказа.

1. Проверьте, что после загрузки цены не остаются нулями дольше секунды-двух.
2. Сверьте одну пару с карточкой/таблицей.
3. Отключите API — тикер должен показать состояние ошибки, а не «$0.00».

Вёрстка и UX

Бегущая строка раздражает, если её нельзя поставить на паузу при наведении — особенно когда рядом важные CTA. Статичная горизонтальная лента с обновлением цифр часто спокойнее для брокерского лендинга. На мобиле приоритет: 3–5 пар или скролл без авто-анимации, которая ворует CPU.

CLS: зарезервируйте высоту блока, чтобы шапка не прыгала после прихода JSON. Шрифты моноширинные для чисел уменьшают дёрганье разрядности.

Связка с графиком и индексом

Клик по паре в тикере логично ведёт на карточку с графиком. Не ведите на пустой поиск. Графики: графики крипты, библиотека: TradingView. Индекс настроения рядом — отдельный блок: Fear & Greed, не смешивайте в одну кашу с ценами.

Брокерский контекст

На white-label лендинге тикер работает как социальное доказательство «рынок здесь». Кнопка регистрации рядом не должна обещать, что клик по тикеру уже открыл сделку. Торговля — в кабинете и терминале: white label, БО, Forex, терминал.

Если тикер показывает реальные курсы, а пользователь на демо — так и подпишите в кабинете. Курсы рыночные, баланс виртуальный: демо-счёт.

Производительность и кэш

Отдавайте тикеру узкий JSON только с нужными парами. Не скармливайте весь рынок, чтобы фронт отфильтровал. Кэш 1–3 секунды на edge допустим. При 429 апстрима сохраняйте last known с пометкой времени — лучше, чем обнуление.

Логируйте частоту ошибок загрузки виджета. Тикер в шапке видят все; молчаливая поломка = «сайт мёртвый» в глазах клиента поддержки.

Приёмка

Сдайте список пар, URL endpoint, интервал, мобильный скрин, поведение при ошибке API, совпадение цены с таблицей. Проверьте тёмную/светлую тему бренда. Правка HTML шапки на VDS: MicroDrive, MicroEditor.

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

Контент и юридические мелочи

Подпись «данные информационные» рядом с тикером на лендинге брокера снижает риск ожидания, что виджет — уже торговый стакан. Не используйте чужие товарные логотипы монет без политики заказчика; текст тикера часто достаточнен. Процент изменения считайте из того же окна, что таблица (24h), и подпишите окно — иначе спорят «у вас +3%, на бирже +1%» из-за другого интервала.

A/B по набору пар: для крипто-витрины логичен топ по капитализации; для Forex-лендинга тикер крипты может вредить фокусу. Не копируйте один и тот же блок на все продукты линейки без мысли.

Технические детали фронта

Обновляйте DOM точечно (textContent цены), не перерисовывайте всю бегущую строку каждый тик — иначе анимация и accessibility-ридеры сходят с ума. Для screen readers достаточно aria-live="polite" на контейнере с редким обновлением, не на каждом тике раз в 200 мс.

Если тикер встраивают iframe на партнёрский сайт, ограничьте X-Frame-Options/CSP по договорённости и готовьте отдельный lightweight endpoint. Чужой сайт с тяжёлым сокетом на ваш origin станет источником нагрузки.

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

Редакционный набор пар

Для СНГ-витрины часто берут BTC, ETH, плюс пару локально популярных альтов и USDT-курсы. Не превращайте тикер в энциклопедию. Раз в месяц пересматривайте набор по фактическим кликам на карточки. Если пара отключена в API, убирайте из тикера автоматически, а не ждите жалоб.

Ночные нули из-за окна обслуживания помечайте «нет данных», не рисуйте last=0.

Критерий сдачи тикера: набор пар, endpoint, ошибка API без нулей, клик в карточку, совпадение цены с таблицей, мобильная высота без CLS. База рынка — CoinMarket и quotes.

Сопровождение тикера

Раз в месяц чистите пары с нулевым CTR. Проверяйте контраст темы после редизайна лендинга. Если маркетинг просит «мигающий красный», откажите в пользу читаемости — тикер живёт на всех страницах и быстро надоедает в агрессивной анимации. Технический долг: удалить хардкод символов из шаблона в пользу API списка.

Проверьте тикер при включённом adblock/privacy: если падает только из-за имени класса `tracker`, переименуйте — анекдот из практики, но обидный.

Финальная проверка перед продом: тикер на главной, в карточке и на лендинге регистрации показывает один и тот же last по BTC. Если где-то кэш отдаёт старое — чините ключ кэша, не «цвет стрелки». После этого тикер можно считать сданным.