#lessonlearned – Landingpages in Nuxt und Storyblok: eigene site-config, eigenes Menü

Landingpages haben oft andere Anforderungen als reguläre Seiten. Sie sollen eigenständig funktionieren, ein reduziertes Menü haben, eigene Kontaktoptionen mitbringen oder spezielle Weiterleitungen berücksichtigen. Gleichzeitig wäre es wenig sinnvoll, dafür jedes Mal eine komplett neue technische Struktur aufzubauen. In diesem Lesson Learned zeigen wir, wie wir Landingpages in unsere bestehende Nuxt- und Storyblok-Architektur integriert haben, ohne dafür einen eigenen Seitentyp entwickeln zu müssen.

Warum Landingpages besondere Anforderungen mitbringen

Im redaktionellen Alltag unterscheiden sich Landingpages oft deutlich von normalen Inhaltsseiten. Sie sind meist kampagnenbezogen, haben eine klar fokussierte Nutzerführung und benötigen deshalb häufig eine eigene Navigation oder eigene Konfigurationen.

In unserem Projekt sollten Redakteurinnen und Redakteure Landingpages in Storyblok selbstständig anlegen und pflegen können. Dabei waren unter anderem folgende Anforderungen wichtig:

• eigenes Navigationsmenü

• eigene Kontaktoptionen

• eigene Weiterleitungen

• Nutzung des bestehenden Komponenten-Systems

• Ablage unter einer eigenen Unter-URL

Das Ziel war also nicht, ein separates System für Landingpages zu schaffen, sondern die bestehende Plattform gezielt zu erweitern.

Unser Ansatz: eigene site-config pro Landingpage

Der wichtigste Baustein war für uns eine eigene site-config pro Landingpage. Reguläre Seiten laden ihre Konfiguration aus einem festen Pfad in Storyblok. Landingpages greifen dagegen auf eine eigene Konfiguration innerhalb ihres jeweiligen Ordners zu.

Ein vereinfachter Ausschnitt sieht so aus:

// app/plugins/site-config.server.ts
if (slug[0] === 'landingpages' && slug[1]) {
  urlSiteConfig = `cdn/stories/${rootSlug}/${locale}/landingpages/${slug[1]}/site-config`
} else {
  urlSiteConfig = `cdn/stories/${rootSlug}/${locale}/site-config`
}

ts

Dadurch kann jede Landingpage ihre eigene Konfiguration mitbringen, ohne dass dafür eine Sonderlogik in den Komponenten selbst notwendig wird.

In Storyblok bedeutet das ganz praktisch: Innerhalb des Landingpage-Ordners liegt eine eigene site-config-Story, in der zum Beispiel Menüeinträge, Kontaktinformationen oder Weiterleitungen gepflegt werden können.

Separates Menü pro Landingpage

Ein besonders wichtiger Punkt war die Navigation. Landingpages sollen in vielen Fällen bewusst schlanker aufgebaut sein als die Hauptwebsite. Deshalb haben wir auch das Menü getrennt behandelt.

Das Menü wird bei uns im Cloudflare-KV-Speicher zwischengespeichert. Für Landingpages wird der Schlüssel um den jeweiligen Landingpage-Slug erweitert, damit jede Kampagne ihr eigenes Menü erhalten kann.

// app/plugins/menu.server.ts
if (pathname.includes('/landingpages/')) {
  const landingPageSlug = pathname.split('/landingpages/')[1].split('/')[0]
  cacheKey = `bayware:main-menu:${rootSlug}:landingpages:${landingPageSlug}:${locale}`
} else {
  cacheKey = `bayware:main-menu:${rootSlug}:${locale}`
}

ts

So bleibt das Menü der regulären Website unangetastet, während Landingpages ihre eigene Navigation ausspielen können.

Menüwechsel bei der Navigation korrekt behandeln

