Een schaalbaar videoplatform voor SBS Belgium

Met programma’s als Temptation Island, De Mol en De Slimste Mens lokt SBS Belgium meer en meer online kijkers. Het was voor ons een hele uitdaging én een eer om het online videoplatform te ontwikkelen voor de drie zenders op vier.be, vijf.be en zestv.be.

Deze case in het kort:

  • 3 verschillende sites en domeinen op één codebase

  • Livestreaming video & online programma’s herbekijken

  • Een Insights-dashboard dat data analyseert uit  Google Analytics, Amazon Athena en CIM-cijfers

  • Automatiseren van huidige content- &videoflows die het de redactie een stuk makkelijker maken

  • een geavanceerde en secure login flow via Amazon Cognito

A. De eerste twee jaren van het project

Begin 2017 werden met Wieni we gecontacteerd om het hele platform onder handen te nemen. Het nieuwe TV seizoen van Vier zou eind augustus worden gelanceerd, we hadden dus welgeteld 6 maanden. Lijkt krap voor het hele traject, gaande van design workshops, interface design, backend en frontend development, content import, testing en launch. Maar we zaten al snel op dezelfde golflengte met SBS, we kwamen geen verrassingen tegen, dus voelden we ons beiden comfortabel om de eerste versie vervroegd te lanceren.

Het Wieni-team om vroeg in de ochtend onderweg naar SBS Belgium voor de grote launch

Het Wieni-team om vroeg in de ochtend onderweg naar SBS Belgium voor de grote launch

Juli 2017: vervroegde lancering versie 1

Deze zogenaamde “cold launch” was ideaal in een rustige zomerperiode. Geen toeters en bellen bij de lancering, maar toch al meteen meten, analyseren en feedback ontvangen van bestaande gebruikers. Een ideale periode om langs onze kant de nodige finetuning te doen, en voor de SBS redactie om alle content op punt te stellen.

Twee jaar en 48 releases later

Ondertussen zijn we minder dan 48 maanden verder, en hebben we 48 design- en developmentsprints achter de rug. Dat wil zeggen: continu bijsturen, herontwerpen en ontwikkelen. Verbeteren wat er is, en ontwikkelen wat ontbreekt.

We geven je hier een overzicht van de voornaamste challenges bij het hele project.

B. Drie Drupal themes, één base theme

Dit project voor SBS Belgium coverde aparte websites voor de 3 TV-zenders : Vier, Vijf en Zes. Alledrie hun eigen huisstijl, branding en doelpubliek. Maar wel met dezelfde bouwstenen voor backend en frontend. Dat vroeg om een component based design aanpak, voor maximale consistentie in UX en herbruikbare functionaliteiten. Maar waar het uiteindelijke “laagje verf” per merk toch totaal kon verschillen.

Een gedeelde frontend configuratie via Webpack

We gebruiken voor het project één base theme, Drupack. Deze theme bevat de (base) templates voor alle sites, alle javascript en alle styles. In deze base theme, zit ook de default configuratie voor alle subthemes. Elke site (VIER, Vijf en Zes TV) heeft namelijk zijn eigen subtheme. De files voor deze themes zitten, aangezien de configuratie in Drupack zit, mee in Drupack. In Webpack definiëren we hiervoor vier bundles: de JS/CSS voor alle sites (global) en de JS/CSS voor elke eigen subsite (vier/vijf/zes).

webpack.config.babel.js

entry: {
   global: './bundles/global.js',
   vier: './bundles/vier.js',
   vijf: './bundles/vijf.js',
   zes: './bundles/zes.js',
},

De output van deze bundles (of libraries), de CSS en JS, definiëren we in Drupack. Elke site heeft een eigen library met zijn styles. In de libraries van Drupack vinden we dus de globale styles en de verschillende styles voor de subthemes.

drupack.libraries.yml
global-styles:
   css:
       base:
           public/assets/global.css: { preprocess: false }

vier-styles:
   css:
       base:
           public/assets/vier.css: { preprocess: false }

De *.info file van een afzonderlijke subtheme, bv. voor VIER, moet dus gewoon deze styles en/of javascript importeren.

vier.info.yml
name: Vier
type: theme
libraries:
   - drupack/vier-styles
   - vier/vier-fonts

De fonts specifiek voor VIER, laden we via Google Fonts in. Aangezien dit een externe library is, kunnen we deze opnemen binnen de custom theme van VIER.

vier.libraries.yml
​​​​​​​vier-fonts:
 css:
   base:
     https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700|Poppins:300,400,700,800,900: { external: true }

Onze eigen Bootstrap-setup

Drupack functioneert in dit project als base theme, de start van elk van de custom themes. Elke component die we schrijven, heeft een default en drie (mogelijke) variaties (voor elk van de zenders). Dankzij !default variables in SASS, kunnen we een basis beschrijven in Drupack en deze overschrijven in elke van de subthema's. Hieronder een voorbeeld van de header.

