商品情報の連携方法とは連携項目をページから読み取る方法

CSS Selector(推奨)

ページのHTMLに<a id="product_no">PerfittShoe</a>のようなタグがあれば、CSS Selectorとして#product_noを記入します。Perfittはその要素のテキストを読み、<input>は値を、<img>は画像URLを読みます。セレクタをカンマ区切りで複数書くと、先に見つかったものを使います。

セレクタの書き方はMDN CSSセレクターを参照してください。

JSON-LD(schema.org)

検索エンジン向けに<script type="application/ld+json">を入れているサイトは多くあります。その中の最上位のキー名(sku、name、imageなど)を記入すると、Perfittが値を読みます。ページデザインが変わっても壊れにくい方法です。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "sku": "PerfittShoe",
  "name": "パーフェクトフィット ニットブースト ワン",
  "image": "https://shop.example.com/images/perfitt-shoe.jpg"
}
</script>

JavaScript変数・関数(window)

ページのスクリプトがグローバル変数に商品情報を持っている場合、変数名とその中のキーを記入します。下の例ではproductInfoとidです。値が変数そのものなら変数名だけを記入します。

グローバル関数が値を返す場合(例：window.getProductId())は関数名を記入します。返された値は文字列として使います。

window.productInfo = {
  id: 'PerfittShoe',
  brand: 'PERFITT',
  name: 'パーフェクトフィット ニットブースト ワン',
};

URLクエリ

ページのURLがhttps://shop.example.com/product?product_no=PerfittShoeなら、キー名としてproduct_noを記入します。

ブラウザストレージ(localStorage · sessionStorage · Cookie)

ページがブラウザストレージに値を保存している場合、そのキー名を記入します。保存された値がJSONなら、内側のキーまで指定して1階層下の値を読めます。Cookieの場合はCookie名を記入します。開発者ツールのApplicationタブでは次のように見えます。

固定値(VALUE)

ページから読み取れない項目は固定値として設定します。例えば単一ブランドのサイトは商品ページにブランド名がないため、brand項目をPERFITTのような固定値にします。