Zusätzlich mussten wir berücksichtigen, dass Benutzer zwischen regulären Seiten und Landingpages wechseln können – oder auch zwischen verschiedenen Landingpages.

Damit in diesem Fall nicht versehentlich das falsche Menü stehen bleibt, prüfen wir bei der Navigation, ob sich der Kontext geändert hat. Wenn das der Fall ist, wird das Menü neu geladen.

// app/middleware/states.global.ts
if (
  to.path.includes('/landingpages/') !== from.path.includes('/landingpages/') ||
  (to.path.includes('/landingpages/') &&
    to.path.split('/landingpages/')[1]?.split('/')[0] !==
    from.path.split('/landingpages/')[1]?.split('/')[0])
) {
  pageRootSwitch.value = true
}

ts

Auf diese Weise bleibt die Navigation auch beim Wechsel zwischen unterschiedlichen Bereichen konsistent.

Die Struktur in Storyblok bleibt dabei übersichtlich

Die Umsetzung in Storyblok ist bewusst so aufgebaut, dass Landingpages sauber innerhalb der bestehenden Inhaltsstruktur abgelegt werden können.

Ein Beispiel für die Ordnerstruktur:

root-slug/
  en/
    site-config
    pages/
    landingpages/
      campaign-2024/
        site-config
        home
        contact
      solar-special/
        site-config
        home

Der Vorteil dieser Struktur ist, dass Landingpages nicht als technischer Sonderfall behandelt werden müssen. Sie folgen derselben grundsätzlichen Logik wie andere Inhalte, bringen aber ihre eigene Konfiguration mit.

Auch kleine Details sollten mitgedacht werden

Neben Menü und Konfiguration gibt es oft noch weitere Stellen, an denen Landingpages anders behandelt werden müssen. Ein Beispiel ist der Link zur Startseite im Footer.

Auf regulären Seiten verweist dieser Link auf die normale Startseite der jeweiligen Sprache. Innerhalb einer Landingpage soll er dagegen auf die Startseite genau dieser Landingpage zurückführen.

const goHome = () => {
  if (requestUrl.pathname.includes('/landingpages/')) {
    const landingPageSlug = requestUrl.pathname.split('/landingpages/')[1].split('/')[0]
    return `/${locale}/landingpages/${landingPageSlug}`
  }
  return `/${locale}`
}

ts

Gerade solche Details sind wichtig, damit sich Landingpages wirklich wie ein in sich stimmiger Bereich anfühlen.

Was sich für uns bewährt hat

Im Projekt hat sich vor allem gezeigt, dass Landingpages nicht zwangsläufig eine eigene technische Welt brauchen.

Bestehende Komponenten weiterverwenden

Die Inhalte von Landingpages konnten mit denselben Komponenten aufgebaut werden wie die regulären Seiten. Das reduziert Entwicklungsaufwand und sorgt für ein konsistentes Erscheinungsbild.

Konfiguration statt Sonderentwicklung

Durch die eigene site-config pro Landingpage konnten viele Anforderungen direkt über Storyblok abgebildet werden. Das macht die Lösung flexibler und stärkt die redaktionelle Eigenständigkeit.

Klare Trennung bei Menü und Navigation

Das separate Menü pro Landingpage war wichtig, um Kampagnenseiten gezielt steuern zu können, ohne die Hauptnavigation der Website zu beeinflussen.

Unser wichtigstes Learning

Unser wichtigstes Learning war, dass sich Landingpages sehr gut in eine bestehende Nuxt- und Storyblok-Architektur integrieren lassen, wenn Konfiguration und Navigation sauber vom Rest der Website getrennt werden.

Mit einer eigenen site-config pro Landingpage, einem separaten Menü und einer klaren Ordnerstruktur in Storyblok konnten wir kampagnenspezifische Anforderungen umsetzen, ohne neue Seitentypen oder parallele Strukturen aufzubauen. Das spart Entwicklungsaufwand und erleichtert gleichzeitig die redaktionelle Pflege.