Kategorie: Technologie

List von Links die direkt zu Ankerpunkten auf dieser Seite führen.

Einleitung

Wie ein Schweizer Uhrwerk: die Architektur der komplett neuen Content-Hub Plattform mit zahlreichen Daten-Import und Daten-Export Schnittstellen zu Umsystemen. Mehrsprachigkeit und Multi-Marktfähigkeit sowie Automatisierungen bei der Datenmigration oder der Bildauslieferung mithilfe von AI sind einige der Highlights. Weltweite Performance und Verfügbarkeit dank einer Multi-CDN Lösung, speziell für Fernmärkte und Prioritätsmärkte wie China sowie der Einsatz modernster Frontend-Technologien für den Inspirationskalender und die Karte zeigen die Komplexität des Lösung.

Konzept & Architektur

Die grossen Datenmengen, die Performance und die kontinuierliche Datenverarbeitung der vielen externen Schnittstellen verlangten nach einer durchdachten anspruchsvollen Architektur. Das komplett neu evaluierte CMS System (Sitecore 9) als Content-Hub ist bereit für die zukünftige Verwendung für alle digitalen Kanäle (Headless-Ready). Daten werden von externen Datenlieferanten über 20 Schnittstellen (im Bildausschnitt nur exemplarisch vorhanden) regelmässig bezogen und anschliessend im CMS durch Editoren angereichert, übersetzt, verlinkt, publiziert oder über Export-Schnittstellen wieder zur Verfügung gestellt.

Detailbild anzeigen

Mehrsprachigkeit und Märkte

Die Website wird in 14 Sprachen aufbereitet, u.a. auch für Right-To-Left Sprachen (RTL) wie Arabisch. Die Inhalte können in 22 Märkten individuell angepasst und ausgespielt werden, so dass z.B. Begriffe wie 'Fahrrad' für Deutschland und 'Velo' für die Schweiz ausgegeben werden. Dieselbe Inhaltsseite kann von den Editoren in den Marktversionen unterschiedlich gestaltet werden. 

Beispiel anzeigen

Automatisierte Datenmigration

Die Migration von 85% der Daten (von ca. 18'000 Seiten in bis zu 14 Sprachen und 60'000 Bilder) fand über einen automatisierten Datenaustausch vom alten CMS-System ins neue CMS-System statt. Die Daten wurden vom alten CMS in ein neutrales Zwischenformat (JCR, Java Content Repository) exportiert. Um die Qualität der Daten zu verbessern und die Daten für die das neue System ready zu haben, wurden sie mithilfe von Parser und Regular Expression Regeln validiert und neu-strukturiert. Um die lange Phase der Content-Aufbereitung im neuen CMS-System zu überbrücken, wurde sichergestellt, dass im neuen CMS-System der migrierte Inhalt bereits bearbeitet werden konnten und trotzdem weiterhin Änderungen aus dem früheren CMS-System übernommen werden konnten.

Beispiel anzeigen

Middleware

Auf MySwitzerland.com fliessen Daten aus einer Vielzahl an Quellen zusammen. Für deren Anbindung wurde eine Middleware auf Basis von Apache Camel entwickelt, welche als Anti-Corruption-Layer diese Komplexität vor Sitecore fernhält. Durch den Einsatz des Event-Carried-State-Transfer Pattern, wird eine lose Kopplung mit Sitecore erreicht. Die Middleware ist für die Anbindung der externen Schnittstellen verantwortlich, führt Plausibilitätstest durch, überführt die Daten in das eigenen Domänen-Modell, kalkuliert die Änderungen und stellt diese Sitecore über das Message-Queue-System RabbitMQ zur Verfügung. Sitecore konsumiert diese Events, verarbeitet und bestätigt diese und stellt sicher, dass gleichzeitige Änderungen, durch Autoren und Fremdsysteme, korrekt verarbeitet werden.

Detailbild anzeigen

Verfügbarkeit und Performance

