自社サイトでのオンライン注文
ウィジェット**「オンライン注文」**は、すでにお持ちのサイトに注文受付を追加します。移行や再コーディングは不要です。ウィジェットがサイトのページを読み取り、「カートに入れる」ボタンを配置し、既存のマークアップの上にカートと注文手続きを重ねて表示します。
場所:マーケティング → 「マイサイト」 → 「オンライン注文」カード → 歯車。設置コードはすべてのウィジェット共通です。マイサイトをご覧ください。
4つの動作モード#
| モード | 訪問者に表示されるもの | 選ぶ場面 |
|---|---|---|
| 自社ストアフロント | 「注文する」ボタン。クリックするとメニューとカートを備えたストアフロントがページ上に開きます | 名刺サイト、ランディングページ、ブログ — ページ上に商品がない場合 |
| サイト上に重ねる | 既存のマークアップ内に直接表示される「カートに入れる」ボタン — 商品ページとカタログ、カートは画面の隅に表示 | サイトに商品カタログはあるが注文受付がない(または使いにくい)場合 |
| ボタンを置き換える | 上記に加え、サイト本来の「購入」ボタンとカートが非表示になります | すべての注文を当サービス経由にしたい場合 |
| 完全置き換え | サイトはそのままに見えます。ボタンは本来のものですが、押すと商品が当サービスのカートに移動し、サイトのカートへの遷移は当サービスのカートを開き、カウンターと金額は当サービスの数値を表示します | ストアフロントのマークアップはすでに整っており見た目を変えたくないが、注文と価格は当サービスのものにしたい場合 |
サイトのスキャン#
「自社ストアフロント」以外のすべてのモードはサイトマップに基づいて動作します。サイトマップとは、ページ上の商品名、価格、画像、本来の購入ボタン、本来のカートがどこにあるかを示すものです。
マップはスキャナーが構築します。アドレスを指定して「サイトをスキャン」を押してください — 通常1〜3分です。内容は次のとおりです。
- プラットフォームのプリセット — 8つのプラットフォーム向けにセレクターの既成セットがあります:WooCommerce、Shopify、Magento、PrestaShop、Bitrix、InSales、Tilda、OpenCart。スキャナーは指紋からEcwid、Squarespace、Wixも認識しますが、これらのプリセットはなく、マップはAI解析で構築されます。
- AIによるマークアップ解析 — 自作サイトや非標準テーマ向けです。
- 検証 — 検出された各セレクターを実際のページで確認します。データは商品の構造化データと照合されます。検証されていないセレクターはマップに含まれません — ボタンが間違った場所にあるより、ボタンが少ないほうがよいのです。
結果として、判定されたプラットフォーム、スキャンされたページ数、認識された商品の例、そして商品ページとカタログカードが区別して表示されます。マップはボタンで適用され、ウィジェットの設定とともに保存されます。サイトが変更されたら、再スキャンするだけです。
ボタンの配置とデザイン#
ライブプレビュー付きのレイアウトで設定します — 典型的な商品ページとカタログです。
- 商品ページのボタン:価格の下、サイト本来のボタンの隣、画面下部に固定、または無効(「完全置き換え」の主なシナリオ — 自社ボタンはなく、訪問者は本来のボタンを押します)。
- カタログカードのボタン:カードの上、カードの下、または無効。
- カートボタン:画面の四隅のいずれか。
- ボタンの色とテキスト(「カートに入れる」「注文する」、独自のもの)— ラベルはサイトの言語ごとに個別に設定できます。
独自の価格#
個別のトグルです。ウィジェットはサイトの価格を独自の価格に再計算し、訪問者に表示します — 商品ページ、カタログ、カートで。
- 基本ルールはすべての商品に適用されます:パーセント、通貨での加算、「下限/上限」の制限、丸め(整数に、末尾を…9に、小数を.99に、10単位に、10/50/100の倍数に)。
- 個別の上書きはページアドレス、名称、型番ごとに設定します:独自の価格、独自のルール、カート内での別の名称、または「販売停止」— その場合ボタンは配置されません。
- 表示オプション:新しい価格の隣に取り消し線で表示する旧価格、「セール価格」などのラベル、独自の通貨ラベル、価格を表示する追加箇所(固定パネル、「類似商品」ブロック)。サイトのマークアップ内で直接価格を書き換える処理は無効にできます。訪問者にはサイトの価格が表示され、カートには独自の価格が入ります。
- 管理画面には、サイトから取得した価格サンプルでの「変更前 → 変更後」プレビューがあります。
⚠️ 書き換えは表示上のみです。サイトのバックエンドは新しい価格を認識しません。そのため、独自の価格は注文の置き換えと併用してこそ意味があります。そうでなければ、残った本来のボタンを押した訪問者は、当サービスを経由せず旧価格で注文してしまいます。「完全置き換え」モードでは独自の価格はデフォルトで有効になり、置き換えなしで有効にすると管理画面が警告します。
注文後の流れ#
訪問者は商品をカートに入れ、カートを開いて注文手続きを行います — 名前、電話番号、配送または住所を指定した店舗受け取り、コメント。注文は管理画面の**「注文」**セクションに届きます。ストアフロント、レジ、アグリゲーターの注文と同じ扱いです:同じステータス、通知、印刷、キッチンへの伝達。ウィジェット専用の「受信トレイ」はありません。注文の各行には、カートに入れたサイトのページへのリンクが付いて届くため、オペレーターは何が注文されたかを確認できます。
オンライン注文に関するその他の設定は、同じくウィジェットのモーダルで行います。「サイト上のウィジェット」「注文受付」「配送と店舗受け取り」「支払い」「注文手続き」「領収書のフィスカリゼーション」というセクションを持つアコーディオン形式で、管理画面の対応するセクションと同じフォームが一か所にまとめられています。
「入荷通知」ボタン#
同じウィジェットの2つ目の独立したタグです。サイト上の完売商品ページ用です。ゲストがボタンを押し、メールアドレスを入力し、メール内のリンクで確認すると、商品が在庫に戻ったときに1通のメールを受け取ります。確認メールには「確認する」の隣に「拒否する」もあります。通知を送る仕組みは、当社のストアフロントの「入荷通知」サブスクリプションと同じで、2つ目は作られません。
接続方法:オンライン注文の設定画面で**「🔔 入荷通知」**カードを開き、商品を選び、公開済みカタログにバリエーションがあればそれを選ぶと、ジェネレーターがコードを生成します。商品ページに data-cenaly-stock="<商品>" 属性を持つボタンを配置し(完成例は同じカード内にあります)、stock/v1.js タグを一度挿入します。ローダーは1キロバイト未満で、できることはただ1つ、クリックを待つことだけです。サブスクリプションフォーム、辞書、送信は、ゲストの操作後に別ファイルとして読み込まれます。
重要な点:
- 商品は手動で紐付けます。 他社のカタログを照合したり、他社ページの在庫を読み取ったりはしません。「在庫に戻った」とは、当社におけるお客様のカタログ内の在庫であり、当社のストアフロントが見るものと同じです。ロケーションの公開済みカタログにない商品は、ボタンが受け付けません。
- サブスクリプションはメールで確認されます(double opt-in):メール内のリンクをクリックするまで、入荷通知メールは送信されません。
- サブスクリプションは商品を確保しません。 通知は当社カタログで在庫に戻ったときに送信されます。現在のバージョンでは、1つのメールアドレスは1商品につき1回だけ考慮されます:同じ商品の別バリエーションへの再サブスクリプションは、すでに選択したバリエーションを置き換えません。
- 厳格なCSPではnonceがある場合のみ、CDNスクリプトの追加許可または適切な
'strict-dynamic'ポリシーがないと、サブスクリプションフォームはまだ開きません:詳細は「マイサイト」をご覧ください。 - これは単一のタグではありません。 「入荷通知」ボタンは「マイサイト」の単一ローダーでは起動しません — 独自のタグとページ上の独自のマークアップがあり、設置した場所でのみ機能します。
制限事項#
- スキャナーはサーバー側のHTMLを読み取ります。カタログ全体がJavaScriptで描画されている場合、商品ページが見つからないことがあります — その場合は「自社ストアフロント」モードが機能します。
- カート内の商品はお客様のサイトのページから取得され、管理画面のカタログからではありません:名前と価格はウィジェットがページ自体から読み取ります(必要に応じてお客様の価格ルールで再計算します)。そのためにカタログを当社に移行する必要はありません — ただし、そのような注文は管理画面の在庫を減らしません。
- ウィジェットのカートでは、代金引換または、ロケーションに対してサポート対象のプロバイダーが設定されていればオンライン決済を選択できます。注文作成後、ゲストはプロバイダーのページに移動します。ウィジェット自体はカード情報を受け取りません。決済の準備に失敗した場合は、すでに作成された注文に対して再度試すことができます。
- 「ボタンを置き換える」モードでは、元のボタンは視覚的に非表示になります。サイトに別の注文経路(たとえば他社カートへの直接リンク)がある場合は、ご自身で削除する必要があります — または、そのような遷移を引き受ける「完全インターセプト」モードに切り替えてください。
トラブルシューティング#
サイトに「カートに入れる」ボタンがない。
- タグが見つからない — 「マイサイト」セクションで「インストールを確認」を押してください。「コードがない」はタグが挿入されていないか、テンプレートのすべてのページにないことを意味します。「別のロケーションのコード」はタグ内の
data-domainが別のものであることを意味します。Google Tag Manager でタグを挿入している場合、確認では見えません。サイトを目視で確認してください。 - 変更が反映されていない — ウィジェットのファイルはキャッシュ5分のCDN経由で配信されます:待ってから、キャッシュをクリアしてページを更新してください。
- サイトマップが構築されていない、または適用されていない — 「自社ストアフロント」以外のモードでは、ボタンはサイトマップに従って配置されます:サイトをスキャンして結果を適用してください。
- スキャナーが商品ページを見つけられない — サーバー側のHTMLを読み取ります。カタログ全体がJavaScriptで描画されている場合は、「自社ストアフロント」モードに切り替えてください。
- 商品ページのボタンが配置設定で無効になっている — これは「完全インターセプト」シナリオでは意図的なもので、ゲストはサイトの元のボタンを押します。
カートボタンが消えた。 配置設定で選択した画面の隅を確認してください。マルチボタンが有効で、そのファンに「注文する」項目がある場合、ウィジェット独自のボタンは意図的に無効化されます。
ボタンが間違った場所に配置された、またはサイト更新後に消えた。 レイアウトが変更されています — 「再スキャン」を押してください:配置設定はそのまま保持されます。
ページの価格が変わらない。 サイトのマークアップ内で直接価格を書き換える機能は設定で無効にできます — その場合、ゲストはサイトの価格を見て、カートにはお客様の価格が入ります。価格ルールが有効であること、およびこの商品に個別の上書きがないことも確認してください。
ゲストがサイトで注文したのに、管理画面に注文がない。 おそらく、注文が当社を経由せずに、残っている元のボタンまたはサイトのカートへの直接リンクを通じて送信されています。これは「ボタンを置き換える」または「完全インターセプト」モードで解決します。
注文の価格が違う。 価格の書き換えは視覚的なもので、サイトのバックエンドはそれを認識しません。独自価格は注文のインターセプトと一緒にのみ有効にする意味があります — そうでないと、一部の注文が古い価格で当社を経由せずに処理されます。
関連セクション#
よくある質問#
カタログをそちらへ移行する必要はありますか? いいえ。ウィジェットはお客様のサイトのページ上にある商品をそのまま扱います — 名称と価格はそこから読み取ります。アカウント内のカタログは、在庫管理、アイテム別の分析、当社のストアフロントをご希望の場合に必要です。移行はサイトのアドレスを指定したインポートまたはファイルで行えます — AIによるカタログのインポート と インターネットショップ をご覧ください。
サイトが変更された場合はどうなりますか? 「再スキャン」を押してください — マップが更新され、配置の設定は保持されます。
ウィジェットはレイアウトを崩しませんか? ボタンはお客様のマークアップ内で検出された場所に挿入され、見た目は設定できます。カートとチェックアウトはページの上に重ねて開くため、お客様のマークアップには影響しません。