C cenaly.com
無料で始める

マイサイト

サイトに1つのタグを追加するだけ:チャット、ポップアップ、Cookieバナー、テーブル予約、事前予約、注文、ヘルプセンター、法的文書

On this page 13

マイサイト:ご自身のサイトにウィジェットを設置

「マイサイト」セクションは、サイトをすでにお持ちの方向けです。当社のストアフロントへ移行したり、何かを移し替えたりする必要はありません。既存のサイトに1行のコードを貼り付け、その後アカウントで必要な製品をトグルで有効にするだけです。

開き方:管理パネル → マーケティング → 「マイサイト」(admin.cenaly.com)。

<script>を挿入できるプラットフォームであればどこでも動作します:WordPress、Tilda、Wix、Shopify、Webflow、Bitrix、InSales、OpenCart、自作サイト、コンストラクターのランディングページ。


サイトアドレスと設置コード#

セクション上部の**「🌐 あなたのサイト」ブロックは、アドレス → サイトのコード → 確認という3つのステップを案内し、メインボタンは常に次に未完了のステップを提示します。最初はサイトのアドレス**(例:example.com)です。これに基づいて設置状況を確認し、ウィジェット内に正しいリンクを生成します。

次は設置コードです。これは1行です:

<script src="https://cdn.cenaly.com/site/v1.js" data-domain="ВАШ-ДОМЕН" async></script>

これを一度だけ貼り付けてください — <head>内または</body>の直前です。サイトのコードに再度戻る必要はありません:ウィジェットの構成はページ上のタグではなく、アカウントのトグルで設定します。ウィジェットを有効にすると数分以内にサイトに表示され、無効にすると消えます。

以前に個別のウィジェットタグを手動で挿入していた場合も、それらは引き続き動作します:統合ローダーがそれらを認識し、ウィジェットを二重に読み込みません。


人気プラットフォームへの設置#

「設置コード」ウィンドウには、各プラットフォーム用のタブがあり、以下の手順と同じ内容が記載されています。

各プラットフォームにはここで専用のアンカーがあり、サイトを編集する担当者に説明を繰り返す代わりにリンクを送ることができます:#html、#google-tag-manager、#wordpress、#tilda、#wix、#shopify、#webflow、#squarespace — 例えば /ru/docs/site-widgets#tilda のように。

各項目で繰り返さないよう、全プラットフォーム共通の注意点:

  • タグはサイト全体で1回設置します — 個別ページではなく共通テンプレートに設置してください;
  • ビルダー(Tilda、Wix、Webflow、Squarespace)では、サイトを再公開するまで編集内容はエディター内に留まります;
  • 確認するのはエディターのプレビューではなく、公開中のサイトです;
  • サイトの前にキャッシュや CDN がある場合はクリアしてください:訪問者にも当社の確認にも、タグのない保存済みのページコピーが配信される可能性があります;
  • その際、設置確認で見えないものについては別途下記で解説しています。

HTML#

テンプレートにアクセスできるサイトであればどれでも:自作サイト、ランディングページ、静的サイトジェネレーター。

  1. コード文字列をコピーします:マーケティング → 「マイサイト」。
  2. サイトの共通テンプレートの <head> 内、または </body> の直前に貼り付けます。
  3. 共通テンプレートがない場合(ページが個別ファイルの場合)は、各ページに貼り付けます。
  4. 変更をサーバーにアップロードし、サイトを開いて「設置確認」をクリックします。

Google Tag Manager#

テンプレートへのアクセスがなく、GTM がサイトにすでに導入されている場合に適しています。

  1. タグ → 新規作成 → タイプ 「カスタム HTML」。
  2. コード文字列を貼り付け、トリガーを 「すべてのページ」 に設定して保存します。
  3. 「公開」 をクリックします:コンテナのバージョンが公開されるまで、公開中のサイトにタグはありません。

⚠️ GTM から読み込まれたタグは、当社の「設置確認」では決して検出されません — これはエラーではなく、その方式の結果です:「設置確認で見えないもの」。サイトを開いて目視で確認してください。

WordPress#

  1. WordPress 管理画面(あなたのサイト/wp-admin)にアクセスします。管理者権限が必要です。
  2. 確実な方法:プラグイン → 新規追加 → header/footer にコードを挿入する任意のプラグイン → その設定で Header 欄に文字列を貼り付け → 保存。
  3. プラグインを使わない方法:外観 → テーマファイルエディター → header.php(閉じタグ </head> の前)または footer.php(</body> の前)→「ファイルを更新」。
  4. サイトを開いて「設置確認」をクリックします。

⚠️ 親テーマのファイルを編集すると、テーマ更新時に失われます — WordPress のドキュメントもこれを警告しています。コード挿入プラグインまたは子テーマなら更新後も残ります。キャッシュプラグイン(W3 Total Cache、WP Rocket など)が導入されている場合は、キャッシュをクリアしてください。そうしないと確認は古いページコピーを参照します。

💡 ウィジェット専用のプラグインを別途導入する必要はありません:1つのタグがそれらを接続します。プラグイン Cenaly Consent は別の目的で、cookie バナーのタグのみを代わりに設置します(Cookies と同意 参照)。

