Как мы расширили возможности статей на Tilda: лайки, просмотры и популярные публикации

Предпосылки проекта

Интернет-магазин SweetGift уже давно использует информационный раздел со статьями. В статьях публикуются материалы о подарках, клубнике, фруктовых корзинах, поздравлениях и праздничных идеях. Эти статьи привлекают посетителей из поисковых систем и помогают покупателям лучше познакомиться с продукцией.

Однако со временем возникла проблема: в стандартных возможностях Tilda отсутствует полноценная система аналитики статей, ориентированная именно на читателей.

Было невозможно:

показать количество просмотров конкретной статьи;

дать возможность поставить лайк статье;

определить самые популярные материалы;

построить рейтинг самых читаемых статей;

сформировать рейтинг самых понравившихся статей;

добавить блок "Поделиться" с современными мессенджерами;

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

Кроме того, хотелось, чтобы все работало автоматически и не требовало ручного заполнения данных.

Постановка задачи

Перед проектом были поставлены следующие задачи:

Для каждой статьи отображать:

дату публикации;

количество просмотров;

количество лайков;

примерное время чтения.

Реализовать возможность поставить лайк статье.

Не допустить накрутки лайков одним пользователем.

Сделать отдельную страницу:

ТОП 30 самых читаемых статей

В дальнейшем реализовать:

ТОП самых понравившихся статей;

Выбор читателей;

Популярное за неделю;

Новые статьи.

Все решения должны работать на Tilda без отдельного сервера.

Выбор архитектуры

После анализа различных вариантов было принято решение использовать:

• Tilda — для публикации статей;

• Supabase — как облачную базу данных;

• JavaScript — для вывода статистики и взаимодействия с базой;

• RPC функции Supabase — для безопасного обновления счетчиков.

Такой подход позволил создать практически полноценную мини-CMS статистики, не меняя существующую структуру сайта.

Структура базы данных

Для проекта была создана отдельная таблица:

article_views

В ней хранятся:

• URL статьи;

• название статьи;

• количество просмотров;

• количество лайков;

• дата первого просмотра;

• дата последнего просмотра.

Таким образом каждая статья имеет собственную карточку статистики.

Например:

/stati/chto-podarit-cheloveku

Просмотры: 1248

Лайки: 52

Дата первого просмотра:
24.06.2026

Реализация счетчика просмотров

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

• пользователь не мог случайно увеличить счетчик десятками обновлений;

• счетчик работал быстро;

• не было необходимости хранить серверные сессии.

Для этого была написана RPC функция:

increment_article_view()

Она:

1. Проверяет наличие статьи в базе;

2. Если статьи нет — создает запись;

3. Если статья существует — увеличивает счетчик просмотров;

4. Возвращает актуальные данные.

После загрузки статьи JavaScript автоматически вызывает эту функцию.

В результате читатель мгновенно видит:

👁 1254 просмотра

Реализация системы лайков

Следующей задачей стала возможность оценить статью.

Хотелось сделать это максимально просто:

❤️ Понравилась статья? Нажмите сердечко.

Однако возникла проблема:

Как предотвратить многократные лайки?

Было принято решение использовать localStorage браузера.

После установки лайка:

• значение записывается в localStorage;

• сердечко меняет внешний вид;

• повторное голосование блокируется.

Для обычного пользователя это выглядит естественно:

♡ 24

После нажатия:

❤️ 25

Верхний информационный блок статьи

Был разработан компактный блок:

Обновлено: 24.06.2026

⏱ 6 мин

👁 1254

❤️ 52

Причем:

• дата берется автоматически;

• время чтения рассчитывается автоматически;

• просмотры обновляются в реальном времени;

• лайки отображаются сразу после изменения.

Адаптация под мобильные устройства

Отдельной задачей стала мобильная версия.

На смартфонах обычные hover-подсказки не работают.

Поэтому была реализована собственная система подсказок:

При нажатии:

👁 1254

появляется:

Количество просмотров: 1254

При нажатии:

❤️ 52

отображается:

Количество лайков: 52

Это работает одинаково:

• на iPhone;

• Android;

• планшетах;

• компьютерах.

Нижний блок статьи

После прочтения статьи пользователь чаще готов взаимодействовать с контентом.

Поэтому был создан отдельный блок:

👁 Просмотры

↗ Поделиться

♡ Лайкнуть

Поделиться статьей

В меню доступны:

• Telegram;

• ВКонтакте;

• MAX;

• Копирование ссылки.

Это особенно важно, так как многие статьи имеют вирусный потенциал:

• Что подарить мужчине;

• Что подарить женщине;

• Как подписать открытку;

• Идеи подарков;

• Поздравления.

Создание рейтинга популярных статей

Следующим этапом стало создание отдельной страницы:

ТОП 30 самых читаемых статей.

Система автоматически:

• сортирует статьи по просмотрам;

• формирует рейтинг;

• выводит название статьи;

• показывает количество просмотров.

Например:

1. Как отличить мужские и женские кусты клубники
   👁 41

2. Клубника и земляника: в чем разница
   👁 40

3. Что подарить мужчине, у которого всё есть
   👁 25

С какими сложностями пришлось столкнуться

1. Ограничения Tilda

Tilda не предназначена для построения таких систем.

Пришлось:

• писать собственные JS-компоненты;

• ждать загрузки блоков Tilda;

• учитывать особенности мобильной версии;

• решать конфликты со встроенными скриптами.

2. Разные типы статей

На сайте статьи создаются разными способами:

• классический редактор;

• Zero Block;

• T123;

• комбинированные страницы.

Из-за этого не все статьи имеют одинаковую структуру.

Пришлось разработать универсальную систему определения данных статьи.

3. Работа на мобильных устройствах

Обычные подсказки:

на смартфонах не работают.

Поэтому была разработана отдельная система всплывающих уведомлений по нажатию.

Что получилось в итоге

В результате была создана полноценная система аналитики контента, которая позволяет:

✓ автоматически считать просмотры;

✓ собирать лайки;

✓ выводить дату обновления;

✓ рассчитывать время чтения;

✓ создавать рейтинги популярных статей;

✓ формировать список любимых статей читателей;

✓ добавлять кнопки поделиться;

✓ использовать статистику для SEO и внутренней перелинковки;

✓ полностью работать внутри сайта на Tilda без отдельного сервера.

Практическая польза для бизнеса

Для SweetGift это решение стало не просто красивым оформлением статей.

Теперь можно точно понимать:

• какие темы интересуют посетителей;

• какие статьи приводят покупателей;

• какие материалы чаще сохраняют и пересылают;

• какие статьи стоит развивать дальше.

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