Aller au contenu

Guide de configuration Bêta

Utiliser Footnote sur une vitrine Catalyst

Dernière mise à jour

Les étiquettes Footnote fonctionnent sur Catalyst, la vitrine BigCommerce construite avec Next.js, à partir de la version 1.4. La prise en charge de Catalyst est en bêta. Nous avons testé le script des étiquettes sur Catalyst 1.12 standard, mais pas encore sur la version de Catalyst propre à une boutique. Si quelque chose sur cette page ne correspond pas à ce que vous voyez, dites-le-nous.

Vérifier votre version de Catalyst

Les étiquettes nécessitent Catalyst core 1.4 ou une version ultérieure. Catalyst charge les scripts de Script Manager via son gestionnaire de consentement aux cookies depuis la version 1.3, et la 1.4 a ajouté le placement dans l’en-tête et le corps de la page dont dépend le script de Footnote. La version se trouve dans core/package.json, sous le nom @bigcommerce/catalyst-core.

Une mise à jour de Catalyst publiée par BigCommerce n’atteint votre vitrine que lorsque votre développeur la fusionne dans votre copie. Une vitrine plus ancienne reste donc sur son ancienne version jusqu’à ce que quelqu’un la mette à jour.

Garder le gestionnaire de consentement dans le layout racine

Catalyst charge les scripts de Script Manager via le composant <ConsentManager> dans core/app/[locale]/layout.tsx. S’il est supprimé ou remplacé, le script de Footnote ne se charge jamais et aucune étiquette ne s’affiche. Footnote ne peut pas le voir depuis BigCommerce, donc Paramètres indique toujours la vitrine comme couverte.

Laisser le script dans la catégorie « Essential »

Footnote ajoute un script à Script Manager, appelé « Footnote AI image labels », avec la catégorie de consentement « Essential » (essentiel). Le bandeau cookies de Catalyst traite les scripts « Essential » comme nécessaires : le script se charge avant que le client fasse son choix, et après un refus des cookies. Il ne dépose aucun cookie et ne collecte rien sur les clients.

Si quelqu’un passe la catégorie à « Functional », « Analytics » ou « Targeting », les clients qui refusent les cookies ne voient plus les étiquettes. Remettez-la sur « Essential » dans Script Manager.

Garder les images produit sur le CDN de BigCommerce

Footnote retrouve une image étiquetée par son adresse sur le CDN de BigCommerce, qui contient les numéros du produit et de l’image, par exemple cdn11.bigcommerce.com/s-abc123/images/stencil/384w/products/157/551/. Catalyst standard affiche les images produit directement depuis cette adresse, donc cela fonctionne sans modification. Les images qui passent par l’optimisation d’images de Next.js (/_next/image?url=...) fonctionnent aussi, car Footnote lit l’adresse d’origine qu’elles contiennent.

Les étiquettes disparaissent quand l’adresse d’une image ne contient plus le chemin BigCommerce. Cela arrive avec un chargeur d’images personnalisé qui réécrit l’adresse, avec un proxy d’images ou un autre service d’images placé devant le CDN, ou avec des images placées via Makeswift.

Autoriser Footnote dans une politique de sécurité du contenu personnalisée

Catalyst standard ne restreint pas l’origine des scripts. Si votre développeur a ajouté des règles script-src ou connect-src (CSP), autorisez https://footnote.pouchapps.com dans les deux. Le script des étiquettes se charge depuis cette adresse et y récupère vos réglages d’étiquettes.

Prévoir jusqu’à une heure pour les modifications

Catalyst garde en cache la liste des scripts de Script Manager jusqu’à une heure. Après l’installation de Footnote, ou après toute modification de vos étiquettes, la vitrine peut mettre ce temps à suivre. Sur Stencil, les mêmes modifications apparaissent en une minute environ.

Un développeur peut faire apparaître les modifications plus tôt de deux façons :

  • Redéployer la vitrine. Un nouveau déploiement récupère à nouveau la liste des scripts. C’est la solution la plus simple après l’installation de Footnote.
  • Baisser DEFAULT_REVALIDATE_TARGET. Ce réglage est en secondes et vaut 3600 par défaut. Il fixe la durée pendant laquelle Catalyst garde en cache la plupart de ses données BigCommerce, pas seulement les scripts : une valeur plus basse signifie donc plus de requêtes vers BigCommerce. Baissez-le le temps de vos tests plutôt que de le laisser bas.

Vérifier que les étiquettes s’affichent

  1. Dans Footnote, ouvrez Paramètres et vérifiez que votre vitrine Catalyst figure comme couverte. Essentials ne couvre que votre vitrine par défaut. Pro couvre toutes les vitrines.
  2. Marquez une image comme Générée par IA, et activez « Afficher les étiquettes » dans Paramètres.
  3. Attendez jusqu’à une heure, ou demandez à votre développeur de redéployer.
  4. Ouvrez cette page produit dans une fenêtre de navigation privée. Si un bandeau cookies apparaît, refusez. L’étiquette doit se trouver dans le coin choisi dans l’onglet Badge. Sur Catalyst, elle apparaît un instant après la page, une fois que la page a fini de charger ses scripts.

Pour vérifier depuis le navigateur, ouvrez la console de développement sur n’importe quelle page de la vitrine et exécutez document.documentElement.dataset.footnote. S’il renvoie "1", le script de Footnote s’y exécute.

Corriger une étiquette manquante

Si la vérification dans la console ne renvoie pas "1", la vitrine n’exécute pas le script de Footnote. Vérifiez ces points dans l’ordre :

  1. Attendez que l’heure soit passée, ou redéployez.
  2. Paramètres indique la vitrine comme couverte.
  3. Catalyst core est en version 1.4 ou ultérieure.
  4. <ConsentManager> est toujours dans core/app/[locale]/layout.tsx.
  5. Le script est dans la catégorie « Essential » dans Script Manager.
  6. Toute politique de sécurité du contenu personnalisée autorise https://footnote.pouchapps.com.

S’il renvoie "1" mais que l’image n’a pas d’étiquette, le script s’exécute mais n’a pas reconnu l’image :

  • Vérifiez que l’image est marquée Générée par IA ou Retouchée par IA dans Footnote.
  • Faites un clic droit sur l’image, copiez son adresse et vérifiez qu’elle contient /products/ suivi de deux nombres. Sinon, l’image ne provient pas du CDN de BigCommerce sous une forme que Footnote peut reconnaître.
  • Dans l’onglet Badge, vérifiez que « Catégories et résultats de recherche » est activé. Les pages Catalyst ne portent aucun marqueur qui indique à Footnote qu’une page est une page produit, donc ce réglage couvre aussi les pages produit Catalyst.

Si vous êtes toujours bloqué, écrivez à footnote@pouchapps.com en indiquant l’adresse de votre vitrine, une page produit qui devrait afficher une étiquette, votre version de Catalyst et le résultat de la vérification dans la console. La page d’assistance liste les raisons pour lesquelles une étiquette peut manquer sur n’importe quelle vitrine.