Handbuch Lite YouTube.

Systemvoraussetzungen

Shopware 6.7 mit Storefront, PHP 8.2 oder neuer. Für das Holen der Vorschaubilder im Hintergrund genügt der eingebaute Vorgangsplaner.

Installation

ZIP im Admin unter Erweiterungen hochladen, installieren, aktivieren. Danach den Lizenzschlüssel eintragen. Die Einstellungen liegen im Menü unter Marketing, Eintrag „Lite YouTube".

Auf der Konsole nach der ersten Installation:

bin/console plugin:refresh
bin/console plugin:install --activate StawLiteYoutube
bin/console theme:compile
bin/console cache:clear

Ab dem zweiten Deployment tritt plugin:update StawLiteYoutube an die Stelle der Installation.

Lizenz

Ohne gültige Lizenz zeigt der Menüpunkt statt der Oberfläche einen Aktivierungsbildschirm mit der erkannten Shop-Domain, einem Feld für den Schlüssel und einem Knopf zum Aktivieren.

Der Schlüssel wird auf dem Server gespeichert und geht nie an den Browser. Geprüft wird gegen plugins.staw.io, und zwar die Kombination aus Schlüssel und Domain. Eine gültige Prüfung gilt 15 Minuten, damit nicht jeder Klick im Admin eine Anfrage auslöst.

Was ohne Lizenz passiert: Die Verwaltung ist gesperrt und es werden keine Vorschaubilder mehr geholt. Der Shop läuft weiter, bereits umgewandelte Videos bleiben umgewandelt - Besucher merken nichts.

Verkaufskanal

Ganz oben wird festgelegt, für welchen Verkaufskanal die Einstellungen gelten. „Standard - alle Verkaufskanäle" ist die Grundeinstellung. Wird ein einzelner Kanal gewählt, gelten die dort gesetzten Werte nur für ihn.

Weicht ein Kanal vom Standard ab, erscheint ein Hinweis mit den betroffenen Feldern. „Auf Standard zurücksetzen" löscht alle eigenen Werte dieses Kanals, danach folgt er wieder dem Standard.

Umwandlung