Tilda#

  1. プロジェクト一覧で、対象サイトの 「サイト設定」(ページ設定ではなくプロジェクト設定)。
  2. 「その他」 セクション(一部のアカウントでは「コード挿入」と表示)→ 「head 内に挿入する HTML コード」 欄。
  3. 文字列を貼り付けて保存します。
  4. プロジェクトの全ページを再公開します — これを行わないとコードはエディター内に留まります。
  5. 公開中のサイトを開いて「設置確認」をクリックします。

💡 1ページだけにタグが必要な場合は、「ページ設定」→「詳細」に同じ欄があります。その場合はそのページを再公開してください。

Wix#

  1. サイトが公開済みで、ドメインが接続済みである必要があります:これは Wix 自身のコードの条件です。
  2. Settings(設定)→ Development & integrations(開発とインテグレーション)→ Custom Code。
  3. 「+ Add Custom Code」 → 文字列を貼り付け、フラグメントに分かりやすい名前を付けます。
  4. すべてのページ(All pages)に適用し、1回のみ読み込み、挿入位置は Head。保存します。
  5. Publish をクリックし、公開中のサイトを開いて「設置確認」をクリックします。

⚠️ Wix のコードフラグメントはドメインに紐づきます:サイトに別のドメインを割り当てるとフラグメントは削除され、タグを再度貼り付ける必要があります。

Shopify#

  1. Shopify 管理画面 → オンラインストア(Online Store)→ テーマ。
  2. 対象テーマの「…」→ Duplicate:テーマのコピーが元に戻る手段です。
  3. 同じく「…」→ コードを編集(Edit code)。
  4. 左側の Layout フォルダ → theme.liquid ファイル → 閉じタグ </head> の前(または </body> の前)に文字列を貼り付け → Save。
  5. ストアフロントを開いて「設置確認」をクリックします。

⚠️ 編集はストアではなくテーマに属します:テーマを切り替えたり再作成した場合は、新しいテーマにタグを貼り付けてください。そうしないとウィジェットは古いテーマとともに消えます。Shopify のチェックアウトページはテーマの任意スクリプトに対して閉じられています — ウィジェットはストアフロントを対象としています。

Webflow#

  1. 対象プロジェクトの Site settings → Custom code タブ。
  2. Head code 欄 → 文字列を貼り付けて保存します。この欄にはスクリプト自体のみを記述します:html、head、body タグを追加する必要はありません。
  3. Publish をクリックします — エディターとプレビューでは独自コードは動作しません。
  4. 公開されたサイトを開いて「設置確認」をクリックします。

⚠️ Webflow のサイト設定にある独自コード欄は、有料の Site plan で利用可能になります。1ページだけにウィジェットが必要な場合は、そのページの設定に専用のコード欄があります。

Squarespace#

  1. サイトパネル → Website → Website Tools → Code Injection。
  2. Header 欄(各ページの <head> に挿入されます)→ 文字列を貼り付け → Save。
  3. 公開中のサイトを開いて「設置確認」をクリックします。

⚠️ Code Injection パネルは Core、Plus、Advanced プランおよび一部の Squarespace レガシープランで利用可能です。ページ内のコードブロック(Code Block)は代替になりません:1ページ内にコードを設置するものであり、ウィジェットはサイト全体に必要です。

手順は各プラットフォームの公式ヘルプと照合済みです。プラットフォームがメニュー項目を改名した場合は、当社ではなくそのヘルプを信頼し、当社までご連絡ください:修正します。


12のウィジェット#

各ウィジェットはトグルスイッチと設定用の歯車アイコンを備えた個別のカードです。ウィジェットが収集したデータは通常の管理画面セクションに届きます。「サイト専用の受信トレイ」を別途作成する必要はありません。

ウィジェット 訪問者に表示されるもの データの届き先 ドキュメント
🍪 Cookiesと同意 カテゴリ付きの同意バナーと設定画面 同意ログ、cookie宣言 Cookiesと同意
💬 チャット:AIアシスタントとオペレーター ページ上のチャットバブル 「ワークチャット」の「ゲスト」セクション — WhatsApp、Telegram、email、Messenger/Instagramと一緒に ゲストとのチャット
💡 ポップアップとフォーム プロモ、離脱時オファー、メール収集、タイマー キャンペーンとその統計 自社サイトのポップアップ
📅 テーブル予約 「テーブルを予約」ボタン 「テーブル」セクション — 予約とフロアマップ テーブル予約
🗓️ オンライン予約 「予約する」ボタン:サービス → 担当者 → 時間 「予約」セクション 予約帳
🛒 オンライン注文 「注文する」ボタン、カートとチェックアウトが自社サイト上に表示 「注文」セクション 自社サイトでのオンライン注文
📚 サポートセンター 公開されたヘルプ記事付きの「?」ボタン 記事は「記事とページ」(「ヘルプ」グループ)へ、ヘルプの分析は「ナレッジベース」へ サポートセンター
⚖️ 法的文書 プライバシーポリシー、利用規約などのリンクまたはテキスト 当社ホスティング上のページ、再公開でサイトが自動更新、ウィジェットパネルで直接設定、ウィザード不要 法的文書
📞 サイトからの通話 「電話する」ボタン — 番号を入力せずブラウザから直接通話 「通話」セクション:通常の通話と同じく録音と分析 サイトからの通話
☎️ コールバック 都合の良い時間を選べる「折り返し電話してください」フォーム コールバックキュー:システムが自動で担当者とゲストに発信、申し込みは「申し込み」と「クライアント」セクションの「コールバック」タブへ コールバック
➕ マルチボタン すべての連絡チャネルをまとめた1つのフローティングボタン 選択したチャネルの遷移先;管理画面ではチャネル別クリック統計 マルチボタン
📈 ライブストアフロント 期間内の注文数、予約数、予約件数、平均評価を示すバッジ お客様のイベントとレビューの匿名化された集計を表示 ライブストアフロント

