Кейс: FYI Music News

FYI Music News

FYI Music News - это ежедневно обновляемый веб-сайт, пишущий про музыку и о музыкальной индустрии Канады. Сайт предоставляет расширенные функции: легкая система создания новостной рассылки редактором сайта простым выбором статей, которые должны попасть в очередной дайджест, система подачи и размещения рекламных объявлений пользователями на страницах журнала, актуальный список музыкальных чартов с разделением по жанрам, а также еженедельно обновляемый раздел “Карьера”.

О FYI Music News

FYI Music News - это сайт, обновляемый по будням. Его информационный бюллетень подписан профессионалами музыкальной индустрии и неофитами, государственными учреждениями, ассоциациями, музыкантами и поклонниками музыки - он предлагает плотно написанный дайджест ключевых событий и новостей дня в Канаде и за ее пределами в начале каждого рабочего дня. Веб - сайт FYI предоставляет расширенные возможности, в том числе еженедельный раздел “карьера” и колонки интересов музыканта, композитора, журналиста и поклонника джаза Билла Кинга.

FYI Music News

Страница новостей

Вызов

Старый сайт FYI Music News не имел адаптивного дизайна, работал медленно, имел запутанную систему таксономии и контента и не имел функции расширенного поиска, что со временем привело к сложностям для редакторов и посетителей сайта. Такой формат не позволял посетителям находить информацию по предыдущим статьям, масса HTML кода в статьях мешала редакторам перепрофилировать контент по-новому, и у поклонников журнала не было возможности участвовать в жизни сайта.

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

FYI Music News

Страница возможностей

Решение

Следуя анализу архитектурных и бизнес-требований, мы разработали и реализовали Drupal сайт, включающий в себя уникальный набор кастомных модулей, библиотек и сторонних сервисов, связанных в общую экосистему.

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

Работая в тесном контакте с представителями заказчика нам удалось найти и реализовать решения для улучшения процесса управления и редактирования контента для персонала журнала. Мы использовали Media Browser для управления медиа-файлами, библиотеку Plupload для загрузки массивов изображений простым перетаскиванием, WYSYWYG редактор CKEditor со специально разработанными и настроенными плагинами для использования шаблонов разметки, которые позволяют одним щелчком мыши правильно структурировать текст на странице.

Сторонние сервисы, такие как Disqus и Solr, были использованы для снижения нагрузки на сайт во время пикового трафика, что дает посетителям сайта возможность легко найти интересующую их статью, оставить отзыв о ней или задать вопрос и получить быстрый ответ. Наконец, отзывчивый визуальный дизайн сайта привел все новые функции и полное видео каждого эпизода к мобильным и планшетным пользователям.

Новый отзывчивый (responsive) интерфейс дал возможность пользователям насладиться всеми новыми функциями (features) и полноэкранным видео не только на стационарных компьютерах, но и на мобильных устройствах.

FYI Music News

Страница чарта

FYI Music News

Страница музыки

Новостная рассылка

На начальном этапе перед нами были поставлены следующие требования к созданию новостной рассылки:

  • Удобный выбор материалов для включения в рассылку;
  • Встраивание рекламных объявлений в рассылку;
  • Функция предварительного просмотра с перетаскиванием тизеров выбранных материалов для сортировки;
  • Список доступных объявлений должен быть ограничен объявлениями, которые являются активными, опубликованными и отформатированными на рассылку;
  • Уникальное имя (subject) для каждой рассылки, которое будет отражать содержание.
  • Надежность доставки электронной почты и система отслеживания маркетинговой статистики.

Для обеспечения надежности доставки писем и отслеживания маркетинговой статистики мы выбрали интеграцию с сервисом доставки электронной почты SendGrid. Рассылка осуществляется посредством использования REST API службы доставки почты SendGrid - она может обрабатывать большие объемы электронной почты, обеспечивая при этом подробные и настраиваемые отчеты, а также возможность масштабирования и повышения доступности.

