> ## Documentation Index
> Fetch the complete documentation index at: https://storekit.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Menü-Stories mit Videos und CTAs erstellen

> Fügen Sie Ihrer storekit-Menüseite vertikale Vollbild-Video-Stories hinzu: mehr Engagement und Umsatz mit Instagram-artigen Inhalten zu Gerichten.

Stories sind vertikale Vollbild-Videoinhalte, die auf Ihrer Menüseite angezeigt werden. Sie sind Teil Ihres **Content**-Toolkits neben [Werbebannern](/docs/de/guides/marketing/promotional-banners) und sollen das Gästeverhalten beeinflussen und Handlungen anstoßen.

Zu Content-Strategie und Best Practices siehe den [Stories-Leitfaden](/docs/de/guides/menu-engineering/stories) in Menu Engineering.

<video autoPlay muted loop playsInline className="w-full rounded-xl shadow-lg" src="https://ucarecdn.com/87409ef0-c71a-4419-9b43-67f245349b01/storeis.mp4" />

## Story erstellen

1. Gehen Sie in Ihrem Dashboard zu **Marketing** → **Content**
2. Klicken Sie im Abschnitt **Stories** auf **Story erstellen**
3. Geben Sie einen **Titel** ein (wird im Viewer angezeigt)
4. Fügen Sie eine oder mehrere **Seiten** (Videos) hinzu
5. Konfigurieren Sie CTAs für jede Seite
6. Legen Sie die Anzeigereihenfolge im Karussell fest
7. Schalten Sie die Story auf **Aktiv**
8. Klicken Sie auf **Story erstellen**, um zu speichern

## Story-Aufbau

Jede Story besteht aus:

| Element         | Beschreibung                                           |
| --------------- | ------------------------------------------------------ |
| **Titel**       | Name, der im Story-Viewer angezeigt wird               |
| **Seiten**      | Eine oder mehrere Videoseiten innerhalb der Story      |
| **Thumbnail**   | Erstes Frame des ersten Videos (automatisch generiert) |
| **Reihenfolge** | Position im Karussell                                  |

## Seiten

Jede Seite innerhalb einer Story enthält:

| Element       | Beschreibung                                                                                                                                                                 |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Video**     | Vertikaler Videoinhalt (zu Mux hochgeladen)                                                                                                                                  |
| **CTA-Typ**   | Aktion, die beim Antippen des Buttons ausgelöst wird                                                                                                                         |
| **CTA-Label** | Benutzerdefinierter Buttontext (optional)                                                                                                                                    |
| **CTA-Daten** | Zielprodukt, -kategorie oder -URL. Produkt- und Kategorieziele werden als IDs eingegeben – siehe [Produkt-ID oder Kategorie-ID finden](#produkt-id-oder-kategorie-id-finden) |

### Videoanforderungen

| Spezifikation   | Anforderung                      |
| --------------- | -------------------------------- |
| **Ausrichtung** | Vertikal (9:16-Seitenverhältnis) |
| **Format**      | MP4, MOV oder WebM               |
| **Dauer**       | 5–60 Sekunden empfohlen          |
| **Auflösung**   | 1080×1920 oder höher             |

Videos werden über Mux für optimiertes Streaming auf allen Geräten verarbeitet.

## Call-to-Action-Typen

### In den Warenkorb

Fügt das verknüpfte Produkt direkt in den Warenkorb des Kunden ein.

* Am besten für einfache Artikel ohne erforderliche Modifier
* Hat das Produkt Modifier, öffnet sich stattdessen das Artikelmodal
* CTA-Typ mit der höchsten Conversion
* Erfordert das Einfügen der **Produkt-ID** des Produkts in das Feld **Produkt-ID**

### Artikel ansehen

Öffnet das Produktdetailmodal.

* Verwenden Sie es, wenn Produkte Modifier zum Konfigurieren haben
* Ermöglicht Kunden, alle Details vor dem Hinzufügen zu sehen
* Erfordert das Einfügen der **Produkt-ID** des Produkts in das Feld **Produkt-ID**

### Kategorie ansehen

Scrollt das Menü zur ausgewählten Kategorie.

* Schließt den Story-Viewer
* Nützlich, um ganze Menübereiche zu bewerben
* Erfordert das Einfügen der **Kategorie-ID** der Kategorie in das Feld **Kategorie-ID**

### Externe URL

Öffnet einen externen Link in einem neuen Tab.

* Klicks werden erfasst, bevor der Nutzer die Seite verlässt
* Verwenden Sie es für Buchungen, Events oder externe Inhalte

### Keine

Kein CTA-Button wird angezeigt.

* Verwenden Sie es für Markeninhalte oder Ankündigungen
* Das Video wird abgespielt, ohne zu einer Aktion aufzufordern

### Produkt-ID oder Kategorie-ID finden

Produkt- und Kategorie-CTAs werden per ID adressiert, die Sie in den Seiten-Editor einfügen:

| CTA-Typ               | Feld             | Einzufügender Wert                 |
| --------------------- | ---------------- | ---------------------------------- |
| **In den Warenkorb**  | **Produkt-ID**   | Die **Produkt-ID** des Produkts    |
| **Artikel ansehen**   | **Produkt-ID**   | Die **Produkt-ID** des Produkts    |
| **Kategorie ansehen** | **Kategorie-ID** | Die **Kategorie-ID** der Kategorie |

So finden Sie diese:

1. Gehen Sie in der Seitenleiste zu **Menü**
2. Öffnen Sie das Produkt oder die Kategorie, das/die Sie verlinken möchten
3. Scrollen Sie im Bearbeitungsbereich nach unten – die **Produkt-ID** (bzw. **Kategorie-ID**) ist der letzte Eintrag, direkt über dem Speichern-Button
4. Es handelt sich um eine lange Kennung in Monospace-Schrift. Klicken Sie darauf, um den gesamten Wert auszuwählen, und kopieren Sie ihn dann

Dieselben Felder erscheinen unter **Planung, Priorität & CTA-Überschreibungen**, wenn Sie eine Seite pro Store auf ein anderes Produkt oder eine andere Kategorie verweisen möchten.

<Note>
  Eine **Produkt-ID** ist nicht dasselbe wie die **SKU / PLU** oder **POS-ID** des Produkts. Story-CTAs akzeptieren nur die **Produkt-ID**. Siehe [Produkte](/docs/de/guides/menu/products) und [Kategorien](/docs/de/guides/menu/categories).
</Note>

## Viewer-Verhalten

Wenn ein Kunde eine Story öffnet:

| Interaktion           | Verhalten                         |
| --------------------- | --------------------------------- |
| **Rechts tippen**     | Nächste Seite oder nächste Story  |
| **Links tippen**      | Vorherige Seite                   |
| **Halten**            | Video pausieren                   |
| **Nach oben wischen** | CTA auslösen (falls konfiguriert) |
| **X-Button**          | Viewer schließen                  |
| **Escape-Taste**      | Viewer schließen (Desktop)        |
| **Zurück-Button**     | Viewer schließen (Mobil)          |

Videos starten standardmäßig **stumm**. Kunden können auf das Lautstärkesymbol tippen, um die Stummschaltung aufzuheben.

### Fortschrittsanzeige

Ein Fortschrittsbalken oben zeigt:

* Aktuelle Position innerhalb der Story
* Anzahl der Seiten in der aktuellen Story
* Wechselt automatisch zur nächsten Seite, wenn das Video zu Ende ist

## Metriken und Tracking

storekit erfasst umfassend die Story-Interaktion:

| Ereignis                | Erfasste Daten                                                     |
| ----------------------- | ------------------------------------------------------------------ |
| **Viewer geöffnet**     | Story-ID, Quellstandort                                            |
| **Story angesehen**     | Story-ID, Seitenindex, hat Video, hat CTA                          |
| **Navigation**          | Richtung (weiter/zurück), Methode (Tippen/automatisch)             |
| **CTA geklickt**        | CTA-Typ, Ziel, Videofortschritt in %                               |
| **Story abgeschlossen** | Verweildauer, angesehene Seiten                                    |
| **Viewer geschlossen**  | Schließmethode, insgesamt angesehene Stories/Seiten, Sitzungsdauer |

### Kernmetriken

| Metrik             | Beschreibung                                     |
| ------------------ | ------------------------------------------------ |
| **Öffnungsrate**   | % der Menüaufrufe, die Stories geöffnet haben    |
| **Abschlussrate**  | % der Stories, die bis zum Ende angesehen wurden |
| **CTA-Klickrate**  | % der Aufrufe, die den CTA geklickt haben        |
| **Ø Verweildauer** | Durchschnittliche Sekunden im Story-Viewer       |

## Anzeigeeinstellungen

### Karussellposition

Stories erscheinen in einem horizontalen Karussell oben auf der Menüseite, oberhalb der Kategorien.

### Thumbnail-Vorschau

Jede Story zeigt eine Endlos-Videovorschau im Karussell. Kunden tippen, um den Vollbild-Viewer zu öffnen.

### Ladezustände

* Skeleton-Platzhalter werden angezeigt, während Stories laden
* Blur-Hash-Vorschauen werden angezeigt, bevor das Video bereit ist
* Ein Spinner zeigt an, dass das Video gepuffert wird

## Stories verwalten

### Neu anordnen

Ziehen und legen Sie Stories ab, um ihre Position im Karussell zu ändern. Die erste Story erscheint links.

### Bearbeiten

Klicken Sie auf eine Story, um ihre Seiten, CTAs oder Einstellungen zu bearbeiten. Änderungen werden sofort gespeichert.

### Löschen

Löschen Sie Stories, um sie dauerhaft zu entfernen. Dies kann nicht rückgängig gemacht werden.

### Archivieren

Schalten Sie Stories aus, um sie zu verbergen, ohne sie zu löschen. Nützlich für saisonale Inhalte, die Sie wiederverwenden.

## Fehlerbehebung

### Story ist aktiv, wird aber auf der Bestellseite nicht angezeigt

Wenn eine Story im Dashboard als **Aktiv** angezeigt wird, aber nicht auf Ihrer Live-Menüseite erscheint, prüfen Sie zunächst Folgendes:

1. **Bestätigen Sie, dass sie aktiv und nicht nur gespeichert ist** – Öffnen Sie die Story unter **Marketing** → **Content** und prüfen Sie, ob der Schalter **Aktiv** (grün) anzeigt. Eine als **Inaktiv** belassene Story ist gespeichert, wird aber nicht angezeigt. Nutzen Sie die Filter **Aktiv** / **Alle** / **Inaktiv**, um den Status zu bestätigen.
2. **Prüfen Sie, ob der richtige Store ausgewählt ist** – Stories werden pro Store zugewiesen. Stellen Sie sicher, dass die Story dem Store zugewiesen ist (und für ihn Aktiv ist), dessen Bestellseite Sie ansehen.
3. **Aktualisieren Sie die Live-Seite** – Laden Sie die Bestellseite neu (ein Hard Refresh leert eventuelle Caches), damit sie die neuesten Inhalte übernimmt.
4. **Prüfen Sie die Position im Karussell** – Das Karussell befindet sich oben im Menü, über den Kategorien. Eine Story mit niedrigerer Anzeigereihenfolge kann außerhalb des sichtbaren Bereichs sein – scrollen Sie das Karussell seitlich, um sie zu finden.
5. **Warten Sie, bis die Videoverarbeitung abgeschlossen ist** – Videos werden nach dem Hochladen über Mux verarbeitet. Eine Story wird erst gerendert, wenn ihr Video bereit ist, was bei größeren Dateien einige Minuten dauern kann.
6. **Prüfen Sie eventuelle Planungen** – Wenn Sie unter **Planung, Priorität & CTA-Überschreibungen** ein Start- oder Enddatum festgelegt haben, erscheint die Story nur innerhalb dieses Zeitfensters.

<Info>
  Wenn die Story nach diesen Prüfungen weiterhin nicht erscheint, [wenden Sie sich an den Support](/docs/de/getting-started/contact-support) und geben Sie Store-Namen und Story-Titel an.
</Info>

## Tipps

* **Das erste Frame zählt** – Das Thumbnail wird automatisch aus dem ersten Frame erzeugt
* **Kurz halten** – 5–15 Sekunden pro Seite performen am besten
* **Ton optional** – Gestalten Sie für stummes Ansehen, da Videos stumm starten
* **Inhalte rotieren** – Frische Stories fördern wiederkehrendes Engagement
* **CTAs passend wählen** – „In den Warenkorb" für einfache Artikel, „Artikel ansehen" für komplexe
* **Performance verfolgen** – Prüfen Sie Metriken, um schwache Stories zu optimieren

## Verwandte Inhalte

<CardGroup cols={2}>
  <Card title="Stories-Leitfaden" icon="lightbulb" href="/docs/de/guides/menu-engineering/stories">
    Content-Strategie und Best Practices
  </Card>

  <Card title="Werbebanner" icon="image" href="/docs/de/guides/marketing/promotional-banners">
    Statische visuelle Inhalte für das Menü
  </Card>

  <Card title="Videos" icon="video" href="/docs/de/guides/menu-engineering/videos">
    Videos zu Produkten hinzufügen
  </Card>
</CardGroup>


## Related topics

- [Videos](/docs/de/guides/menu-engineering/videos.md)
- [Stories – Strategie & Best Practices](/docs/de/guides/menu-engineering/stories.md)
- [Menükategorien erstellen und planen](/docs/de/guides/menu/categories.md)
- [3. Menü erstellen](/docs/de/getting-started/launch/build-your-menu.md)
- [Event-Tracking](/docs/de/privacy-security/event-tracking.md)