Die Hochverfügbarkeit wird durch eine vertikale und horizontale Skalierung und Geo-Redundantes Hosting mit Synchronisation zwischen den RZ-Standorten sichergestellt. Aktuelle jährliche nachweisbare Verfügbarkeit: 99,95%. Einsatz einer Multi-CDN Lösung mit zwei CDN's und Einsatz von HTTP/2 stellen den weltweiten performanten Betrieb in allen Märkten sicher. Für China wurde ein dediziertes CDN (Quantil) evaluiert, welches erlaubt die Inhalte auf dem chinesischen Festland zu speichern und somit hinter der chinesischen Firewall ausgeliefert werden. Hierzu musste eine spezifische ICP Lizenz beantragt werden und diverse technische Anpassungen im Frontend und Backend vorgenommen werden, so dass keine Google- und Facebook Lösungen eingesetzt werden.

Detailbild anzeigen

Automatische CDN Invalidierung

Seiten im CDN werden für eine bestimmte Zeit gecached. Die Regeln für die Cache Dauer können über eine generische Regel oder auf der einzelnen Seite individuell durch die Editoren konfiguriert werden. Beim Ändern einer Seite wird die Seite über die CDN API automatisch auf beiden CDN's invalidiert.

Beispiel anzeigen

Inspirationskalender

