Przejdź do treści

Instrukcja konfiguracji Beta

Używaj Footnote w witrynie Catalyst

Ostatnia aktualizacja

Etykiety Footnote działają w Catalyst, witrynie sklepu BigCommerce zbudowanej na Next.js, od wersji 1.4. Obsługa Catalyst jest w wersji beta. Skrypt etykiet przetestowaliśmy na niezmienionym Catalyst 1.12, ale jeszcze nie na własnej wersji Catalyst konkretnego sklepu, więc jeśli coś na tej stronie nie zgadza się z tym, co widzisz, daj nam znać.

Sprawdź wersję Catalyst

Etykiety wymagają Catalyst core w wersji 1.4 lub nowszej. Od wersji 1.3 Catalyst ładuje skrypty z Script Manager przez swój menedżer zgód na pliki cookie, a wersja 1.4 dodała umieszczanie skryptów w sekcjach head i body, na którym opiera się skrypt Footnote. Wersję znajdziesz w core/package.json, pod nazwą @bigcommerce/catalyst-core.

Aktualizacja Catalyst od BigCommerce trafia do twojej witryny dopiero wtedy, gdy programista scali ją ze swoją kopią, więc starsza witryna zostaje przy starej wersji, dopóki ktoś jej nie zaktualizuje.

Zostaw menedżer zgód w głównym layoucie

Catalyst ładuje skrypty z Script Manager przez komponent <ConsentManager> w pliku core/app/[locale]/layout.tsx. Jeśli ktoś go usunie lub zastąpi, skrypt Footnote nigdy się nie załaduje i nie pojawi się żadna etykieta. Footnote nie widzi tego z poziomu BigCommerce, więc Ustawienia nadal pokazują witrynę jako objętą planem.

Zostaw skrypt w kategorii „Essential”

Footnote dodaje do Script Manager jeden skrypt o nazwie Footnote AI image labels, z kategorią zgody „Essential” (niezbędny). Baner cookie w Catalyst traktuje skrypty „Essential” jako niezbędne, więc skrypt ładuje się, zanim kupujący dokona wyboru, i także po odrzuceniu plików cookie. Nie ustawia plików cookie i nie zbiera żadnych danych o kupujących.

Jeśli ktoś zmieni kategorię na „Functional”, „Analytics” lub „Targeting”, kupujący, którzy odrzucą pliki cookie, przestaną widzieć etykiety. Przywróć kategorię „Essential” w Script Manager.

Trzymaj zdjęcia produktów w CDN BigCommerce

Footnote znajduje oznaczone zdjęcie po jego adresie w CDN BigCommerce, który zawiera numer produktu i numer zdjęcia, np. cdn11.bigcommerce.com/s-abc123/images/stencil/384w/products/157/551/. Niezmieniony Catalyst wyświetla zdjęcia produktów bezpośrednio z tego adresu, więc wszystko działa bez zmian. Zdjęcia przepuszczane przez optymalizację obrazów Next.js (/_next/image?url=...) też działają, bo Footnote odczytuje zawarty w nich oryginalny adres.

Etykiety znikają, gdy adres zdjęcia przestaje zawierać ścieżkę BigCommerce. Dzieje się tak przy własnym loaderze obrazów, który przepisuje adres, przy proxy obrazów lub innej usłudze obrazów przed CDN albo przy zdjęciach wstawionych przez Makeswift.

Dopuść Footnote we własnej polityce Content Security Policy

Niezmieniony Catalyst nie ogranicza źródeł, z których ładują się skrypty. Jeśli twój programista dodał reguły script-src lub connect-src, dopuść w obu https://footnote.pouchapps.com. Z tego adresu ładuje się skrypt etykiet i z niego pobiera ustawienia twoich etykiet.

Zmiany mogą potrwać do godziny

Catalyst trzyma listę skryptów z Script Manager w pamięci podręcznej do godziny. Po zainstalowaniu Footnote albo po każdej zmianie etykiet witryna może potrzebować tyle czasu, żeby się zaktualizować. W Stencil te same zmiany widać po mniej więcej minucie.

Programista może przyspieszyć pojawianie się zmian na dwa sposoby:

  • Ponowne wdrożenie witryny. Nowe wdrożenie ponownie pobiera listę skryptów. To najprostsze rozwiązanie po zainstalowaniu Footnote.
  • Obniżenie DEFAULT_REVALIDATE_TARGET. Wartość podaje się w sekundach, a domyślnie wynosi 3600. Określa, jak długo Catalyst trzyma w pamięci podręcznej większość danych z BigCommerce, nie tylko skrypty, więc niższa liczba oznacza więcej zapytań do BigCommerce. Obniż ją na czas testów, a nie na stałe.

Sprawdź, czy etykiety się wyświetlają

  1. W Footnote otwórz Ustawienia i sprawdź, czy twoja witryna Catalyst jest na liście jako objęta planem. Essentials obejmuje tylko domyślną witrynę sklepu. Pro obejmuje wszystkie witryny.
  2. Oznacz jedno zdjęcie jako Stworzone przez AI i włącz Pokazuj etykiety w Ustawieniach.
  3. Poczekaj do godziny albo poproś programistę o ponowne wdrożenie.
  4. Otwórz stronę tego produktu w oknie prywatnym przeglądarki. Jeśli pojawi się baner cookie, odrzuć pliki cookie. Etykieta powinna być w rogu wybranym w zakładce Plakietka. W Catalyst pojawia się chwilę po stronie, gdy strona skończy ładować swoje skrypty.

Aby sprawdzić to w przeglądarce, otwórz konsolę programisty na dowolnej stronie witryny i uruchom document.documentElement.dataset.footnote. Jeśli zwróci "1", skrypt Footnote tam działa.

Napraw brakującą etykietę

Jeśli sprawdzenie w konsoli nie zwraca "1", witryna nie uruchamia skryptu Footnote. Sprawdź po kolei:

  1. Poczekaj, aż minie godzina, albo wdróż witrynę ponownie.
  2. Ustawienia pokazują witrynę jako objętą planem.
  3. Catalyst core jest w wersji 1.4 lub nowszej.
  4. <ConsentManager> nadal jest w core/app/[locale]/layout.tsx.
  5. Skrypt ma w Script Manager kategorię „Essential”.
  6. Każda własna polityka Content Security Policy dopuszcza https://footnote.pouchapps.com.

Jeśli zwraca "1", ale zdjęcie nie ma etykiety, skrypt działa, ale nie dopasował zdjęcia:

  • Sprawdź, czy zdjęcie ma w Footnote status Stworzone przez AI lub Edytowane przez AI.
  • Kliknij zdjęcie prawym przyciskiem myszy, skopiuj jego adres i sprawdź, czy zawiera /products/, a po nim dwie liczby. Jeśli nie, zdjęcie nie pochodzi z CDN BigCommerce w postaci, którą Footnote umie dopasować.
  • W zakładce Plakietka sprawdź, czy włączone są Wyniki kategorii i wyszukiwania. Strony Catalyst nie mają znacznika, który mówiłby Footnote, że strona jest stroną produktu, więc ten przełącznik obejmuje też strony produktów w Catalyst.

Jeśli nadal masz problem, napisz na footnote@pouchapps.com i podaj adres witryny, stronę produktu, na której powinna być etykieta, wersję Catalyst i wynik sprawdzenia w konsoli. Na stronie pomocy znajdziesz przyczyny, z których etykieta może zniknąć w każdej witrynie.