サイトに導入するスクリプトの挿入とボタン位置の指定

1. PerfittSizeスクリプトタグの挿入

PerfittSizeはスクリプトを挿入するだけで簡単に導入できます。

次のコードをWebサイトのすべてのページに入れてください。通常は全ページ共通のレイアウト(head)に1回入れれば十分です。<head>の中でも上のほうに置くことを推奨します。

<script
    id="PerfittSize-JS"
    type="text/javascript"
    src="https://perfittsize.perfitt.io/js/PerfittSize.js?apiKey=##API_KEY##"
    charset="UTF-8"
></script>

2. Perfittボタンの位置指定

Perfittボタンはサイズインジケーターの1種類です。この靴が大きめか小さめか(サイズ傾向)を表示し、その下に足の計測ボタンが付きます。お客様が決めるのはボタンを置く領域とボタンの色の2つです。

サイズインジケーター

• 商品ページ(PRODUCT)で商品情報を取得できると自動で表示されます。
• 傾向の文言はPerfittが試着・レビューデータから決めます。お客様側では変更できません。
• 計測ボタンの背景色と文字色はブランドカラーに合わせられます。希望のカラーコードをリクエストシートに記入してください(例：背景#111927、文字#FFFFFF)。背景と文字色のコントラストが低いとボタンが見えにくくなるので避けてください。
• 1ページに複数置くこともできます。

領域の指定

ボタンを描画する領域をHTML内に作り、その領域を指すCSS Selectorを初期設置リクエストシートのボタン表示位置タブに記入してPerfitt担当者に送ってください。

上のようなHTML構造のページで、idがperfitt-block-1のdivタグの中にPerfittボタンを表示したい場合、CSS Selectorの値として#perfitt-block-1を入力します。

表示イメージ コードのperfitt-block-1の領域にボタンがこのように入ります。

index.htmlコピー

<head>
	<!-- ... 前略 ... -->
	<script id="PerfittSize-JS" type="text/javascript" src="https://perfittsize.perfitt.io/js/PerfittSize.js?apiKey=##API_KEY##" charset="UTF-8"></script>
	<!-- ... 後略 ... -->
</head>
<body>
	<!-- ... 前略 ... -->
	<div id="perfitt-block-1"></div>
	<!-- ... 後略 ... -->
</body>

#perfitt-block-1

3. 導入の確認

商品ページをスマートフォンで開き、Perfittボタンが表示されれば導入は完了です。PCではボタンを押しても計測画面の代わりにスマートフォンへ引き継ぐQRコードが出るため、確認はモバイルで行ってください。

ボタンが表示されない場合は、トラブルシューティングの「ボタンが表示されない」を上から順に確認してください。

以前のボタンタイプ

2025年より前に導入したお客様の一部は次のタイプを使っています。新規導入では選択肢に含まれません。