読み込み順は偶然ではありません:cookieバナーは当社のウィジェットの中で最初に読み込まれます。単一の非同期ローダーが最初に設定を読み込むため、サイト側ですでに起動している分析を追い越すことはできません。トラッカー起動前のブロックが必要な場合は、同意に関する記事で説明されているとおり、別のタグconsent/v1.jsをasyncとdeferなしで<head>の最初に設置してください。マルチボタンは集計対象のウィジェットの後に、**「ライブストアフロント」**は最後に読み込まれます:そのバッジは同じ隅にあるボタンを考慮するためです。

cenaly.ruのcookieバナーには制限があります:同意ログとCSVはまだ収集されず、cookieスキャナーは利用できず、宣言は手動で管理します。設定が利用できない場合、現在のバージョンはトラッカーのブロックを解除します。設置後はバナーとページの実際のリクエストを確認してください。完全な条件はCookiesと同意にあります。

サポートセンターは公開された記事を表示します。記事は「記事とページ」セクションで準備するか、ナレッジベースから公開する必要があります。ボタン自体が記事を作成することはありません。ヘルプの分析では、このパネル内のページイベントはソース「サイト」に属します。ソース「ウィジェット」はチャット内のヘルプタブを指します。

法的文書はまず当社のホスティングで公開する必要があります。ウィジェットは公開されたバージョンをリンク、ウィンドウ、またはページ上のテキストとして表示します。管理画面での再公開がそれらを更新します。これは法令の変更を自動的に追跡するものではありません。

マルチボタンは単なるリンク一覧ではありません:招待バブル(「質問はありますか?」)、表示条件(どのページで、何秒後に、携帯電話のみかすべてで)、メッセンジャー用の最初のメッセージのテンプレート、チャネル別クリックの独自統計があります。

**「ライブストアフロント」**はお客様自身のデータ — 注文、予約、予約件数 — でソーシャルプルーフを表示し、それを誠実に行います:バッジに名前や電話番号はなく、イベントは集計され、古いものは店舗のカレンダーに従って表示されなくなります(昨日閉店した店舗が昨日の注文を「販売」することはありません)。

**「ポップアップとフォーム」カードには、トグルスイッチと歯車アイコンの隣に「✨ テンプレートから作成」**ボタンがあります:これは同じウィジェット設定ウィンドウを開きますが、すぐに既成シナリオのギャラリーが表示され、「完了」を押すまで何も保存しません。

**「法的文書」**パネルはもう5ステップのウィザードに送りません:国、文書セット、事業に関する質問、詳細、言語が1つの画面にあり、自動入力とプレビューは折りたたまれ、下部に「公開する文書:N」のカウンターがあります。すでに入力された回答と矛盾するオプションは、その理由の説明とともにロックされます。

ハブの開いたウィンドウはページのアドレスに保持されます:ウィジェットの歯車は?widget=<ウィジェット>を書き込み、設置コードのウィンドウは?panel=installを書き込みます。つまり、特定のウィジェットの設定へのリンクを同僚に送ることができ、F5や「戻る」ボタンでも維持されます。

ウィジェットによってはトグルスイッチだけでは不十分で、コンテンツも必要です:

  • オンライン予約は、メニューにタイプ「サービス」のアイテムが少なくとも1つあり、予約が有効になっている場合にサイトに表示されます(テーブル予約と同じスイッチ)。
  • サポートセンターはトグルスイッチですぐに有効になりますが、公開された記事がない場合は空のヘルプページが開きます — ウィジェット設定で公開済み記事数が確認できます。

予約の制限。 現在、テーブル予約ウィジェットは選択された日時をゲストのブラウザのタイムゾーンで変換します。別のタイムゾーンの訪問者にとって、予約帳の時間は店舗の期待する時間と異なる場合があります — 確認時に確認してください。申し込み送信のメッセージも、サーバーがすでに予約を確認したことを常に意味するわけではありません。オンライン予約が確認の遅延を報告する場合は、まず予約帳を確認してください:再試行すると重複が作成される可能性があります。

無効化の確認。 ウィジェットを無効にした後は、サイトを確認し、データ更新後に設定を再度開いてください。現在のバージョンでは、トグルスイッチがローカルで消灯しても、以前の有効化がサーバーに保存されている場合があります。特定のウィジェットを緊急停止する場合は、その個別タグを削除するかサポートにお問い合わせください。共通タグを削除すると、それが接続していたセット全体が一度に停止します。

各カードのボタンの上には7日間のミニ統計があります:表示、開封、およびウィジェットの意味に応じた3番目の数値(申し込み、注文、予約、予約件数、通話、ダイアログ、クリック)。「—」はデータがまだまったくないことを意味し、「0」はテレメトリはあるがイベントがなかったことを意味します。「詳細 →」はダッシュボード「サイトのウィジェット」に移動します。

