Visuel headless content management i Magento 2 med Builder.io

Et kritisk blik på Magento’s indbyggede PageBuilder

Selvom Magento har en indbygget PageBuilder, der bruges til både sider, blokke, kategori- og produktbeskrivelser, så ser vi på langt de fleste projekter at den kommer til kort, relativt hurtigt. Derfor ser vi tit, at en Magento webshop akkompagneres af et mere klassisk CMS som f.eks. WordPress eller Umbraco til at styre content som sider, artikler, blogindlæg m.m.

Så hvor er det, den indbyggede PageBuilder ikke lever op til forventningerne? Vores erfaringer kan koges ned til disse kritikpunkter:

• Begrænset redaktørfrihed
  Man kan bygge simple layouts med prædefinerede typer af indhold, som f.eks. tekst, billeder, video m.fl. Men typisk ønsker man at bygge unikke sektioner, der designmæssigt er i overensstemmelse med en visuel identitet, som fremstår elegant responsivt, og kan genbruges på tværs af landing pages. Og her rammer man hurtigt en mur med PageBuilderen. Uden brug af kode, kommer indholdet nemt til at virke meget “kasset” og generisk.
• Manglende preview af content
  PageBuilderen er helt afkoblet fra frontenden, og man ser derfor ikke hvordan det indhold, man arbejder med, kommer til at se ud for besøgende. Der er heller ingen mulighed for at previewe content, før man gemmer, og det kræver derfor at man gemmer og verificerer løbende. Det giver en ekstra overhead ift. at sikre at det indhold man laver, også kommer til at se ud som man ønsker.
• Ikke-performance-optimeret output
  Når man gemmer sit indhold i PageBuilderen, konverteres det til HTML, som gemmes i databasen og efterfølgende vises i frontenden. Men det genererede HTML er ikke optimeret, og er derfor ikke Pagespeed-venligt. Eksempelvis er billeder ikke komprimeret (og lazy loades ikke), og videoer loader eksterne JavaScript-filer ind, uanset om videoen bliver afspillet. Samlet set, betyder det at jo mere indhold man laver på en side med PageBuilderen, desto mere påvirkes Pagespeed-scoren. I globale content blocks, vil det betyde at man påvirker hele sitets performance og ikke bare en enkel side. 
• Vedligeholdelses- og omkostningstungt
  Der ligger teknisk set en mulighed for at udbygge PageBuilderen med custom content blokke, som kan designes og genbruges. Udfordringen er, at disse kræver relativ kompleks udvikling. Det betyder at man er afhængig af en udvikler, når man ønsker helt nye eller justeringer til eksisterende blokke. Det begrænser friheden for content manageren og giver en økonomisk og tidsmæssig afhængighed til udviklingsteamet.

Kort sagt, lever PageBuilderen ikke op til de krav og forventninger man kan have til ambitiøst content management i 2024 og fremadrettet.

Builder.io - et headless CMS alternativ

Efter at have afprøvet en del forskellige alternativer til Magento’s indbyggede PageBuilder, må vi konkludere at Builder.io er langt den bedste - på stort set alle parametre - af dem vi har testet. Builder.io tilbyder en headless løsning, hvor selve content management delen ligger udenfor Magento, i deres eget CMS-as-a-service UI. Alt content ligger således hos Builder.io, og hentes via API’er fra Magento. På den måde er Magento stadig styrende for sider, deres URL’er og metadata - men selve indholdet hentes fra Builder.

Builder.io kan alle de ting vi savner i Magento’s egen PageBuilder - og langt mere til. Listen med features er utrolig lang, og der videreudvikles konstant. Men helt overordnet, er det, der får Builder.io til at skille sig ud fra både Magento’s egen PageBuilder og andre headless CMS’er, en kombinationen af følgende:

Visuel on-site editor med fuld canvas kontrol

Editoren i Builder.io kører i deres eget UI, og altså ikke lokalt i Magento. Men fordi Builder.io bruger en iframe til at vise dit site i mens du redigerer, er det akkurat som at sidde i frontenden med et overlay af værktøjer til at redigere indholdet. Så man sidder ikke i en afkoblet editor, og det gør, at det er en reel what-you-see-is-what-you-get editor oplevelse. Al styling fra sidens CSS vises i editoren, og man har derfor ikke den dobbelte arbejdsgang i at lave content og efterfølgende validere hvordan det ser ud.

I editoren har man fuld kontrol over sit indhold via en drag-n-drop tilgang til layout og content. Der er nærmest ubegrænset frihed ift. hvordan man vil bygge sine layouts og sit content op, og man har fuld adgang til at rette alt fra typografi, farver, spacing, skygger/effekter m.m. For superbrugeren kan man endda lave egne CSS-attributter og klasser. Man kan bygge egne formularer, indsætte egen JavaScript-kode, styre animationer og meget mere.

Struktureret content via modeller

