Alles wat je wil weten over personalisatie met Jamstack

Bedrijven die personaliseren met Jamstack kunnen rekenen op personalisatie én goede prestaties. En dan bedoelen we ook echt goede prestaties: een Google Lighthouse-score tussen de 90 en 100 (🚀) voor je website.

Wat is de uitdaging?

Personaliseren is het aanpassen van content aan de gebruiker. Bij gebruikers uit het Zuiden wordt bijvoorbeeld de zomercollectie weergegeven, terwijl gebruikers uit het koudere Noorden nog de voorjaarscollectie te zien krijgen.

Bij traditionele personalisatietools gebeurt dit proces op browserniveau, wat betekent dat het personaliseren pas plaatsvindt na het laden van de pagina en het personalisatiescript. Deze methode werkt prima in situaties waarbij de gepersonaliseerde content niet direct zichtbaar is voor de gebruiker (bijvoorbeeld wanneer de content onder de pagina vouw staat of als een pop-up banner in beeld verschijnt).

Deze traditionele aanpak houdt in dat content pas gepersonaliseerd wordt nadat de pagina geladen is en het script is uitgevoerd. Dit proces duurt minstens een paar seconden (gemiddeld 5-10 seconden, maar soms zelfs nog langer). Het onvermijdelijke gevolg? De gebruiker ziet de content verspringen, bijvoorbeeld van algemeen naar gepersonaliseerd. Dit verspringen van elementen noemen we een "layout shift" (oftewel een indelingsverschuiving).

Google geeft deze negatieve gebruikerservaring weer door het totaal van alle afzonderlijke indelingsverschuivingen te meten met drie metrics die samen de CLS Core Web Vitals vormen.

De precieze definitie en meetwijze van CLS vind je hier. In de praktijk is de essentie dat content in de viewport niet door scripts zou moeten worden aangestuurd, maar dat de server de gepersonaliseerde content al direct toont.

Veel geïntegreerde DXP-oplossingen (Digital Experience Platforms) maken deze personalisatie vanaf de server mogelijk, waardoor de CLS-score geen probleem meer vormt. Maar waar het bij geïntegreerde DXP-oplossingen aan ontbreekt, is de mogelijkheid om (gepersonaliseerde) content optimaal weer te geven – een functionaliteit die een CDN (content delivery network) wel biedt. Geen CDN betekent tragere prestaties en slechtere scores voor de LCP en FID Core Web Vitals.

De uitdaging is om gepersonaliseerde content direct zichtbaar te maken voor de gebruiker, zonder dat de prestaties hieronder lijden.

Je wil de gepersonaliseerde content dus zo snel mogelijk versturen vanuit een CDN. En dat is waar Jamstack-technologie uitkomst biedt. Hieronder vergelijken we twee Jamstack-personalisatietools: Outsmartly en Uniform Optimize.

Jamstack personalisatie diensten