オンライン注文の設定ウィンドウには、他社サイト用のもう1つのボタン**「🔔 入荷通知」**があります:お客様のカタログから商品とバリアントを選択し、売り切れ商品のページでボタンをマークアップすると、ゲストがメールアドレスを残し、リンクで確認し、商品が在庫に戻ったときに1通のメールを受け取ります。他社のカタログは読み取らず、他社ページから在庫は取得しません — 商品は手動で紐付けます。詳細は自社サイトでのオンライン注文の記事をご覧ください。


すでにサイトにあるフォーム#

カードグリッドの下にあるブロック**「📝 すでにサイトにあるフォーム」**は、「サイトにすでに問い合わせフォームがあり、誰もそれを変更する予定はない」というケース向けです。当社はそのフォームを置き換えたり遅延させたりしません。フォームはこれまでどおりお客様のバックエンドに送信され、問い合わせのコピーがアカウントに届きます。

ルールとは、フォームのCSSセレクター、「名前/電話/メール」フィールドのアドレス(値には単なるフィールド名、たとえばphoneも、セレクターinput[name="tel"]も使えます)、任意のページマスク、トグルのことです。1店舗あたり最大10件のルールを、1フォームにつき1ルール設定できます。フォームのセレクター、または電話かメールがないルールは有効にできません。収集する対象がないためです。各行には**「確認」**ボタンがあり、サーバーがページを読み取り、フォームが見つかったか、ルールのどのフィールドがそのフォームにあるか、そのフォームにどんなフィールド名があるかを回答します。

送信される内容。 ちょうど3つのフィールド(名前、電話、メール)に加え、パラメータとアンカーを除いたページのアドレスです。「送信」を押す前の入力は読み取られず、当社独自の検証や遅延は追加しません。ブラウザ自身の検証を通過しなかったフォームは問い合わせを作成しません。サーバーは同じフォームから同じ連絡先での繰り返しを10分間抑制します。同時送信やマーカー記録の失敗時には重複が発生する可能性があります。当社自身のウィジェットのフォームは対象外です。

インターセプトはサーバーの応答を待たずに問い合わせのコピーを送信します。ネットワークの切断やブラウザによるリクエストのブロック時にはコピーが届かないことがあります。接続復旧後の配信キューは現在ありません。同じページで同じ連絡先による繰り返しも、ページが再読み込みされるまで抑制されます。送信のマークはインターセプトの試行を意味するため、受信はインボックスで確認してください。

どこで探すか。 **「問い合わせ」**セクションとコンタクトセンターの「問い合わせ」タブに、「サイトのフォーム: <ルールのラベル>」というグループで表示されます。そのような問い合わせにはそれぞれ正直な注記が付きます。当社が見ているのは「送信」のクリックであり、お客様のバックエンドでのデータの行方ではありません。

⚠️ 「確認」ボタンはブラウザなしでHTMLを解析します。JavaScriptが描画するフォームは認識できませんが、訪問者のブラウザでのインターセプトはそれを認識します。パネルはこの点を明示しています。


アクションへのリンクとQR#

カードグリッドの下にあるブロック**「🔗 アクションへのリンクとQR」は、お客様のサイトで1つの特定のアクション**を開くリンクを作成します。https://ваш-сайт/#cenaly=bookは予約フォーム、#cenaly=appointment:<услуга>はサービスへの直接予約、#cenaly=order:<товар>は商品カード、そのほかチャット、コールバック、ヘルプ、ドキュメント(legal:<тип>)、マルチボタンの扇状表示、サポートへの問い合わせ(#cenaly=supportはチャットの「問い合わせ」タブ、#cenaly=support:<категория>はそのカテゴリのフォームを直接開きます)があります。このようなリンクは通常QRコードとして印刷されます。テーブル、領収書、パッケージ、オフライン広告などです。

作成方法: アクションを選択し、必要に応じて具体的なオブジェクト(公開済みメニューのサービスまたはアイテム、公開済みドキュメント)と「どこに掲載するか」を選びます。これによってお客様の分析用のUTMタグ(utm_source=qr&utm_medium=<место>&utm_campaign=<действие>。当社はこれらを読み取りません)が決まります。出力は「コピー」ボタン付きのリンクと、PNGおよびSVGでダウンロードできるQRコードです。リンクのベースはお客様のサイトのアドレスで、指定がない場合は当社のストアフロントです。各ウィジェットのカードには、すでにアクションが選択された短い**「🔗 リンク」**ボタンがあります。

なぜパラメータ?ではなくアンカー#なのか: 他社のCMS、キャッシュプラグイン、CDNは未知のパラメータを削除し、正規アドレスを変更しますが、アンカーはブラウザがサーバーに送信しないため、当社のコードに確実に届きます。これを実行するのは単一タグです。単一タグは読み込み時にアンカーを一度読み取り、アドレスからそれを取り除き、目的のウィジェットが起動したときにそれを開きます。個別のウィジェットタグはアンカーを読み取りません。

このブロックは印刷部数の発注前に警告します。アクションのウィジェットが無効である、前回の確認時にサイトに設置コードが見つからなかった、といった場合です。リンクは無効なものを有効にせず、存在しないドキュメントを置き換えもしません。そのような場合、リンクは単に何もしません。他人のサイトではこれがエラーよりも良いのです。例外が1つだけあり、意図的にそうしています。問い合わせが無効なときに問い合わせへのリンクを開くと通常のチャットが開きます。訪問者はそれでも書き込めますし、ブロックは問い合わせが無効であることを事前に警告します。同じリンクは、ヘルプ、ドキュメント、マルチボタンを含め、当社の店舗ストアフロントでも機能します。ステッカーは一度印刷すればよく、サイトは変わることがあります。