Umwandlung aktiv ist der Hauptschalter. Ist er aus, bleibt die Seite unverändert.Nur diese Pfade beschränkt die Umwandlung auf einzelne Seiten, ein Pfad je Zeile. Ist das Feld leer, greift sie überall. Ein Stern am Ende wirkt als Platzhalter, /Jagd/* erfasst also alles unterhalb von /Jagd.Diese Pfade ausnehmen nimmt einzelne Seiten heraus. Diese Liste wird zuerst geprüft und schlägt die Positivliste - sinnvoll für Landingpages, auf denen ein Video sofort spielen soll.

Datenschutz und Vorschaubild

Ohne Cookies nachladen holt den Player beim Klick von youtube-nocookie.com statt von youtube.com. Sollte eingeschaltet bleiben.

Für das Vorschaubild gibt es drei Wege:

• Im Shop speichern - empfohlen. Der Server holt jedes Bild einmalig und legt es im Shop ab. Beste Optik bei voller Cookie- und IP-Freiheit.
• Direkt von YouTube laden - sieht genauso aus, überträgt aber schon beim Seitenaufruf die IP-Adresse des Besuchers an Google. Der Datenschutzgewinn ist damit nur teilweise.
• Ohne Vorschaubild - dunkler Hintergrund mit Play-Knopf. Bis zum Klick gibt es keine einzige Verbindung nach außen.

Solange das Bild fehlt greift nur bei lokaler Speicherung: Ein frisch eingebautes Video hat noch kein Bild, weil der Abruf im Hintergrund läuft. Bis dahin wird entweder vorläufig von YouTube geladen oder gar kein Bild gezeigt. Wer keine einzige Verbindung zu Google will, wählt hier „Ohne Vorschaubild".Bildformat und Größe: YouTube liefert jedes Bild als JPEG und als WebP. WebP ist bei gleicher Auflösung deutlich kleiner, „Automatisch" probiert es deshalb zuerst. Die Größe ist eine Obergrenze, keine Zusage - maxresdefault ist am schärfsten, existiert aber nicht für jedes Video; fehlt eine Größe, wird die nächstkleinere genommen.

Zu den Seitenverhältnissen: maxresdefault und mqdefault sind nahezu 16:9, sddefault und hqdefault sind 4:3 und haben schwarze Balken. Die werden im Shop weggeschnitten, im Ergebnis sieht man davon nichts.

Vorschaubild verzögert laden setzt das Attribut loading auf lazy. Damit werden Bilder von Videos in geschlossenen Modalboxen nicht schon beim Seitenaufruf geholt.

Vorschaubilder verwalten

Der Reiter zeigt, welche Videos der Shop kennt und wie es um ihre Bilder steht.

Sobald eine Seite mit einem Video ausgeliefert wird, holt der Server das Vorschaubild automatisch - erst nachdem die Seite beim Besucher angekommen ist, es kostet ihn also keine Wartezeit. Je Seitenaufruf werden höchstens vier Bilder geholt, damit eine Seite mit vielen Videos keinen Prozess blockiert. Der stündliche Vorgang bleibt als Netz für alles, was dabei nicht geklappt hat.

• Videos vormerken - Video-Kennungen oder komplette YouTube-Adressen einfügen, mehrere durch Komma oder Leerzeichen getrennt. So lässt sich der Vorrat füllen, bevor eine Seite live geht.
• Offene jetzt holen - arbeitet zehn Einträge je Klick ab, für alle, die nicht warten wollen.
• Fehlgeschlagene erneut versuchen - nach drei Fehlversuchen ruht ein Eintrag. War die Ursache vorübergehend, stellt der Knopf ihn zurück in die Warteschlange.
• Neu holen an einer Zeile lädt genau dieses Bild noch einmal, etwa wenn der Kanal es geändert hat.
• Entfernen löscht Bild und Eintrag. Beim nächsten Seitenaufruf wird das Video automatisch wieder vorgemerkt.

Die Bilder liegen im öffentlichen Dateisystem unter staw-lite-youtube, was auch mit S3 oder anderem entfernten Speicher funktioniert. Kann das Dateisystem keine öffentliche Adresse liefern, liefert das Plugin sie über eine eigene Route mit einem Zwischenspeicher-Hinweis von einem Jahr aus.

Was umgewandelt wird und was nicht

Umgewandelt werden alle iframes mit einer Adresse von youtube.com oder youtube-nocookie.com - gleich ob aus einem Template, aus einer Produktbeschreibung im Editor oder aus einem Erlebniswelten-Element.

Nicht angefasst werden:

• iframe-Markup innerhalb von script, template, textarea, noscript und HTML-Kommentaren
• iframes anderer Anbieter, etwa Vimeo oder Google Maps
• iframes, die ein Lazy-Loader per data-src nachlädt
• Links auf YouTube - es geht ausschließlich um eingebettete Player

Prüfliste für die Abnahme

Auf einer Produktseite mit zwei Videos:

• Seitenquelltext ansehen, nicht das DOM in den Entwicklerwerkzeugen. Es darf kein iframe mit einer youtube.com-Adresse mehr vorkommen.
• In der Konsole ergibt document.querySelectorAll('lite-youtube').length die Anzahl der Videos auf der Seite.
• customElements.get('lite-youtube') liefert die Klasse zurück.
• Netzwerk-Ansicht vor dem Klick: keine Anfragen an youtube.com, keine YouTube-Cookies. Bei lokalen Vorschaubildern zusätzlich keine Anfrage an i.ytimg.com.
• Nach dem Klick startet das Video direkt, ohne zweiten Klick, auch auf iOS und Android.
• Modalbox öffnen, Video starten, Modalbox schließen: der Ton stoppt.
• Zwischen den Reitern der Produktseite wechseln - das Video bleibt bedienbar.
• PageSpeed Insights vorher und nachher auf derselben Seite, Werte notieren.

Zu beachten

Der Bilddownload läuft über i.ytimg.com - das macht der Server, nicht der Besucher, und nur einmal je Video. WebP unterstützen alle aktuellen Browser; nur wer sehr alte bedienen muss, wählt „Nur JPEG".

Support

Fragen und Wünsche gern direkt an uns - der Support kommt vom Entwickler, nicht aus einer Warteschleife. Über die Plugin Suite im Admin lässt sich zusätzlich ein Feature anfragen.

Verfügbarkeit