Фанатский сервис для Crystal Palace: как мы создали многофункциональную веб-платформу футбольного клуба

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

Спортивные сервисы, рассчитанные под высокие пользовательские нагрузки и множество контента, за годы работы стали одной из наших специализаций. Например, летом мы рассказывали, как делали портал для гольф-турнира The Open. Кроме этого проекта были и другие – на одном из них сфокусируемся в этом материале.

Crystal Palace – это английский профессиональный футбольный клуб из Лондона, основанный в 1905 году. Сейчас выступает в Премьер-лиге, высшем дивизионе в системе футбольных лиг Англии.

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

Crystal Palace нужно было повысить вовлечение болельщиков через веб-ресурс и сделать опыт его использования персонализированным, создать «прямой контакт» с клубом.

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

Чтобы реализовать возможность быстрой обработки и выкладки контента, в гибридном режиме использовали Static site generation (SSG) и Client side rendering (CSR) – такой подход позволил выдерживать высокую нагрузку во время матчей и больших новостей, а также дал основу для хорошей SEO-оптимизации. Подробнее о том, какие подходы к отображению контента использовать для определенных нужд проекта, читайте в другой нашей статье.

Работа с контентом в админке портала должна была быть удобной. Для этих целей хорошо подходят готовые решения – digital experience платформы. Одну из них – InCrowd – мы использовали для Crystal Palace. Вместе с ней интегрировали CRM-систему, через которую реализовывалась функциональность регистрации и логина для пользователей.

Фронтенд и бекенд реализовали на Next.js. С этим стеком сократили расходы на серверы в 10 раз.

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

Нашей задачей было встроить в веб-сервис трансляции, которые организуются партнером клуба. Видео-команда, отвечающая за прямые трансляции и нарезки, работает как бы «на другой стороне», но все, что они делают, отображается на портале Crystal Palace благодаря интеграции. Видеоплееры ограничены – избранный контент доступен только для зарегистрированных пользователей. Это ограничение работает на вовлечение и позволяет клубу узнать больше о своих фанатах.

Другая интеграция – Shop — это также отдельная платформа, позволяющая делать покупки, интернет-магазин. Его мы не разрабатывали самостоятельно, а интегрировали в платформу. Точно так же, как и раздел для покупки билетов – разработка его функциональности не была нашей задачей.

Эти интеграции сами по себе – удобство для пользователей, но помимо их подключения мы реализовали доступ к ним «в одно касание» – single sign on. То есть пользователю достаточно залогиниться только на портале Crystal Palace, чтобы автоматически получить доступ ко всем интегрированным в него сервисам. Даже несмотря на то, что каждый из них – отдельная система.

Single sign-on работает и на благо пользователям, и на пользу Crystal Palace. У клуба есть реклама (своя и спонсоров), которая показывается на страницах их платформы. Отображается она не рандомно для каждого пользователя, а исходя из его поведения на ресурсе. Механизм отображения рекламы работает согласно особой логике, основанной на том, что каждый зарегистрированный болельщик делал на платформе за последнее время.

Нашей задачей для реализации этих рекламных возможностей было встроить в этот механизм статическую генерацию контента. То есть, в целом платформа работает на гибриде из Static site generation (SSG) и Client side rendering (CSR) – на этой базе генерируются все страницы портала. А для персонализированной рекламы мы добавили дополнительный слой клиентского рендеринга, который работает отдельно и как бы поверх остального контента на странице, при этом подтягивая данные из CRM с данными пользователя.

Кроме того, на платформе есть эксклюзивный контент, который доступен после регистрации и/или приобретении платного членства. Эти особенности, благодаря single sign-on также влияют на персонализацию.

Так получилось сделать единый источник всей возможной информации о деятельности клуба, который объединяет и фанбазу Crystal Palace, позволяя получать контент самым быстрым образом. Полноценное создание платформы заняло у нас около 9 месяцев, включая аналитику и фазу активной разработки.