オンライン予約ウィジェットの詳細#

設定 — 「オンライン予約」カード → 歯車: ボタンの色、ボタンのテキスト、画面の角、言語。同じ場所の設定の下に、このウィジェット専用のコード文字列が用意されています — これだけを設置する場合に使えます。

言語。 デフォルトは自動: ウィジェットは設置されたページの言語で表示され、45言語に対応しています。辞書は必要なものだけが読み込まれるため、サイトの速度には影響しません。リストから1つの言語を固定することもできます — 例えば、サイトが2言語対応で、予約は1つの言語で受け付けたい場合などです。

特定のサービスや担当者へのリンク。 ウィジェットのタグに属性を追加すると、ゲストは目的のステップに直接進めます:

属性 動作
data-service="id услуги" サービスが事前に選択されます — サイト上のサービス説明の横にある「予約する」ボタン用。識別子は「メニュー」セクションのアイテムの横に表示されます
data-master="id мастера" 担当者が事前に選択されます — 特定の担当者のページ用。担当者の識別子は従業員の識別子と一致します
data-open="true" 予約パネルがボタンを押さずに自動で開きます — 「予約する」専用ページ用

古い識別子(サービスの名前変更、担当者の退職)があってもウィジェットは壊れません: 最初のステップから通常の選択が静かに表示されます。

予約までのステップを削減:

  • サービスが1つだけ、または適した担当者が1人だけの場合 — 余分な画面は表示されません;
  • チップ**「⚡ 最短: 今日 17:30」**はワンタップで予約でき、カレンダーは空き時間のある最初の日が自動で開きます;
  • 名前、電話番号、メールアドレスはゲストのデバイスに記憶されます: 再予約時にはフィールドがすでに入力されており、「自分ではない」リンクで消去できます;
  • スマートフォンではパネルが全画面で開き、予約ボタンがキーボードの下に隠れません;
  • ウィジェットはキーボードで操作でき、スクリーンリーダーでも正しく読み上げられます。

メール。 e-mailフィールドは任意です; ゲストがアドレスを入力すると、訪問の詳細と「予約を管理する」リンクを含むメールを受け取り、そこから自分で訪問を変更またはキャンセルできます。詳細は予約ジャーナルをご覧ください。

ウィジェットの成果。 予約ジャーナルの**「🌐 サイトのウィジェット」**ボタンは、7日、30日、90日間のファネルを表示します: ボタンが何回表示され、何人のゲストがパネルを開き、連絡先まで進んで予約したか、時間が埋まっていたために失われた予約がいくつあったか。サイトからの予約には「サイトから」バッジが付きます。


インストール確認#

「インストールを確認」 ボタンはサイトを開き、ページのソースHTMLを読み取ります。結果は次のとおりです。

  • 「ウィジェットコードがサイトで見つかりました」 — 統合タグが設置されています。
  • 「個別のウィジェットタグのみが見つかりました」 — 古い個別の埋め込みが動作しており、統合タグはありません。
  • 「サイトのコードは別の店舗のものです」 — タグ内の data-domain が別の店舗のものです(複数店舗でよくあるミス)。
  • 「このページにウィジェットコードはありません」 — タグが見つかりません。

⚠️ 確認は1ページのソースHTMLを読み取ります。Google Tag Managerや別のスクリプトがブラウザ上でタグを挿入している場合、確認では検出できません — これはエラーではありません。この方法では確認できないその他のケースは、下の「インストール確認で検出できないもの」にまとめています。

週に一度、同じ確認が自動で繰り返されます — サイトアドレスが指定され、少なくとも1つのウィジェットが有効で、前回の確認でタグが見つかった店舗が対象です。タグは静かに消えます — サイトが新しいテーマに移行した、制作会社が埋め込みなしのマークアップを公開した、キャッシュプラグインが「余分な」スクリプトを削除した — 以前は問い合わせが途絶えたことで初めて気づくものでした。現在は「タグがあった → タグがない」という変化がワークチャットにカードで届き(1店舗につき週1回まで)、「あなたのサイト」ブロックの3番目のステップに赤く表示されます。開けなかったサイト(タイムアウト、サーバーエラー)は故障とはみなしません — 翌週に確認します。Google Tag Manager経由で挿入されたタグは確認で決して検出されないため、誤った警告も発生しません。

同じ分析は公開されており、アカウントにログインせずに利用できます — 「サイト確認」ページでアドレスを入力すると、ページのHTMLを読み取り、カウンターとピクセルを名前ごとに表示し、同意バナーがあるか(自社、他社、なし)、有効なウィジェットを含む当社のタグが見えるかを示します。接続前にサイトを確認したり、開発者やクライアントにリンクを渡すのに便利です。

セクションのウィジェットカードの下にはさらに2つのブロックがあります:「自社コードでのストアフロント(Headless)」 — サイトを開発者が作成し、当社のウィジェットが不要な場合のデータ、API、ウェブフック — と、「詳細設定:ウィジェットごとに個別のタグ」 で、すぐに使える個別タグが用意されています。つまり、個別タグは「過去から引き継ぐ」だけでなく、ここから取得することもできます。

インストール確認で検出できないもの#

