newUX: new User Experience

Как добавить время чтения на сайт

admin 2 мин чтения

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

Зачем это нужно

Когда человек не знает, сколько времени потребует статья, он либо не начинает читать, либо бросает. Короткая оценка "5 минут" превращает это в понятное обещание. Подробнее о пользе в статье "Время чтения: зачем показывать".

Как это работает

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

Шаг 1. Вставьте контейнер

В шаблоне статьи, там где должна стоять плашка, добавьте пустой контейнер:

<div id="reading-time-ВАШ_ТОКЕН"></div>

Токен сайта указан в панели управления. Обычно контейнер ставят рядом с заголовком статьи.

Шаг 2. Включите функцию

В панели управления сайтом отметьте функцию "Время чтения". Отдельный код для этого не нужен.

Шаг 3. Настройте расчёт (необязательно)

В настройках функции можно указать:

  • Слов в минуту. По умолчанию 200. Если аудитория читает медленнее, поставьте значение меньше.
  • Селектор контейнера статьи. Если структура страницы сложная, укажите, например, .post-content, чтобы считались слова только внутри этого блока.

Частые ошибки

  • Контейнер не найден. Проверьте, что id совпадает с токеном сайта и что контейнер есть именно на странице статьи.
  • Оценка слишком большая или маленькая. Скорректируйте значение "слов в минуту" или укажите селектор статьи, чтобы в расчёт не попадали меню и подвал.
  • Плашка не появляется. Убедитесь, что скрипт подключён и функция включена. Обновите страницу с очисткой кэша браузера.

Итог

Плашка времени чтения подключается одним контейнером и чекбоксом в панели. Вместе с оглавлением она делает длинные материалы удобнее. Если скрипт ещё не подключён, начните с инструкции "Как подключить скрипт newUX".

← Все статьи