Ønsker man en mere datastruktureret tilgang til content - som man måske kender fra CMS’er, hvor man har forskellige content types, med prædefinerede felter til indhold, fremfor et blankt canvas - er det også en mulighed. Man kan bygge sine egen modeller, og styre hvilke felter der skal være tilgængelige. Det gør det ideelt til at styre indhold som f.eks.:

• Blogindlæg og artikler, der skal følge en fast skabelon, og hvor alt indhold udfyldes via felter som titel, dato, forfatter, uddrag og beskrivelse
• Medarbejderoversigt, hvor hver medarbejder udfyldes med navn, rolle, kontaktinfo og grupperes pr. afdeling
• Oversigt over fysiske butikker med adresser og åbningstider

Responsiv redigering og previewing af content

Når man arbejder med sit content, har man mulighed for at se hvordan det fremstår på både mobile og desktop i realtime. Retter man noget indhold på desktop-visningen, opdateres mobilvisningen simultant. Man kan også tilpasse sit indhold til forskellige breakpoints, og dermed skræddersy hvert enkelt element til at se skarpt ud på alle devices.

Pagespeed-optimeret HTML

Hos Builder.io har man forståelse for vigtigheden af performance, hvorfor de nørder i detaljer hvordan hvert eneste element skal bygges, for at det endelige HTML output er så Pagespeed-optimeret som muligt. Det giver en frihed i at man som content manager ikke skal bekymre sig om hvor meget man påvirker sidens performance.

Integration med Magento produkt- og kategoridata

Via API’er, har Builder.io adgang til produkt- og kategoridata i Magento. Derfor er det muligt at indsætte og styre f.eks. en sektion med links til udvalgte kategorier, en produktslider eller lignende direkte i content via Builder.io. Ligeledes er der frihed til at bygge egne landing pages for produktsider til f.eks. kampagnesider.

En verden af muligheder for content managers

Med en integration af Builder.io, er vi lykkes med at skabe en helt ny oplevelse som content manager i Magento. Ved at tage arbejdet med indhold ud af Magento, har vi omgået mange af de begrænsninger der tidligere har været som content manager.

Med sin no-code tilgang til content, gør Builder.io det muligt at bygge indhold, som tidligere krævede udviklingstid og -omkostninger. Uden at skulle liste alle features Builder.io tilbyder, kan vi her nævne et par eksempler på opgaver man som content manager får mulighed for selv at kunne løse:

• Mulighed for at bygge komplekse komponenter (product sliders, modals, tabs og lign.)
• Bygge egne formularer med validering af felter og styring af hvor data sendes hen
• Automatisk generering af indhold via AI og Figma-integration
• Planlægge indhold eller ændringer til indhold
• Løbende optimering af indhold via heat maps, A/B tests og conversion tracking
• Skjule enkelte elementer fra mobil, som kun skal vises på desktop
• Lave animationer på elementer
  
  

Sådan påvirker det din forretning

Der er meget godt at sige om Builder.io som værktøj for content managers. Men i sidste ende, er det også vigtigt at forholde sig til hvad det betyder for forretningen, og hvordan det ændrer ens nuværende landskab. Vi har gjort os følgende indsigter ift. hvad en integration med Builder.io i Magento kan betyde for din forretning:

• Større frihed til at bygge det indhold, man drømmer om – uden afhængighed af at betale for udviklingstimer. Det giver en langt hurtigere go-to-market i publicering af indhold og gør, at arbejdet med content kan udvikle sig løbende sammen med brandet uden at blive begrænset af budget.
• Få indsigt i, hvor godt dit indhold performer, så du løbende kan teste og optimere det for at skabe størst mulig værdi.
• Hvis det visuelle udtryk er særdeles vigtigt i din branche eller for dit brand, er der god grund til at vælge Magento som e-commerce-platform og få fuld frihed over dit indhold.
• Der er ikke længere behov for et særskilt corporate website i et andet CMS, hvilket betyder mindre besvær for content managers og en potentiel besparelse i omkostninger til hosting og sikkerhedsopdateringer.
• Arbejdet med indhold er ikke længere en proces, hvor man skal bekymre sig om at påvirke performance negativt. Builder.io sørger for at optimere alt indhold for bedst mulig pagespeed-score. Vi har tidligere skrevet om vigtigheden af Pagespeed-score ift. placering i søgemaskiner og Ads-omkostninger, som har direkte indflydelse på forretningen.
• Vi har gode erfaringer med at bruge Growth plan, som i skrivende stund koster $39 pr. bruger om måneden. Men opvejer man den tid, man sparer i arbejdet med indhold, er det en no-brainer omkostning.
  
  

Ønsker du at høre mere om vores unikke Builder.io løsning til Magento?

Føler du dig begrænset i dit nuværende CMS? Kontakt os gerne for at høre mere om hvad en løsning med Builder.io kan betyde for din forretning? Vi står også altid til rådighed for en second opinion på jeres digitale potentiale eller tech platform. Vil du vide mere om vores unikke løsninger med Magento som kerne så læs mere på vores Magento teknologiside, følg vores nyhedsbrev og tøv ikke med at række ud til os.