C cenaly.com
無料で始める

自社サイトでのオンライン注文

既存サイトに配置する「カートに追加」ボタンと注文手続機能

On this page 10

自社サイトでのオンライン注文

ウィジェット**「オンライン注文」**は、すでにお持ちのサイトに注文受付を追加します。移行や再コーディングは不要です。ウィジェットがサイトのページを読み取り、「カートに入れる」ボタンを配置し、既存のマークアップの上にカートと注文手続きを重ねて表示します。

場所:マーケティング → 「マイサイト」 → 「オンライン注文」カード → 歯車。設置コードはすべてのウィジェット共通です。マイサイトをご覧ください。


4つの動作モード#

モード 訪問者に表示されるもの 選ぶ場面
自社ストアフロント 「注文する」ボタン。クリックするとメニューとカートを備えたストアフロントがページ上に開きます 名刺サイト、ランディングページ、ブログ — ページ上に商品がない場合
サイト上に重ねる 既存のマークアップ内に直接表示される「カートに入れる」ボタン — 商品ページとカタログ、カートは画面の隅に表示 サイトに商品カタログはあるが注文受付がない(または使いにくい)場合
ボタンを置き換える 上記に加え、サイト本来の「購入」ボタンとカートが非表示になります すべての注文を当サービス経由にしたい場合
完全置き換え サイトはそのままに見えます。ボタンは本来のものですが、押すと商品が当サービスのカートに移動し、サイトのカートへの遷移は当サービスのカートを開き、カウンターと金額は当サービスの数値を表示します ストアフロントのマークアップはすでに整っており見た目を変えたくないが、注文と価格は当サービスのものにしたい場合

サイトのスキャン#

「自社ストアフロント」以外のすべてのモードはサイトマップに基づいて動作します。サイトマップとは、ページ上の商品名、価格、画像、本来の購入ボタン、本来のカートがどこにあるかを示すものです。

マップはスキャナーが構築します。アドレスを指定して「サイトをスキャン」を押してください — 通常1〜3分です。内容は次のとおりです。

  1. プラットフォームのプリセット — 8つのプラットフォーム向けにセレクターの既成セットがあります:WooCommerce、Shopify、Magento、PrestaShop、Bitrix、InSales、Tilda、OpenCart。スキャナーは指紋からEcwid、Squarespace、Wixも認識しますが、これらのプリセットはなく、マップはAI解析で構築されます。
  2. AIによるマークアップ解析 — 自作サイトや非標準テーマ向けです。
  3. 検証 — 検出された各セレクターを実際のページで確認します。データは商品の構造化データと照合されます。検証されていないセレクターはマップに含まれません — ボタンが間違った場所にあるより、ボタンが少ないほうがよいのです。

結果として、判定されたプラットフォーム、スキャンされたページ数、認識された商品の例、そして商品ページとカタログカードが区別して表示されます。マップはボタンで適用され、ウィジェットの設定とともに保存されます。サイトが変更されたら、再スキャンするだけです。


ボタンの配置とデザイン#

ライブプレビュー付きのレイアウトで設定します — 典型的な商品ページとカタログです。

  • 商品ページのボタン:価格の下、サイト本来のボタンの隣、画面下部に固定、または無効(「完全置き換え」の主なシナリオ — 自社ボタンはなく、訪問者は本来のボタンを押します)。
  • カタログカードのボタン:カードの上、カードの下、または無効。
  • カートボタン:画面の四隅のいずれか。
  • ボタンの色とテキスト(「カートに入れる」「注文する」、独自のもの)— ラベルはサイトの言語ごとに個別に設定できます。

独自の価格#

