Naar de inhoud

Installatiegids Bèta

Footnote gebruiken op een Catalyst-storefront

Laatst bijgewerkt

Footnote-labels werken op Catalyst, de BigCommerce-storefront op basis van Next.js, vanaf versie 1.4. De ondersteuning voor Catalyst is in bèta. We hebben het labelscript getest op standaard Catalyst 1.12, maar nog niet op de eigen Catalyst-build van een winkel. Klopt iets op deze pagina niet met wat je ziet, laat het ons dan weten.

Controleer je Catalyst-versie

Labels hebben Catalyst core 1.4 of nieuwer nodig. Catalyst laadt scripts uit Script Manager vanaf versie 1.3 via de cookie-toestemmingsmanager, en in 1.4 kwam de plaatsing in head en body erbij waar het script van Footnote op rekent. De versie staat in core/package.json, onder de naam @bigcommerce/catalyst-core.

Een Catalyst-update van BigCommerce bereikt je storefront pas als je developer die in jullie kopie samenvoegt. Een oudere storefront blijft dus op de oude versie tot iemand die bijwerkt.

Catalyst laadt scripts uit Script Manager via de component <ConsentManager> in core/app/[locale]/layout.tsx. Wordt die verwijderd of vervangen, dan laadt het script van Footnote nooit en verschijnen er geen labels. Footnote kan dat vanuit BigCommerce niet zien, dus Instellingen toont de storefront nog steeds als gedekt.

Laat het script op “Essential” staan

Footnote voegt één script toe aan Script Manager, met de naam “Footnote AI image labels” en de toestemmingscategorie “Essential”. De cookiebanner van Catalyst behandelt Essential-scripts als noodzakelijk, dus het script laadt voordat een klant een keuze maakt en ook nadat die cookies heeft geweigerd. Het plaatst geen cookies en verzamelt niets over klanten.

Wijzigt iemand de categorie in “Functional”, “Analytics” of “Targeting”, dan zien klanten die cookies weigeren geen labels meer. Zet de categorie in Script Manager terug op “Essential”.

Houd productafbeeldingen op het BigCommerce CDN

Footnote vindt een gelabelde afbeelding via het adres op het BigCommerce CDN, waarin het product- en afbeeldingsnummer staan, bijvoorbeeld cdn11.bigcommerce.com/s-abc123/images/stencil/384w/products/157/551/. Standaard Catalyst toont productafbeeldingen rechtstreeks vanaf dat adres, dus dit werkt zonder aanpassingen. Afbeeldingen die door de beeldoptimalisatie van Next.js gaan (/_next/image?url=...) werken ook, omdat Footnote het oorspronkelijke adres daarin leest.

Labels ontbreken als een afbeeldingsadres het BigCommerce-pad niet meer bevat. Dat gebeurt bij een eigen image loader die het adres herschrijft, een beeldproxy of een andere beelddienst vóór het CDN, of bij afbeeldingen die met Makeswift zijn geplaatst.

Sta Footnote toe in een eigen Content Security Policy

Standaard Catalyst beperkt niet waarvandaan scripts laden. Heeft je developer regels voor script-src of connect-src toegevoegd, sta dan in beide https://footnote.pouchapps.com toe. Het labelscript laadt van daar en haalt daar je labelinstellingen op.

Reken op maximaal een uur voor wijzigingen

Catalyst bewaart de lijst met scripts uit Script Manager tot een uur in de cache. Nadat je Footnote hebt geïnstalleerd of iets aan je labels hebt gewijzigd, kan het zo lang duren voordat de storefront bij is. Op Stencil verschijnen dezelfde wijzigingen binnen ongeveer een minuut.

Een developer kan wijzigingen op twee manieren sneller zichtbaar maken:

  • De storefront opnieuw deployen. Een nieuwe deploy haalt de scriptlijst opnieuw op. Na het installeren van Footnote is dit de eenvoudigste oplossing.
  • DEFAULT_REVALIDATE_TARGET verlagen. De waarde is in seconden en staat standaard op 3600. Hij bepaalt hoe lang Catalyst het grootste deel van zijn BigCommerce-gegevens in de cache houdt, niet alleen scripts, dus een lager getal betekent meer verzoeken aan BigCommerce. Verlaag hem om te testen, en laat hem niet laag staan.

Controleer of labels verschijnen

  1. Open in Footnote Instellingen en controleer of je Catalyst-storefront als gedekt in de lijst staat. Essentials dekt alleen je standaardstorefront. Pro dekt elke storefront.
  2. Markeer één afbeelding als “AI-gegenereerd” en zet in Instellingen “Labels tonen” aan.
  3. Wacht maximaal een uur, of vraag je developer om opnieuw te deployen.
  4. Open die productpagina in een privévenster. Verschijnt er een cookiebanner, weiger dan. Het label hoort in de hoek te staan die je op het tabblad Badge hebt gekozen. Op Catalyst verschijnt het even na de pagina, zodra de pagina klaar is met het laden van de scripts.

Om het in de browser te controleren, open je op een willekeurige pagina van de storefront de ontwikkelaarsconsole en voer je document.documentElement.dataset.footnote uit. Geeft dat "1" terug, dan draait het script van Footnote daar.

Een ontbrekend label oplossen

Geeft de controle in de console geen "1" terug, dan draait het script van Footnote niet op de storefront. Controleer deze punten op volgorde:

  1. Wacht tot het uur voorbij is, of deploy opnieuw.
  2. Instellingen toont de storefront als gedekt.
  3. Catalyst core is versie 1.4 of nieuwer.
  4. <ConsentManager> staat nog in core/app/[locale]/layout.tsx.
  5. Het script staat in Script Manager op “Essential”.
  6. Een eigen Content Security Policy staat https://footnote.pouchapps.com toe.

Geeft hij wel "1" terug maar heeft de afbeelding geen label, dan draait het script maar heeft het de afbeelding niet gekoppeld:

  • Controleer of de afbeelding in Footnote is gemarkeerd als “AI-gegenereerd” of “AI-bewerkt”.
  • Klik met de rechtermuisknop op de afbeelding, kopieer het adres en controleer of het /products/ bevat, gevolgd door twee getallen. Zo niet, dan komt de afbeelding niet van het BigCommerce CDN in een vorm die Footnote kan koppelen.
  • Controleer op het tabblad Badge of “Categorie- en zoekresultaten” aan staat. Catalyst-pagina’s hebben geen markering die Footnote vertelt dat een pagina een productpagina is, dus die schakelaar dekt ook productpagina’s in Catalyst.

Kom je er niet uit, mail dan naar footnote@pouchapps.com met het adres van je storefront, een productpagina die een label zou moeten tonen, je Catalyst-versie en de uitkomst van de controle in de console. De supportpagina somt de redenen op waarom een label op elke storefront kan ontbreken.