Zum Inhalt springen

Einrichtung Beta

Footnote auf einer Catalyst-Storefront nutzen

Zuletzt aktualisiert

Footnote-Labels funktionieren auf Catalyst, der BigCommerce-Storefront auf Basis von Next.js, ab Version 1.4. Die Catalyst-Unterstützung ist in der Beta. Wir haben das Label-Skript mit dem Standard-Catalyst 1.12 getestet, aber noch nicht mit dem eigenen Catalyst-Build eines Shops. Wenn also etwas auf dieser Seite nicht zu dem passt, was Sie sehen, sagen Sie uns Bescheid.

Catalyst-Version prüfen

Labels brauchen Catalyst core 1.4 oder neuer. Catalyst lädt Skripte aus dem Script Manager ab Version 1.3 über seinen Cookie-Consent-Manager, und mit 1.4 kam die Platzierung im Head und Body hinzu, auf die das Skript von Footnote angewiesen ist. Die Version steht in core/package.json unter dem Namen @bigcommerce/catalyst-core.

Ein Catalyst-Update von BigCommerce erreicht Ihre Storefront erst, wenn Ihr Entwickler es in Ihre Kopie übernimmt. Eine ältere Storefront bleibt also auf ihrer alten Version, bis jemand sie aktualisiert.

Catalyst lädt Skripte aus dem Script Manager über die Komponente <ConsentManager> in core/app/[locale]/layout.tsx. Wird sie entfernt oder ersetzt, lädt das Skript von Footnote nie, und es erscheinen keine Labels. Footnote kann das von BigCommerce aus nicht erkennen, deshalb zeigen die Einstellungen die Storefront weiterhin als abgedeckt an.

Das Skript auf „Essential“ lassen

Footnote fügt dem Script Manager ein Skript namens „Footnote AI image labels“ mit der Einwilligungskategorie „Essential“ hinzu. Das Cookie-Banner von Catalyst behandelt Essential-Skripte als unbedingt erforderlich. Das Skript lädt also, bevor Kunden eine Wahl treffen, und auch nachdem sie Cookies abgelehnt haben. Es setzt keine Cookies und erfasst nichts über Kunden.

Ändert jemand die Kategorie auf „Functional“, „Analytics“ oder „Targeting“, sehen Kunden, die Cookies ablehnen, keine Labels mehr. Stellen Sie sie im Script Manager wieder auf „Essential“.

Produktbilder im BigCommerce CDN lassen

Footnote findet ein gekennzeichnetes Bild über seine Adresse im BigCommerce CDN, die die Produkt- und Bildnummer enthält, zum Beispiel cdn11.bigcommerce.com/s-abc123/images/stencil/384w/products/157/551/. Das Standard-Catalyst rendert Produktbilder direkt von dieser Adresse, das funktioniert also ohne Änderungen. Bilder, die durch die Bildoptimierung von Next.js laufen (/_next/image?url=...), funktionieren auch, weil Footnote die ursprüngliche Adresse darin liest.

Labels fehlen, wenn eine Bildadresse den BigCommerce-Pfad nicht mehr enthält. Das passiert bei einem eigenen Image Loader, der die Adresse umschreibt, bei einem Bild-Proxy oder einem anderen Bilddienst vor dem CDN und bei Bildern, die mit Makeswift platziert wurden.

Footnote in einer eigenen Content Security Policy erlauben

Das Standard-Catalyst schränkt nicht ein, woher Skripte laden. Hat Ihr Entwickler Regeln für script-src oder connect-src hinzugefügt, erlauben Sie in beiden https://footnote.pouchapps.com. Das Label-Skript lädt von dort und ruft von dort Ihre Label-Einstellungen ab.

Bis zu einer Stunde für Änderungen einplanen

Catalyst speichert die Liste der Skripte aus dem Script Manager bis zu einer Stunde im Cache. Nachdem Sie Footnote installiert oder etwas an Ihren Labels geändert haben, kann die Storefront so lange brauchen, um nachzuziehen. Bei Stencil erscheinen dieselben Änderungen innerhalb von etwa einer Minute.