確認の方法はシンプルで正直です:1つのアドレスのソースHTMLを1回リクエストするだけで、ブラウザは使いません。サーバーが返したものを読み取り、マークアップ内で当社のパスを持つ <script src="…"> を探します。ここから、できないことの一覧が導かれます — これは故障ではなく、方法の限界です。

ケース 確認の結果 実際に確かめる方法
Google Tag Manager やその他のスクリプトがブラウザ上でタグを挿入している 「コードがありません」 サイトを開く:ウィジェットがあるかないか。開発者ツールのNetworkタブで site/v1.js をフィルタ
サイトの別のページ:タグがトップページのテンプレートにあり、ブログやカタログのページにはない 「サイトアドレス」欄に入力したアドレスについての回答 欄に内部ページの完全なアドレスを入力し、もう一度確認を押す
SPA(React、Vueなどのクライアントレンダリング):マークアップをブラウザ上でJSが組み立てる ウィジェットがサイトで動作していても「コードがありません」 目で確認する。タグはアプリ内ではなく、サーバー側テンプレートや index.html に設置する方が確実
SPA内のページ遷移(ページ再読み込みなし) 何も表示されない:確認はサイトをクリックせず、最初のサーバー応答のみを見る 自分でセクションを巡回する — ウィジェットはページ上に存在し、そのような遷移でも維持される
サイトが http:// のみで応答、ログイン、IPフィルター、アンチボット保護で閉じている 確認エラー 確認は https のみで認証なしでアクセスします。そのようなサイトはご自身で確認してください
非常に大きなページ マークアップの最初の 512 KB のみ読み取る テンプレート内のタグは <head> に設置されるため、ページの先頭に含まれます
3回を超える連続リダイレクト エラー 最終アドレスを入力してください
プラットフォームやCDNのキャッシュがタグなしの保存コピーを返す 「コードがありません」 キャッシュをクリアして再試行
タグはあるがウィジェットが動作しない(未払い、トグルがオフ、表示条件が発動) 「コードが見つかりました」 これは別の問題です — 下の「トラブルシューティング」を参照

確認がうまく検出できるもの:ソースマークアップに当社のタグがあるか、統合か個別のセットか、どの data-domain が設定されているか — つまり、最も多いミス「隣の店舗からコードをコピーした」を捕捉します。

公開ページ「サイト確認」もまったく同じ限界があります:こちらもソースHTMLを読み取り、スクリプトを実行しません。実際のCookieやブラウザ上で読み込まれるものは、CMPスキャナーのみが収集します — Cookieと同意を参照してください。


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

12種類すべてのウィジェットに共通するリストです。最も多い原因からまれな原因の順に並べています。個別のウィジェット固有の内容は、そのウィジェットの記事で説明しています。

1. 「インストール確認」でコードがないと表示される。 タグが挿入されていない、テンプレートの一部のページにしか挿入されていない、または挿入後にサイトが公開されていない(Tilda、Wix、Webflowでは再公開が必要です)。セクション上部のサイトアドレスも確認してください。確認はまさにそのアドレスのみを、1ページだけ巡回します。修正する前に「インストール確認で検出できないもの」を確認してください。「コードがない」ケースの半分はサイトの不具合ではなく、確認方法の限界です。

2. サイト上のコードが別の店舗のものになっている。 タグに別のdata-domainが入っています。店舗が複数あり、隣のカードからコードをコピーした場合によくあるミスです。目的の店舗を選択した状態でコードを取得してください。

3. Google Tag Manager経由で挿入したタグが確認で検出されない。 これはエラーではありません。確認はページのソースHTML、つまりサーバーが返した内容を読み取りますが、GTMはブラウザ上でタグを挿入します。サイトを開いて目視で確認してください。ウィジェットがあるかないかは一目でわかります。確認方法で表示されないものの完全なリスト(GTM、サイトの2ページ目、SPA、非公開サイト)は「インストール確認で検出できないもの」にあります。

4. 変更がサイトに反映されない。 ウィジェットのファイルはキャッシュ5分のCDN経由で配信されます。トグルをオンにした後、または設定を変更した後は数分待ってから、キャッシュをクリアしてページを再読み込みしてください(Ctrl+F5)。ブラウザがどうしても古い表示を出す場合は、シークレットモードで確認してください。

5. ウィジェットは有効なのにページに表示されない。 次のリストを順に確認してください。

  • ウィジェットが有料で未払いの場合 — 未払いの拡張機能はサーバー側でサイトのデータから除外されるため、トグルがオンでもページには表示されません。
  • ウィジェットに表示条件がある場合(マルチボタン、コールバック、「ライブストアフロント」): ページのマスク、遅延、デバイスフィルター、スケジュールによって、まさにこのページとこのタイミングが除外されている可能性があります。
  • ウィジェットのコンテンツが不足している場合: オンライン予約はメニューにサービス項目が1つ以上あり、予約が有効な場合に表示されます。公開記事のないサポートセンターは空のパネルを開きます。チャネルが1つもないマルチボタンはまったく描画されません。「ライブストアフロント」は数値がしきい値を下回っている間は表示されません。
  • マルチボタンが隣のボタンを吸収している場合: その扇状メニューに「チャットを開く」または「コールバック」の項目があると、これらのウィジェット自身のボタンは意図的に非表示になります。ボタンは扇状メニューの中に移動しています。

