本文へスキップ

設定ガイド ベータ

CatalystストアフロントでFootnoteを使う

最終更新日

Footnoteのラベルは、Next.jsで構築されたBigCommerceのストアフロントであるCatalystで、バージョン1.4以降に対応しています。Catalystへの対応はベータ版です。ラベルのスクリプトは標準のCatalyst 1.12でテストしていますが、各ストアが独自にビルドしたCatalystではまだテストしていません。このページの内容と実際の表示が異なる場合は、お知らせください。

Catalystのバージョンを確認する

ラベルにはCatalyst core 1.4以降が必要です。Catalystはバージョン1.3からCookie同意マネージャー経由でScript Managerのスクリプトを読み込むようになり、1.4でFootnoteのスクリプトが利用するheadとbodyへの配置が追加されました。バージョンはcore/package.jsonの@bigcommerce/catalyst-coreという名前の項目で確認できます。

BigCommerceが公開したCatalystの更新は、開発者がストアのコードにマージして初めてストアフロントに反映されます。そのため、古いストアフロントは誰かが更新するまで古いバージョンのままです。

ルートレイアウトの同意マネージャーを残す

CatalystはScript Managerのスクリプトを、core/app/[locale]/layout.tsxにある<ConsentManager>コンポーネント経由で読み込みます。これを削除したり置き換えたりすると、Footnoteのスクリプトは読み込まれず、ラベルは表示されません。FootnoteはBigCommerce側からこの状態を確認できないため、「設定」ではそのストアフロントが対象として表示されたままになります。

スクリプトは「Essential」のままにする

FootnoteはScript Managerに「Footnote AI image labels」というスクリプトを1つ追加し、同意カテゴリを「Essential」（必須）に設定します。CatalystのCookieバナーは「Essential」のスクリプトを必須として扱うため、このスクリプトは買い物客が選択する前にも、Cookieを拒否した後にも読み込まれます。Cookieは設定せず、買い物客の情報も収集しません。

カテゴリが「Functional」「Analytics」「Targeting」のいずれかに変更されると、Cookieを拒否した買い物客にはラベルが表示されなくなります。Script Managerで「Essential」に戻してください。

商品画像はBigCommerceのCDNに置く

Footnoteは、ラベル付きの画像をBigCommerceのCDN上のアドレスで見つけます。このアドレスには商品番号と画像番号が含まれます。例：cdn11.bigcommerce.com/s-abc123/images/stencil/384w/products/157/551/。標準のCatalystは商品画像をこのアドレスから直接表示するため、変更なしで動作します。Next.jsの画像最適化（/_next/image?url=...）を通した画像も、Footnoteが内部の元のアドレスを読み取るため動作します。

画像のアドレスにBigCommerceのパスが含まれなくなると、ラベルは表示されません。アドレスを書き換える独自の画像ローダー、CDNの前に置いた画像プロキシや別の画像サービス、Makeswiftで配置した画像などがこれに当たります。

独自のコンテンツセキュリティポリシーでFootnoteを許可する

標準のCatalystは、スクリプトの読み込み元を制限していません。開発者がscript-srcやconnect-srcのルールを追加している場合は、両方でhttps://footnote.pouchapps.comを許可してください。ラベルのスクリプトはそこから読み込まれ、ラベルの設定もそこから取得します。

変更の反映には最大1時間かかる

CatalystはScript Managerのスクリプト一覧を最大1時間キャッシュします。Footnoteをインストールした後やラベルの設定を変更した後は、ストアフロントに反映されるまでそれだけかかることがあります。Stencilでは、同じ変更が1分ほどで反映されます。

開発者は、次の2つの方法で変更を早く反映できます。

  • ストアフロントを再デプロイする。 新しくデプロイするとスクリプト一覧が再取得されます。Footnoteのインストール後は、これがもっとも簡単な方法です。
  • DEFAULT_REVALIDATE_TARGETを小さくする。 単位は秒で、初期値は3600です。この設定はスクリプトだけでなく、CatalystがキャッシュするBigCommerceのデータの大半に影響するため、値を小さくするとBigCommerceへのリクエストが増えます。テストのときだけ下げ、そのままにしないでください。

ラベルが表示されることを確認する

  1. Footnoteで「設定」を開き、Catalystストアフロントが対象として表示されていることを確認します。Essentialsの対象はデフォルトのストアフロントだけです。Proはすべてのストアフロントが対象です。
  2. 画像を1枚「AI生成」に指定し、「設定」で「ラベルを表示」をオンにします。
  3. 最大1時間待つか、開発者に再デプロイを依頼します。
  4. その商品ページをブラウザのプライベートウィンドウで開きます。Cookieバナーが表示されたら拒否します。ラベルは「バッジ」タブで選んだ隅に表示されるはずです。Catalystでは、ページがスクリプトを読み込み終えてから少し遅れて表示されます。

ブラウザで確認するには、ストアフロントの任意のページで開発者コンソールを開き、document.documentElement.dataset.footnoteを実行します。"1"が返れば、そのページでFootnoteのスクリプトが動作しています。

ラベルが表示されないときの対処

コンソールでの確認結果が"1"にならない場合、そのストアフロントではFootnoteのスクリプトが動作していません。次の順に確認してください。

  1. 1時間待つか、再デプロイする。
  2. 「設定」でそのストアフロントが対象として表示されている。
  3. Catalyst coreがバージョン1.4以降である。
  4. <ConsentManager>がcore/app/[locale]/layout.tsxに残っている。
  5. Script Managerでスクリプトが「Essential」に設定されている。
  6. 独自のコンテンツセキュリティポリシーでhttps://footnote.pouchapps.comが許可されている。

"1"が返るのに画像にラベルが付かない場合、スクリプトは動作していますが、画像と照合できていません。

  • Footnoteで、その画像が「AI生成」または「AI編集」に指定されていることを確認します。
  • 画像を右クリックしてアドレスをコピーし、/products/の後に2つの数字が続いているか確認します。続いていない場合、その画像はFootnoteが照合できる形でBigCommerceのCDNから配信されていません。
  • 「バッジ」タブで「カテゴリと検索結果」がオンになっていることを確認します。Catalystのページには商品ページであることをFootnoteに伝える目印がないため、このスイッチがCatalystの商品ページにも適用されます。

それでも解決しない場合は、ストアフロントのアドレス、ラベルが表示されるはずの商品ページ、Catalystのバージョン、コンソールでの確認結果を添えて、footnote@pouchapps.comまでメールでお問い合わせください。どのストアフロントでもラベルが表示されなくなる理由は、サポートページにまとめています。