個別のトグルです。ウィジェットはサイトの価格を独自の価格に再計算し、訪問者に表示します — 商品ページ、カタログ、カートで。

  • 基本ルールはすべての商品に適用されます:パーセント、通貨での加算、「下限/上限」の制限、丸め(整数に、末尾を…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で描画されている場合、商品ページが見つからないことがあります — その場合は「自社ストアフロント」モードが機能します。
  • カート内の商品はお客様のサイトのページから取得され、管理画面のカタログからではありません:名前と価格はウィジェットがページ自体から読み取ります(必要に応じてお客様の価格ルールで再計算します)。そのためにカタログを当社に移行する必要はありません — ただし、そのような注文は管理画面の在庫を減らしません。
  • ウィジェットのカートでは、代金引換または、ロケーションに対してサポート対象のプロバイダーが設定されていればオンライン決済を選択できます。注文作成後、ゲストはプロバイダーのページに移動します。ウィジェット自体はカード情報を受け取りません。決済の準備に失敗した場合は、すでに作成された注文に対して再度試すことができます。
  • 「ボタンを置き換える」モードでは、元のボタンは視覚的に非表示になります。サイトに別の注文経路(たとえば他社カートへの直接リンク)がある場合は、ご自身で削除する必要があります — または、そのような遷移を引き受ける「完全インターセプト」モードに切り替えてください。

トラブルシューティング#

サイトに「カートに入れる」ボタンがない。

  1. タグが見つからない — 「マイサイト」セクションで「インストールを確認」を押してください。「コードがない」はタグが挿入されていないか、テンプレートのすべてのページにないことを意味します。「別のロケーションのコード」はタグ内の data-domain が別のものであることを意味します。Google Tag Manager でタグを挿入している場合、確認では見えません。サイトを目視で確認してください。
  2. 変更が反映されていない — ウィジェットのファイルはキャッシュ5分のCDN経由で配信されます:待ってから、キャッシュをクリアしてページを更新してください。
  3. サイトマップが構築されていない、または適用されていない — 「自社ストアフロント」以外のモードでは、ボタンはサイトマップに従って配置されます:サイトをスキャンして結果を適用してください。
  4. スキャナーが商品ページを見つけられない — サーバー側のHTMLを読み取ります。カタログ全体がJavaScriptで描画されている場合は、「自社ストアフロント」モードに切り替えてください。
  5. 商品ページのボタンが配置設定で無効になっている — これは「完全インターセプト」シナリオでは意図的なもので、ゲストはサイトの元のボタンを押します。

カートボタンが消えた。 配置設定で選択した画面の隅を確認してください。マルチボタンが有効で、そのファンに「注文する」項目がある場合、ウィジェット独自のボタンは意図的に無効化されます。

ボタンが間違った場所に配置された、またはサイト更新後に消えた。 レイアウトが変更されています — 「再スキャン」を押してください:配置設定はそのまま保持されます。

ページの価格が変わらない。 サイトのマークアップ内で直接価格を書き換える機能は設定で無効にできます — その場合、ゲストはサイトの価格を見て、カートにはお客様の価格が入ります。価格ルールが有効であること、およびこの商品に個別の上書きがないことも確認してください。

ゲストがサイトで注文したのに、管理画面に注文がない。 おそらく、注文が当社を経由せずに、残っている元のボタンまたはサイトのカートへの直接リンクを通じて送信されています。これは「ボタンを置き換える」または「完全インターセプト」モードで解決します。

注文の価格が違う。 価格の書き換えは視覚的なもので、サイトのバックエンドはそれを認識しません。独自価格は注文のインターセプトと一緒にのみ有効にする意味があります — そうでないと、一部の注文が古い価格で当社を経由せずに処理されます。


関連セクション#


よくある質問#

カタログをそちらへ移行する必要はありますか? いいえ。ウィジェットはお客様のサイトのページ上にある商品をそのまま扱います — 名称と価格はそこから読み取ります。アカウント内のカタログは、在庫管理、アイテム別の分析、当社のストアフロントをご希望の場合に必要です。移行はサイトのアドレスを指定したインポートまたはファイルで行えます — AIによるカタログのインポート と インターネットショップ をご覧ください。

サイトが変更された場合はどうなりますか? 「再スキャン」を押してください — マップが更新され、配置の設定は保持されます。

ウィジェットはレイアウトを崩しませんか? ボタンはお客様のマークアップ内で検出された場所に挿入され、見た目は設定できます。カートとチェックアウトはページの上に重ねて開くため、お客様のマークアップには影響しません。

Was this article helpful?