6. 画面の隅で複数のボタンが重なっている。 マルチボタンを有効にし、その扇状メニューに必要なウィジェットのアクションを追加してください。それぞれの個別ボタンは自動的に非表示になります。

7. 当社のコンストラクターで作成したサイトにウィジェットがない。 そこではインストールコードがテンプレートに組み込まれており、管理画面のコードブロックは表示されません。これは正常です。ウィジェットのトグルを確認してください。新しく生成されたサイトにはCookieバナー、法的文書、チャットが有効な状態で届き、それ以外は手動で有効にします。表示面の違いにも注意してください。マルチボタンは当社のストアフロントでは「当社のストアフロントにも表示する」という専用トグルでのみ表示されます(ページのネイティブボタンを吸収するため)。一方、**「ライブストアフロント」**は外部サイトと同じ1つのトグルで動作します。


Content-Security-Policy のあるサイト#

サーバーが Content-Security-Policy ヘッダーを返している場合、インストールコードが何を読み込めるかはブラウザが独自に判断します。タグ自体は動作します(許可されているため)が、タグが読み込むものは黙ってブロックされることがあります。外から見ると「ウィジェットが消えた」ように見えます。ブラウザのコンソールには Refused to load the script のような行が表示されます。

この断絶が起きるのは、ポリシーがスクリプトを使い捨ての nonce のみで許可し、'strict-dynamic' も CDN のホストもリストに含まれていない場合だけです。以下に、これを解消する 3 つの方法を簡単な順に示します。

方法 1 — タグに nonce を付ける#

サーバーが応答ごとに新しいランダム値を生成し、ヘッダーとタグの両方に設定します。

Content-Security-Policy: script-src 'nonce-r4nd0m...'
<script nonce="r4nd0m..." src="https://cdn.<ваш бренд>/site/v1.js" data-domain="ВАША-ЛОКАЦИЯ" async></script>

単一のタグが自身のタグの nonce を読み取り、挿入する各ウィジェットバンドルに渡します。それらは script-src のチェックを通過します。リクエスト、スタイル、埋め込みページにも以下の表の許可が必要です。個別の「入荷通知」フォームには、以下で説明する制限があります。

⚠️ すべての応答で同じ固定値は nonce ではありません。ページにコードを挿入できた者なら誰でも自分のスクリプトにコピーできてしまいます。応答ごとに、サーバー側で生成してください。

方法 2 — 'strict-dynamic'#

Content-Security-Policy: script-src 'nonce-r4nd0m...' 'strict-dynamic'

'strict-dynamic' を使うと、タグへの信頼が、タグが挿入するスクリプト(「スマートポップアップ」の遅延読み込み部分を含む)に伝播します。これはスクリプト用ディレクティブの例です。default-src、connect-src、style-src、frame-src に制限がある場合は、以下の表から対応する許可を追加してください。

方法 3 — ホストのリスト#

nonce が使えない場合(サイトビルダーではよくあります)は、ホストを明示的に許可します。

Content-Security-Policy: script-src https://cdn.<ваш бренд>;
  connect-src https://cdn.<ваш бренд> https://api.<ваш бренд> wss://ws.<ваш бренд> https://o.<ваш бренд>;
  img-src https://cdn.<ваш бренд> https://i.<ваш бренд>;
  frame-src https://cdn.<ваш бренд> https://ваша-локация.<ваш бренд>;
  style-src 'unsafe-inline'

ブランドとロケーションのホストを差し込んだすぐ使えるスニペットは管理画面の マーケティング → マイサイト、インストールコードの下の 「Content-Security-Policy のあるサイト?」 ブロックにあります。そこには「コピー」ボタンと、どのホストがどのウィジェットに必要かの注記もあります。

何に何が必要か:

ディレクティブ 必要な対象
script-src すべてのウィジェット:CDN からのバンドル
connect-src すべて:申し込み、予約、予約、注文、テレメトリ。チャットには WebSocket とシグナル用バケット
img-src 注文:商品や料理の写真
frame-src 注文、サポートセンター、法的文書:ストアフロントを <iframe> で開くため
style-src すべて:ウィジェットのウィンドウが Shadow DOM に <style> を挿入するため

これがカバーしないもの — 正直に#

  • スタイル。 ウィンドウの装飾は Shadow DOM 内のインライン <style> なので、style-src 'unsafe-inline' が必要です。これは script-src には影響しません。スクリプトに 'unsafe-inline' や 'unsafe-eval' は要求していません。
  • ウィジェットの遅延読み込み部分(拡張ポップアップと「スマートポップアップ」のスロット、同意バナーの年齢ゲート、マルチボタンのモバイルバー、フォームの傍受)は独自のローダーで読み込まれ、nonce を受け取ります。メインバンドルと同じチェックを通過します。例外は 「入荷通知」 ボタンのフォーム(stock/form-v1.js)です。これは単一ローダーの外にある別のタグで、nonce をまだ引き継ぎません。nonce のみのポリシーで CDN のホストがない場合、サブスクリプションフォームは開きません。
  • サイトビルダー(Tilda、Wix など)はヘッダーを自ら返すため、使い捨ての nonce を自分のタグに発行することはできません。残るのはホストリストの方法です。ただし、プラットフォームがそもそもポリシーの編集を許可している場合に限ります。
  • サイトからの通話は音声を WebRTC ストリームで送信し、メディアファイルを読み込まないため、media-src は不要です。マイクを許可するのは Permissions-Policy と HTTPS であり、CSP ではありません。