Ein Entwickler kann Änderungen auf zwei Wegen früher sichtbar machen:

  • Die Storefront neu deployen. Ein frisches Deployment ruft die Skriptliste neu ab. Nach der Installation von Footnote ist das die einfachste Lösung.
  • DEFAULT_REVALIDATE_TARGET senken. Der Wert ist in Sekunden angegeben, Standard ist 3600. Er steuert, wie lange Catalyst den Großteil seiner BigCommerce-Daten im Cache hält, nicht nur Skripte. Ein niedrigerer Wert bedeutet also mehr Anfragen an BigCommerce. Senken Sie ihn zum Testen, statt ihn dauerhaft niedrig zu lassen.

Prüfen, ob Labels erscheinen

  1. Öffnen Sie in Footnote die Einstellungen und prüfen Sie, ob Ihre Catalyst-Storefront als abgedeckt aufgeführt ist. Essentials deckt nur Ihre Standard-Storefront ab. Pro deckt alle Storefronts ab.
  2. Markieren Sie ein Bild als „AI-generiert“ und schalten Sie in den Einstellungen „Labels anzeigen“ ein.
  3. Warten Sie bis zu einer Stunde, oder bitten Sie Ihren Entwickler, neu zu deployen.
  4. Öffnen Sie diese Produktseite in einem privaten Browserfenster. Wenn ein Cookie-Banner erscheint, lehnen Sie ab. Das Label sollte in der Ecke sitzen, die Sie im Tab „Badge“ gewählt haben. Bei Catalyst erscheint es einen Moment nach der Seite, sobald die Seite ihre Skripte geladen hat.

Zur Prüfung im Browser öffnen Sie auf einer beliebigen Seite der Storefront die Entwicklerkonsole und führen document.documentElement.dataset.footnote aus. Gibt das "1" zurück, läuft dort das Skript von Footnote.

Ein fehlendes Label beheben

Wenn die Konsolenprüfung nicht "1" zurückgibt, läuft auf der Storefront das Skript von Footnote nicht. Prüfen Sie der Reihe nach:

  1. Warten Sie, bis die Stunde vorbei ist, oder deployen Sie neu.
  2. Die Einstellungen führen die Storefront als abgedeckt auf.
  3. Catalyst core ist Version 1.4 oder neuer.
  4. <ConsentManager> steht noch in core/app/[locale]/layout.tsx.
  5. Das Skript steht im Script Manager auf „Essential“.
  6. Eine eigene Content Security Policy erlaubt https://footnote.pouchapps.com.

Wenn sie "1" zurückgibt, das Bild aber kein Label hat, läuft das Skript, hat das Bild aber nicht zugeordnet:

  • Prüfen Sie, ob das Bild in Footnote als „AI-generiert“ oder „AI-bearbeitet“ markiert ist.
  • Klicken Sie mit der rechten Maustaste auf das Bild, kopieren Sie die Bildadresse und prüfen Sie, ob sie /products/ gefolgt von zwei Zahlen enthält. Falls nicht, kommt das Bild nicht in einer Form aus dem BigCommerce CDN, die Footnote zuordnen kann.
  • Prüfen Sie im Tab „Badge“, ob „Kategorie- und Suchergebnisse“ eingeschaltet ist. Catalyst-Seiten tragen keine Markierung, die Footnote sagt, dass eine Seite eine Produktseite ist. Dieser Schalter deckt daher auch Produktseiten in Catalyst ab.

Kommen Sie nicht weiter, schreiben Sie an footnote@pouchapps.com mit der Adresse Ihrer Storefront, einer Produktseite, die ein Label zeigen sollte, Ihrer Catalyst-Version und dem Ergebnis der Konsolenprüfung. Die Support-Seite listet die Gründe auf, aus denen ein Label auf jeder Storefront fehlen kann.