С помощью связки Views + VBO мы создали новое представление, выводящее весь опубликованный контент доступных для включения в рассылку типов и активных рекламных объявлений с возможностью сортировки по различным параметрам, а также разработали новую операцию по созданию html разметки будущего письма на основании отмеченных статей.

Создание рассылки проходит в несколько этапов с помощью мульти-степ формы: на первом этапе редактор выбирает статьи, которые попадут в рассылку, на втором этапе с помощью перетаскивания тизеров определяется порядок следования статей, на третьем редактор видит содержимое рассылки в том виде, как оно будет показано пользователю, здесь он имеет возможность добавить subject и внести изменения в заголовки статей или их тизеры “на лету” - эти изменения затронут только создаваемое письмо, но не отразятся на исходном контенте.

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

Чарты

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

Данные предоставляются сторонними сервисами: Billboard API и Nielsen API, для интеграции с которыми реализовано обращение к API с сохранением и кешированием полученных результатов.

Для ускорения загрузки страниц чартов и отображения информации мы использовали всю мощь Entity API и создали новый тип сущности - Чарты, которые хранят в себе информацию об актуальной позиции сингла в рейтинге и к тому же легко интегрируются с представлениями, что позволило нам быстро реализовать систему фильтрации чартов по типам и жанрам.

Система управления рекламой

Перед нами была поставлена задача по реализации системы подачи рекламных объявлений пользователями сайта и адаптивному отображению этих объявлений посетителям в зависимости от размера экрана устройства. В качестве ядра для управления рекламными блоками был выбран контрибный модуль SimpleAds.

Совместно с клиентом мы определили основные области расположения рекламных блоков и их размеры, а также точки останова, на которых размеры блоков должны изменяться и подстраиваться под размеры экрана девайса. Мы создали многоступенчатую форму - конструктор подачи заявления на размещение рекламного объявления, в которой пользователь указывает свои контактные данные, а также выбирает тип отображения рекламы и желаемые области, а затем может загрузить подготовленные рекламные баннеры необходимых размеров для каждой точки останова на выбранных рекламных областях.

Для гарантированного отображения рекламных блоков при включенном блокировщике рекламы был значительно переработан начальный шаблон отображения, а также задействовано динамическое образование css-классов контента, что позволяет обходить создаваемые рекламные фильтры и всегда отображать активные рекламные объявления.

Поиск

Для организация поиска на сайте используется проверенная и надежная связка модулей Search API + Search API Solr + Views. Вывод результатов поиска легко настраивается с помощью представлений, а для релевантности поиска по совпадению и дате публикации мы использовали boost функции поискового движка Solr.

С помощью созданной формы настройки были подобраны оптимальные параметры по выдаче наиболее свежих и достоверных результатов поиска.

Отчеты

Для удобного и простого мониторинга сайта администратором мы внедрили систему отчетов, которая позволяет получать данные о работе магазина:

  • Создает таблицу на основе отчетов по продажам с фильтрацией по статусу заказа и диапазону дат. Отчет может показывать статистику продаж в разрезе дня, недели, месяца.
  • Создает таблицы с наиболее активными клиентами, наиболее продаваемыми продуктами и способами оплаты.
  • Строит графики для всех вышеуказанных отчетов.
  • Позволяет экспортировать данные в CSV.

FYI Music News

Страница поиска

FYI Music News

Страница новой песни

Вывод

В результате после запуска новая структура контента и адаптивный дизайн открыли больше возможностей для редакторов, посетителей и инвесторов сайта. Продвинуть важную новость или самую обсуждаемую статью на главную страницу так же легко, как щелкнуть пальцами, а рекламные объявления спонсоров и инвесторов легко размещать, и они всегда видны посетителям, какими бы девайсами они не пользовались.

Нам удалось воплотить в реальность все начальные требования клиента и сделать даже больше! То, что раньше занимало пару часов кропотливой работы редактора, теперь можно выполнить в пару щелчков мыши.