Usa Footnote en un escaparate Catalyst

Comprueba tu versión de Catalyst

Las etiquetas necesitan Catalyst core 1.4 o posterior. Catalyst carga los scripts de Script Manager a través de su gestor de consentimiento de cookies desde la versión 1.3, y la 1.4 añadió la colocación en head y body de la que depende el script de Footnote. La versión está en core/package.json, con el nombre @bigcommerce/catalyst-core.

Una actualización de Catalyst publicada por BigCommerce solo llega a tu escaparate cuando tu desarrollador la incorpora a tu copia, así que un escaparate antiguo se queda en su versión hasta que alguien lo actualiza.

Mantén el gestor de consentimiento en el layout raíz

Catalyst carga los scripts de Script Manager mediante el componente <ConsentManager> de core/app/[locale]/layout.tsx. Si se elimina o se sustituye, el script de Footnote nunca se carga y no aparece ninguna etiqueta. Footnote no puede verlo desde BigCommerce, así que Configuración sigue mostrando el escaparate como cubierto.

Deja el script en «Essential»

Footnote añade un script a Script Manager, llamado Footnote AI image labels, con la categoría de consentimiento «Essential» (imprescindible). El banner de cookies de Catalyst trata los scripts «Essential» como necesarios, así que el script se carga antes de que el comprador elija y también después de que rechace las cookies. No instala cookies ni recoge nada sobre los compradores.

Si alguien cambia la categoría a «Functional», «Analytics» o «Targeting», los compradores que rechazan las cookies dejan de ver las etiquetas. Vuelve a ponerla en «Essential» en Script Manager.

Mantén las imágenes de producto en la CDN de BigCommerce

Footnote encuentra una imagen etiquetada por su dirección en la CDN de BigCommerce, que contiene los números del producto y de la imagen, por ejemplo cdn11.bigcommerce.com/s-abc123/images/stencil/384w/products/157/551/. Catalyst sin modificar muestra las imágenes de producto directamente desde esa dirección, así que funciona sin cambios. Las imágenes que pasan por la optimización de imágenes de Next.js (/_next/image?url=...) también funcionan, porque Footnote lee la dirección original que llevan dentro.

Las etiquetas desaparecen cuando la dirección de una imagen ya no contiene la ruta de BigCommerce. Ocurre con un cargador de imágenes personalizado que reescribe la dirección, con un proxy de imágenes u otro servicio de imágenes delante de la CDN, o con imágenes colocadas con Makeswift.

Permite Footnote en una Content Security Policy personalizada

Catalyst sin modificar no limita desde dónde se cargan los scripts. Si tu desarrollador ha añadido reglas script-src o connect-src, permite https://footnote.pouchapps.com en las dos. El script de las etiquetas se carga desde ahí y obtiene desde ahí los ajustes de tus etiquetas.

Cuenta con hasta una hora para ver los cambios

Catalyst guarda en caché la lista de scripts de Script Manager hasta una hora. Después de instalar Footnote, o de cambiar cualquier cosa de tus etiquetas, el escaparate puede tardar eso en ponerse al día. En Stencil, los mismos cambios se ven en un minuto aproximadamente.

Un desarrollador puede hacer que los cambios se vean antes de dos maneras:

• Volver a desplegar el escaparate. Un despliegue nuevo vuelve a pedir la lista de scripts. Es la solución más sencilla después de instalar Footnote.
• Bajar DEFAULT_REVALIDATE_TARGET. El valor está en segundos y por defecto es 3600. Controla cuánto tiempo guarda Catalyst en caché la mayoría de sus datos de BigCommerce, no solo los scripts, así que un número más bajo supone más peticiones a BigCommerce. Bájalo para hacer pruebas, no para dejarlo así.

Comprueba que se ven las etiquetas

1. En Footnote, abre Configuración y comprueba que tu escaparate Catalyst aparece como cubierto. Essentials solo cubre tu escaparate predeterminado. Pro cubre todos los escaparates.
2. Marca una imagen como Generada con IA y activa Mostrar etiquetas en Configuración.
3. Espera hasta una hora, o pide a tu desarrollador que vuelva a desplegar.
4. Abre esa página de producto en una ventana de navegación privada. Si aparece un banner de cookies, recházalas. La etiqueta debería estar en la esquina que elegiste en la pestaña Insignia. En Catalyst aparece un momento después que la página, cuando la página termina de cargar sus scripts.

Para comprobarlo desde el navegador, abre la consola de desarrollador en cualquier página del escaparate y ejecuta document.documentElement.dataset.footnote. Si devuelve "1", el script de Footnote se está ejecutando ahí.

Soluciona una etiqueta que falta

Si sigues sin resolverlo, escribe a footnote@pouchapps.com con la dirección de tu escaparate, una página de producto que debería mostrar una etiqueta, tu versión de Catalyst y el resultado de la comprobación en la consola. La página de soporte recoge los motivos por los que puede faltar una etiqueta en cualquier escaparate.