Outsmartly (https://www.outsmartly.com)

Onder de noemer "Revenue as a Service" biedt Outsmartly volledige flexibiliteit in het personaliseren van content. Outsmartly maakt personalisatie van ReactJS-componenten op CDN-niveau mogelijk. In begrijpelijke taal betekent dit dat je componenten kunt vervangen door een gepersonaliseerde variant aan de hand van criteria die je zelf instelt met JavaScript. Zo kun je bijvoorbeeld op basis van de geolocatie van een inkomend verzoek besluiten welke content of welk component er vanuit het CDN moet worden getoond.

Vanuit technisch oogpunt houdt personalisatie van content in dat specifieke React-componenten op CDN-niveau door middel van ESR (Edge Slice Re-rendering) worden aangepast aan de gebruiker. Dit klinkt (en is) heel ingewikkeld en technisch, maar waar het op neerkomt is dat delen van je pagina vervangen worden door een gepersonaliseerde variant vanuit het CDN. Wil je meer weten over de technische kant van ESR, bekijk dan deze introductievideo van Jay Phelps.

Je kunt de effectiviteit van je personalisatie meten door een backend-integratie uit te voeren met de dashboards van Google BigQuery. Deze kun je volledig afstemmen op jouw specifieke behoeften door bijvoorbeeld je eigen query- en analyticsdashboards in te richten.

Door gebruik te maken van een CDN, verbetert Outsmartly niet alleen de personalisatie van je content, maar ook de algehele laadsnelheid van je website.

De uiterst flexibele personalisatiemogelijkheden van Outsmartly zijn volledig zelf te beheren (of programmeren).

Outsmartly

Uniform Optimize (https://www.uniform.dev)

Uniform Optimize maakt Jamstack-personalisatie mogelijk met een backend-UI waarmee je gebruikersintenties kunt specificeren.

Alle bezoekers van je website hebben een bepaalde intentie – iets wat ze willen bereiken. Ze zijn immers met een reden op je site. Het doel van personalisatie is om het bezoekers zo makkelijk mogelijk te maken om die intentie te vervullen. Denk bijvoorbeeld aan een bestaande klant die een extra product wil bestellen.

Zodra je een intentie hebt gespecificeerd, kun je hier bepaalde signalen aan koppelen, zoals surfgedrag, cookies, bezochte pagina’s en bepaalde handelingen. Uniform Optimize biedt verschillende plug-ins voor headless CMS-systemen zoals Contentful en Sanity om intenties te koppelen aan gepersonaliseerde content.

De technische kant van het verhaal: de hele website wordt statisch opgebouwd en alle mogelijke varianten, personalisatieconfiguratie enzovoort zijn onderdeel van deze statische website. Afhankelijk van de usecase kan de personalisatie- en teststap ofwel in de browser, ofwel op CDN-niveau* uitgevoerd worden. De keuze voor het tonen van een variant wordt gemaakt op basis van de eerdergenoemde geconfigureerde signalen. Wanneer de personalisatie plaatsvindt in de browser (waarvoor JavaScript geactiveerd moet zijn), worden de varianten pas getoond na evaluatie van de scripts. Zoals je hierboven al las, kan deze methode de Core Web Vitals-score negatief beïnvloeden. Door personalisatie op CDN-niveau uit te voeren, is dit probleem opgelost.

Externe analytische tools, zoals Google Analytics, kunnen naadloos worden geïntegreerd met Uniform Optimize. De tweezijdige integratie maakt het mogelijk om personalisatiestatistieken te verzamelen met Google Analytics en efficiëntierapporten te genereren in de backend-UI van Uniform.

De intentiegerichte setup van Uniform biedt een duidelijk kader voor het personaliseren van content en is goed te integreren met verschillende headless CMS-systemen. Daarnaast biedt Uniform SDK’s voor verschillende frontend-toepassingen, waaronder ReactJS en VueJS.

Uniform biedt een goed werkende backend-UI en een naadloze headless CMS-integratie.

Uniform

(*) Personalisatie op CDN-niveau is als prive preview beschikbaar

En wat is nu de beste keuze?

Jamstack-personalisatietools kunnen op verschillende aspecten met elkaar vergeleken worden: (1) functionaliteit, (2) gebruiksvriendelijkheid, (3) flexibiliteit en (4) prestaties.

De backend-UI en de plug-ins voor headless CMS van Uniform Optimize bieden de gebruiker veel standaardfunctionaliteiten. Doordat de functionaliteiten goed te integreren zijn met bestaande systemen, is het relatief eenvoudig om Uniform Optimize te implementeren. Of Uniform Optimize ook op de langere termijn makkelijker in gebruik is, hangt af van de specifieke usecase – de functionaliteiten van Outsmartly kunnen namelijk volledig worden aangepast aan de wensen en behoeften van de gebruiker. Een groot pluspunt van Outsmartly is de hoge mate van flexibiliteit, bijvoorbeeld als het gaat om de personalisatiemogelijkheden op basis van geolocatie en de volledig aanpasbare analytics.

Als we puur naar prestaties kijken, wint Outsmartly het met de personalisatiemogelijkheden vanuit het CDN, waarmee je een Google Lighthouse-score van tot wel 100 kunt behalen. Zodra deze functionaliteit bij Uniform Optimize uit de previewfase komt en vrij beschikbaar wordt, is eenzelfde hoge score mogelijk met Uniform, maar op dit moment blijft Outsmartly wat prestaties betreft de slimmere keuze. En omdat een hogere laadsnelheid leidt tot een hogere conversie, zou dit zomaar eens het verschil kunnen maken voor je webshop.

Conclusie

De bovenstaande Jamstack-personalisatietools bieden allebei volop mogelijkheden om webcontent te personaliseren zonder dat dit ten koste gaat van je Core Web Vitals-score.

Is personalisatie met Jamstack de moeite waard? Absoluut – al is het maar om de hogere Core Web Vitals-score die je ermee behaalt. Maar als je voornamelijk content onder de vouw wil personaliseren, óf als je afhankelijk bent van de inhoudelijke domeinkennis van een bestaande dienst en een migratie veel werk gaat kosten, kunnen de kosten hoger zijn dan de baten.

In dit artikel hebben we twee Jamstack-tools vergeleken, maar er zijn natuurlijk nog veel meer personalisatietools op de markt. Let wel, bijna al deze aanbieders werken met de traditionele aanpak van personalisatie op browserniveau, wat wel of niet wenselijk kan zijn afhankelijk van je specifieke usecase.

Een van de traditionelere, zeer gespecialiseerde personalisatietools is Frosmo. Frosmo is volledig gericht op e-commerce, met een geavanceerde domeinkennis en uitgebreide integratiemogelijkheden op dit gebied. Zo is de integratie van Frosmo gebaseerd op je Google Enhanced Ecommerce-analytics, dus als je hier al gebruik van maakt, kun je rekenen op een naadloze integratie. Frosmo is vooral een goede keuze voor personalisatie onder de vouw, bijvoorbeeld om aanbevolen producten op een productpagina aan te passen aan de specifieke gebruiker. Voor personalisatie boven de vouw is het verstandig om de prestatie-impact per usecase te analyseren.

Om een lang verhaal kort te maken, de keuze voor de beste personalisatietool is sterk afhankelijk van je usecase. Heb je nog vragen over dit onderwerp of kun je wel wat advies gebruiken? Neem dan gerust contact met ons op via ons contactformulier of stuur een e-mail naar info@unplatform.io.