Werken met !default variables

Aangezien de header een andere kleur heeft op elk van de zenders, maken we van de achtergrondkleur een variabele.

drupack/assets/components/header/_header.variables.scss
$ui-header-background-color: blue !default;

We importeren vervolgens deze file met variable(s) en gebruiken deze als achtergrondkleur.

​​​​​​​drupack/assets/components/header/header.scss
@import 'header.variables';

.header {
   background-color: $ui-header-background-color;
}

Wanneer we deze variabele echter een waarde toekennen voor we de default aanroepen, zal deze default niet worden gebruikt. Dit komt aangezien SASS redeneert: We moeten enkel de default gebruiken als deze variabele nog niet bestaat. We gaan hier dus op dezelfde manier als Bootstrap te werk.

vijf/assets/vijf.scss
@import 'header/_header.variables.vijf.scss';
@import 'components/header/header';
vijf/assets/components/header/_header.variables.vijf.scss
$ui-header-background-color: hotpink;

Op deze manier, kunnen we voor elke component de kleur, font, witruimte, … aanpassen per zender.

Een zender wilt iets afzonderlijk? Dat kan!

Wilt een zender een bepaalde feature op pagina die niet op de andere sites terug komt, dan kunnen we deze styling en javascript afzonderlijk inladen in de bundle van deze site. Ziet een bepaalde component er helemaal anders uit? Dan laden we deze niet in en overschrijven we deze component volledig.

Rebranding van het merk? Aanpassingen in de huisstijl hoeven geen volledige frontend rework te zijn.

Een jaar na de lancering van de nieuwe site, voerde SBS een rebranding door van de zenders VIER en VIJF. Deze aanpassing moest uiteraard ook vlot kunnen doorvloeien naar de site. In theorie kwam dat neer op het aanpassen van de variabelen voor de componenten van VIER en VIJF. Enkele componenten, zoals de cards die je op de homepage van VIJF ziet, werden toen overschreven. Op die manier kunnen we deze nog dichter bij de huisstijl van de zenders brengen.

Custom pagina’s voor specifieke programma’s

Het komt al eens voor dat er een wedstrijd, een actie of een speciale aankondiging loopt. Zo maakte voor de aankondiging van De Slimste Mens Ter Wereld, een kleine webapplicatie in de site, waarmee je jezelf - via een foto die je maakte met de webcam, of de camera van je smartphone - kon omtoveren tot paus. Beschouw het als een Snapchat filter, maar dan in de browser. Voor het programma Hotel Romantiek was een overzichtspagina nodig met alle kandidaten en een biografie. Dit soort aanpassingen kunnen we eenvoudig ontwikkelen voor één van de sites, ook al delen deze dezelfde codebase.

Naast deze integraties binnen de website, ontwikkelende we ook enkele kleine websites los van het platform. Denk maar aan enkele websites voor de aankondiging van het nieuwe seizoen De Mol.

Een code voorbeeld van de header component

C. Authenticatie via Amazon Cognito

Een ruime selectie van de programmatie van SBS Belgium kan je -als je aangemeld bent- ook op de website bekijken. Voor enkele programma’s waaronder bijvoorbeeld Temptation Island of De Mol zorgt dit steeds voor korte maar hevige pieken in bezoekersaantallen. In het verleden konden deze pieken door het standaard authenticatie mechanisme van Drupal onvoldoende werden opgevangen, waardoor de hele website niet of slecht bereikbaar werd.

Voor de nieuwe website werd daarom gekozen voor Amazon Cognito als authenticatie mechanisme. Volgende punten speelden mee in deze keuze:

  • Het volledig registratieproces/login procedure kan afgehandeld worden op frontend, dus binnen de browser van de bezoeker. Er is geen aparte communicatie naar de backend server nodig, waardoor de belasting op de server los staat van de bezoekersaantallen op de website.
  • De authenticatie tokens van Cognito kunnen ook worden ingezet voor het benaderen van andere Amazon Web Services (bv S3, API Gateway, …)
  • De kostprijs is afhankelijk van het aantal maandelijks actieve bezoekers, tov van fixed tarieven zoals bij bv gigya of Auth0, zodat tijdens rustigere maanden de prijs behoorlijk lager ligt.

De implementatie werd volledig uitgevoerd op frontend, binnen React/Javascript. Er zijn een aantal customisaties gebeurd specifiek voor SBS Belgium (bijvoorbeeld een login scherm met enkel een e-mail adres) die worden ondervangen door een aantal AWS Lambda scripts. De gebruikersgegevens worden ook in twee richtingen synchroon gehouden met de Selligent CRM implementatie van de klant.