Die Vielfältigkeit und Schönheit der Schweiz in 48 interaktiven Inspirations-Videos in einem Jahreskalender. Hierfür wurde eine komplett eigenständige und responsive Lösung realisiert (inkl. Virtual Reality. https://vr.myswitzerland.com -> Optimized for Oculus Go). Selbst auf dem Smartphone ist der Kalender voll funktionsfähig und besitzt zusätzlich einen 'Entdecker'-Modus welcher den Bewegungssensor der Smartphones nutzt. Die weltweite Performance für die schnelle Weiterschaltung der Videos wurde mithilfe von CDN's und diversen Frontend-, Backend und Video-Performance-Optimierungen sichergestellt. Damit die Videos für die Gäste einen Mehrwert erhalten, wurden 'fliegende' und klickbare Meta-Informationen als Overlay für die Videos realisiert.

Live ausprobieren

Inspirationskalender Motion-Tags

Für das Aufzeichnen der Bewegung der 'fliegenden' Meta-Info-Tags wurde eine Eigenentwicklung des Motion-Tag Drawing Tools realisiert. Die generierten Bewegungen können als Vektoren im JSON-Format exportiert werden und im Sitecore CMS-System hinterlegt werden. Klicken Sie hier um das Tool selber auszuprobieren.

Jetzt starten!

Virtual Reality

Entwicklung einer Virtual Reality Umgebung für den Inspirationskalender unter https://vr.myswitzerland.com (Oculus Go empfohlen). Für die VR-Umsetzung  kommen WebVR Techologien auf Basis der Library A-Frame zum Einsatz. Es werden dieselben Videos wie für Desktop/Smartphone verwendet. Hierzu mussten die Videos in die 3D-Welt auf 220 Grad aufgezogen, entzerrt und ausgefadet werden. Zusätzlich wurde eine eigene 3D-Font mit Explosionsanimation kreiert. 

Mehr erfahren

Schweizer Karte

Eine 360 Grad Karten-Lösung mit Blick auf die Vielfältigkeit der Schweiz. Innerhalb eines ausgewählten Inhalts können weiterführende Umgebungssuchen ausgeführt und angezeigt werden (Suche in der Umgebung). Ebenfalls ist auch eine ‘Around Me’ Funktion vorhanden, welche den aktuellen Aufenthaltsort in den Fokus stellt. Mehrere Karten-Layer können ausgewählt werden, u.a. wurde SwissTopo (Schweizer Landestopografie) in Google Maps integriert. Eine Textsuche umfasst neben den Inhalten von Schweiz Tourismus über eine Anbindung der Google Places API sämtliche Strassen und Orte. Die Anwendung wurde mit VueJS entwickelt, wobei wartefreie UI-Performance und übersichtliche Bedienung hohe Priorität hatten.

Live ausprobieren

Suche

Als Alternative zum direkten Einstieg via Suchmaschine oder der Hauptnavigation gibt es eine intuitive und performante Suche, welche eine unstrukturierte Suche nach dem gewünschten Inhalt ermöglicht. Die 'Search-as-you-Type' Lösung kann pro Markt individuell mit Inhalten befüllt werden und berücksichtigt die marktspezifischen Bedürfnisse. Die Suche ist fehlertolerant ausgelegt und um dem Gast eine bessere Sicherheit zu bieten, besteht auf dem Desktop die Möglichkeit mit einem Hover über das Suchergebnis eine Vorschau auf die Detailseite zu erhalten. Die Suche auf Basis von Algolia ist dank CDN Integration weltweit performant ausgelegt.

Screencast ansehen

Automatisierte Bildauslieferung

Um die bildgewaltige und inspirative Seite mit über 400'000 Bildern handhaben zu können, kommt künstliche Intelligenz zum Einsatz. Editoren verwalten im Backend jeweils nur ein einziges Bild pro Teaser oder Seite. Das Bild welches schlussendlich in der Seite ausgeliefert wird, wird beim Laden der Seite für die Bildschirmgrösse und die Grösse der Komponente gerechnet und zugeschnitten (Crop). Der Zuschnitt erfolgt mit Hilfe von Machine Learning Algorithmen vollautomatisch, wobei die künstliche Intelligenz dafür sorgt, dass der richtige Bildausschnitt gewählt wird und die für die visuelle Aussage relevanten Bildelemente erkannt und beibehalten werden. Zusätzlich werden vom eingesetzten Bildauslieferungs-Service Cloudinary auch das Bild-Format (JPEG, PNG, WebP) und die Bildqualitätsstufe (z.B. 75%) vollautomatisch und dynamisch bestimmt.

Online durchblättern

Suchmaschinenoptimierung

Schon von Beginn an des Projektes wurden diverse SEO-Massnahmen für den Go-Live konzeptionell berücksichtigt. Hierzu fanden automatisierte Mappings der alten URL Struktur auf die neue URL Struktur statt, welche erst mithilfe der Datenmigration und den früheren Seiten-ID's ermöglicht wurde. Für die Finder/Filter Seiten wurden Konfigurationsmöglichkeiten entwickelt, welche dem Editor ermöglichen die früheren Parameter durch neuen Parameter zu ersetzen. Durch die Massnahmen konnte nach dem Go-Live ca. 90% der alten URL's durch die neue Website abgefangen werden. 2 Monate nach Go-Live hat sich die Suchindexierung bei Google bereits wieder normalisiert.

Beispiel anzeigen

Konfigurationsmöglichkeiten Finder

Für sämtliche Finder wie z.B. der Veranstaltungsfinder (https://www.myswitzerland.com/events) wurden im Backend  Konfigurationsmöglichkeiten implementiert, welche die SEO-Indexierungs-Steuerung definiert. So kann der Editor definieren, welche Kombinationen (z.B. Filter-Topic und Filter-Region) in welchen Kombinationen für die SEO-Indexierung zulässig sind. Dies steuert dann die Ausgabe der Robots Meta-Information der Seite sowie der auszugebenden Links (nofollow). Ebenfalls können Meta-Informationen (Meta-Titel, Meta-Description, Meta-Image) konfiguriert werden. Meta-Title und Meta-Description werden hierbei dynamisch aufgrund der aktuellen Filter-Auswahl zusammengestellt.

Beispiel anzeigen

Konfiguration Sitemap und Robots Meta-Information

Pro Seite kann der Editor individuell konfigurieren, ob die Seite indexiert werden soll (alle Kombinationen von index/noindex und follow/nofollow wählbar) und ob die Seite in der Sitemap.xml erscheinen soll. Dadurch kann das Crawl-Budget besser berücksichtigt werden und weniger bedeutsame Seiten werden so nicht ggü. den Search-Engines exponiert. In der Ausgabe wird auf die korrekte Anwendung von Canonical URL's und hreflang Querverlinkungen geachtet.

Beispiel anzeigen

Andere Kategorien