ウィジェットを独立したセクションにする#

いずれかのウィジェットが主な用途である場合(たとえばポップアップだけ、または cookie バナーだけを使っている場合)、「マーケティング → マイサイト → カード → 歯車」の経路は長すぎます。カードには 「サイドバーに移動」 ボタンがあり、ウィジェットが独自のメニュー項目を取得し、1 クリックで開けます。

これはインターフェースの設定です。サイト上のウィジェットの動作ではなく、セクションの表示のみを制御します。

サイトの一般設定(アドレス、インストールコード、確認)は「マイサイト」に残ります。この項目はウィジェットのセクションの隣のメニューにあるため、移動したセクションには「← すべてのサイトウィジェット」リンクがありません。ウィジェットをサイドバーから外すと、リンクが戻ります。

ウィジェット自体のページでは、同じボタンが設定ブロックの上部フレームの右側にあります。移動したウィジェットでは「サイドバー内」と表示されます。クリックするとメニューから項目が削除されますが、ボタンはそのまま残ります。


無料のものと有料の拡張機能#

一部のウィジェットはサブスクリプションに含まれ、一部は「拡張機能」セクションで拡張機能として接続します。有料として表示されるのは予約、ポップアップとフォーム、サポートセンター、法的文書で、カードには「💳 有料拡張機能」というチップが付きます。

有料ウィジェットは購入後に有効になります。 未払いのウィジェットのトグルを押しても有効にはならず、セクション内で直接支払いウィンドウが開きます。支払い後はウィジェットが自動で有効になります。未払いのウィジェットの「💳 有料拡張機能」チップも支払いボタンで、すでに支払い済みの場合はサブスクリプションを確認するカタログへ移動します。アクセスは有効な購入によって決まります。サブスクリプションの変更とサイト設定の更新は別の操作です。購入後にウィジェットが表示されない場合は、トグルを確認して店舗の設定を保存してください。5分間のキャッシュは更新されたデータの公開時点からカウントされます。サブスクリプションのステータス変更自体は、現時点ではそのような公開を保証しません。

当社のコンストラクターで作成したサイトでは、「法的文書」とcookieバナーは無料です。 それらのカードには「有料」の代わりに**「🎁 サイトに含まれる」**というチップが付き、支払いウィンドウはまったく表示されません。これはアップセルではなく、サイトを合法的に利用するための条件です。新しく生成されたサイトは、cookieバナー、法的文書、チャットが有効な状態ですぐに届きます。外部のサイトでは、「法的文書」拡張機能は別途支払いが必要です。現在のハブでは、cookieバナーは4つの有料ウィジェットのリストに含まれていません。

プランと支払いについては、アプリストアとサブスクリプションのセクションをご覧ください。


関連セクション#


よくある質問#

自分のサイトをやめる必要はありますか? いいえ。ウィジェットはお客様のサイト上に表示され、マークアップやホスティングを変更する必要はありません。

ウィジェットが複数ある場合、タグはいくつ挿入しますか? 1つです。ウィジェットの構成はアカウント内のトグルで設定します。

ウィジェットはサイトを遅くしますか? ローダーは非同期(async)で接続され、ページの描画をブロックしません。各ウィジェットは個別の小さなファイルとして読み込まれ、有効な場合のみ読み込まれます。無効なウィジェットはまったくダウンロードされません。

ウィジェットはマークアップを壊しますか? いいえ。各ウィジェットは分離されたコンテナ(Shadow DOM)内に描画されます。お客様のサイトのスタイルがウィジェット内部に漏れることはなく、ウィジェットのスタイルが外部に漏れることもありません。意図的な例外はオンライン注文ウィジェットです。これは意図的に「カートに入れる」ボタンをお客様のマークアップに配置し、プレビュー付きで設定できます(自分のサイトでのオンライン注文をご覧ください)。

ウィジェットはどの言語で表示されますか? ページの言語を参照します。まずタグ内のdata-lang属性(設定した場合)、次にHTMLページのlang、次にゲストのブラウザの言語、最後の手段として英語です。辞書のサイズは異なります。cookieバナー、オンライン予約ウィジェット、チャットウィンドウは45言語に対応しています(チャットのラベルはページの言語に応じた個別の言語パックで届きます)。その他には英語、ロシア語、ジョージア語、トルコ語が組み込まれており、英語にフォールバックします。ボタンのラベルや招待文はお客様自身が設定します。サイトの言語ごとに個別の行で設定できます。

ウィジェットが収集するデータはどこに保存されますか? お客様のブランドのクラウドに保存されます。cenaly.comではAWS、cenaly.ruではYandex Cloudです。ロシアの施設のデータはロシアに留まります。申し込み、注文、予約、やり取りはお客様のアカウントに届き、公開CDNにはウィジェットの設定と、もともと公開されているもの(メニュー、営業時間、公開された文書、「ライブストアフロント」の匿名化された数値)のみが送信されます。

施設が複数ある場合はどうすればよいですか? ウィジェットは店舗ごとに設定します。セクション上部のリストで店舗を選択し、その設置コードを取得してください。各サイトには独自のdata-domainがあります。

ウィジェットを複数の異なるサイトに設置できますか? はい。1つの店舗のタグを複数のページやサイトに挿入できます。データは1つの店舗に届きます。

Was this article helpful?