Ondanks deze voorzorgen bleek tijdens de eerste zware bezoekerspiek dat de customisaties zorgden voor dermate verhoogde requests op enkele specifieke API endpoints zodat de limieten hiervoor ruim overschreden werden. Het gevolg hiervan was dat een aantal gebruikers niet meer kon aanmelden op piekmomenten, maar foutmeldingen kreeg (voor reeds aangemelde gebruikers stelde het probleem zich niet)

Na overleg met AWS zijn het aantal toegelaten requests/second op deze API endpoints gevoelig verhoogd. De problemen hebben zich hierna niet meer gesteld, maar er zijn dus wel enkele lessen uit getrokken.  

Online Video & Livestreams

HTML videoplayer via THEOPlayer

De belangrijkste content op de site zijn de video’s. De video’s worden afgespeeld met THEOPlayer, een video player die we - dankzij zijn flexibiliteit - telkens de huisstijl van de respectievelijke zender hebben gegeven. De video player staat ons toe zowel gewone, opgenomen programma’s af te spelen, alsook live streaming te tonen via de site.

Livestreaming

Het tv-landschap is de laatste jaren enorm veranderd, en sinds 2015 is het ook bij de zenders van SBS Belgium mogelijk om content gratis online te bekijken. Maar naast de standaard Video On Demand (VOD) kwam de vraag of het ook mogelijk was om via de sites livestreams uit te kunnen zenden.

In samenwerking met de video-partner van SBS werden er enkele proof-of-concepts uitgewerkt, waarna de keuze viel op een implementatie aan de hand van het RTMP protocol. Daar dit protocol standaard niet toelaat om rechtstreeks video streams te tonen in web browsers (althans, niet zonder Flash 😱), zetten we deze om naar streams die werken met HLS, een protocol dat naast VOD ook kan werken met livestreams.

Voor het effectieve omzetten maken we gebruik van AWS Elemental MediaLive, dat in staat is om bijna elke videobron te transcoderen naar HLS. MediaLive kan als output zijn data naar Amazon S3 sturen, die in combinatie met een Amazon Cloudfront voor zeer hoge schaalbaarheid en uptime zorgt.

De videopartner van SBS Belgium wordt hierdoor ook ontlast van het opzetten van zware infrastructuur aan zijn kant daar er maar 1 consumer is van zijn originele videostream (nl. MediaLive) en er ook geen verdere piekbelasting kan optreden naar zijn infrastructuur toe. Een bijkomende extra feature is dat MediaLive encoding kan doen naar meerdere output-streams. Zo kunnen we een 540p, 480p, 360p en 224p kwaliteit aanbieden dat automatisch geselecteerd wordt op basis van je internetsnelheid en/of device.

Een probleem dat zich hier voordeed was de manier waarop AWS Elemental MediaLive de RTMP stream, zoals voorzien door de video partner, probeerde uit te lezen. Na overleg met de video-partner zijn zij (en wij) geswitched van consumer protocol, waarna alles vlot werkte.

Ten slotte hebben we dit alles geprogrammeerd met de API's van AWS en in een aparte admin-module gegoten op de site. Op die manier kan de redactie van VIER, VIJF en ZESTV zelf livestreams beheren en is er geen tussenkomst van Wieni meer nodig.

Video uploadflows in de backend

Na ingebruikname van de website bleek dat er voor een aantal processen die gebruik maakten van de website een gebrek aan afdwingbare workflow bestond.

We hebben een aantal van deze processen ondertussen verder geautomatiseerd, waardoor de redactie meer tijd kan besteden aan de creatie van content. Ook het publiceren van video's vlotter en met minder kans op fouten. De meeste van deze workflows maken gebruik van communicatiekanalen zoals e-mail en/of SMS om de juiste persoon op de hoogte te brengen van de te nemen stappen binnen de workflow.

Enkele voorbeelden van deze workflows zijn:

  • Waarschuwing versturen naar de editor van video-pagina’s die werden aangemaakt maar waar de gekoppelde video nog niet opgeladen is een zekere tijd na het online komen van de pagina.

  • Waarschuwing versturen naar de sales-afdeling nadat een nieuw programma gepubliceerd wordt.

  • Waarschuwing sturen naar redacteurs indien een programma geen WhatsOn id heeft (de code die gebruikt wordt om het programma te koppelen aan de TV-gids)

  • ...

Personal notifications in de browser

D. Personal Notifications & Insights Dashboard adhv tracking

Het gedrag van de bezoekers van de website wordt voortdurend gemonitord. Deze monitoring vormt de basis van twee functionaliteiten op de website: Notifications voor de gebruiker, en een dashboard voor de beheerders van de website.

Personal Notifications

Op basis van een aantal parameters wordt voor elke bezoeker een profiel samengesteld dat een weging toekent aan het type/soort programma dat de voorkeur van de bezoeker wegdraagt. Dit profiel wordt dan regelmatig gematched met de actuele content van SBS waardoor er een voor de gebruiker gepersonaliseerde lijst van aanbevelingen ontstaat: zijn/haar notifications. Deze verschijnen rechtsboven op de website

Insights Dashboard

Het dashboard geeft een overzicht van de verzamelde data en is als een react component geïntegreerd in het CMS.  Er wordt gebruik gemaakt van verschillende data providers. Google analytics voorziet gegevens over het algemene user gedrag zoals page views.  Eigen tracking zorgt voor gedetailleerde informatie over de interacties met de videos (play, pause, seek, …) en socio demografische gegevens. CIM data wordt gebruikt voor algemene video view metrics.

De geaggregeerde data wordt gevisualiseerd in het dashboard dat overzichten geeft van een aantal vaste periodes (1 week, 3 maand en 1 jaar), maar laat ook toe specifieke periodes op te vragen.  Er wordt initieel een overzicht gegeven van alle programma’s en deze hebben een detailpagina waar op het niveau van video's en artikels wordt gewerkt.

De getoonde data combineert de verschillende bronnen en geeft een overzicht van welke video’s goed werken voor een programma en waar er nog groeimarge is. Verder wordt deze data ook gebruikt om bepaalde content exports te verrijken. 

Voor het aggregeren van de data wordt er gebruikt gemaakt van een AWS lambda service die dagelijks de data binnen trekt van de verschillende providers. Deze daily slices vormen de basis van de overzichten.  Voor de custom tracking wordt gebruikt gemaakt van AWS athena om queries te doen op de logfiles die door Kinesis Firehose gegenereerd worden in S3 Buckets. Op hetzelfde moment worden de periodes berekend op basis van deze slices.  Bepaalde data kan niet gewoon opgeteld worden (unieke gebruikers over een bepaalde periode), daarom wordt er ook gebruikt gemaakt van algoritmes zoals hyperloglog om een zo correct mogelijk beeld weer te geven. Alle data en aggregates worden bewaard in een Amazon RDS die rechtstreeks wordt aangesproken vanuit drupal. Op deze manier wordt het CMS nooit belast voor het opvragen van gegevens.

E. De mening van SBS Belgium

Kristof Nizet (Digital Product Manager) aan het woord:

"Om al onze digitale projecten naar een hoger niveau te brengen, hebben we een multidisciplinair team nodig dat schaalbaar is. We kozen er dan ook bewust voor om geen eigen development afdeling uit te bouwen, maar te werken met een partner die het nodige talent in huis heeft. Om een partner te vinden die onze ambities aan kon, zochten we in eerste instantie naar een match qua karakter en visie. Toen Wieni zichzelf kwam voorstellen, zaten we meteen op dezelfde golflengte. Dat vertaalde zich later in het strakke tempo waarmee op een paar maanden tijd ons nieuw platform werd opgeleverd.

We begonnen het traject met een paar intake gesprekken met key users om de grote lijnen uit te tekenen. In plaats van daarna tijd te steken in grote workshops, uitgebreide lastenboeken en dichtbevolkte statusmeetings vertrouwden we op elkaars kennis en ervaring om alle details in te vullen. Van bij het begin hadden we onszelf voorgenomen om zo snel mogelijk een eerste versie van het platform te lanceren en daarop verder te ontwikkelen op basis van interne/externe feedback."

De sterke groei die we met onze zenders online hebben neergezet, is grotendeels te danken aan het performante platform en de vlotte samenwerking die we hebben opgebouwd met Wieni

Kristof Nizet, Digital Product Manager

"Voor elke sprint verzamel ik de grote lijnen van aanpassingen die moeten gebeuren aan het platform. We bespreken samen wat de beweegredenen achter elke aanpassing zijn en laat het team van Wieni zelf mee invullen hoe zij iets zouden UX’en/ontwikkelen. Op die manier benutten we maximaal het talent dat we ter beschikking hebben, en wordt de tijd/last weggenomen om rigide specs te moeten schrijven.

De sterke groei die we met onze zenders online hebben neergezet, is grotendeels te danken aan het performante platform en de vlotte samenwerking die we hebben opgebouwd met Wieni."

F. Zilver op Feweb-awards

Zowel de klant als Wieni mogen dan wel zelf tevreden over het project en de samenwerking, maar ook het eindproduct is binnen de sector niet onopgemerkt voorbij gegaan: de website vier.be won namelijk zilver in de Business-to-Consumer categorie van de FeWeb Excellence Awards.  

Lees hier het Feweb-persbericht 

Kobe en Dieter met de silver-award voor Vier.be

sbstv - vijf.be