ニュースとレビュータイルの実装 - 外部

    Last updated on September 16th, 2025

    この記事では、ニュース タイルとレビュー タイルの両方の実装について説明します。

    タイルの埋め込み

    上記のいずれかの製品プラン要素を有効化すると、プラットフォームのロケーションレベルで「ウェブサイト」というタブが表示されます。タイルはロケーションごとに個別に表示され、中小企業向けであるため、この新しいタブはロケーションレベルのみに表示されます。

    新しいタブでは、ユーザーはレビュー タイルとレビュー タイルの両方のスニペットをコピーできます。

    (注:ユーザーは、レビュー タイルの設定で独自のプライバシー ポリシー URL を追加する必要があります。


    レビュータイル

    • ファーストパーティのレビューは、他のチャネルからのレビューと同様に、受信トレイに表示されます。
    • レビュー タイルには、Google、Facebook、ファースト パーティからのレビューのみが含まれます。


    シングルページアプリケーション(SPA)にタイルを実装する

    導入

    サーバーサイドでレンダリングされるページではタイルはそのまま動作しますが、起動時に一度だけレンダリングされ、別のページをクリックしてもブラウザウィンドウが再レンダリングされないページ(シングルページアプリケーション)では、タイルを動作させるために手動で設定を行う必要があります。これは、React、Vue.js、Angularなどの一般的なフレームワークを使用しているウェブサイトでよく見られるケースです。

    従うべき手順

    ステップ1

    初期のタイルのスクリプトを HTML に追加します。

    < スクリプト src =" https://widgets.uberall.com/assets/website-widgets.bundle.js " type =" text /javascript " > </script>


    ステップ2

    SPA 内のコンポーネントにコンテナ div を追加します。

    < ub-widget-review 
        データキー="YOUR_WIDGETS_KEY"
        データロケーションID = "YOUR_LOCATION_ID"
    // その他のカスタマイズオプション
    </ub-widget-review>


    タイルは SPA では自動的には開始されません。これは、スクリプトが "<ub-widget-review>" 要素を見つけられないためです。これは、JavaScript の実行時にのみレンダリングされます。


    ステップ3

    HTML内のタイルでルートに行くときは

    window.startWebsitesWidgets();

    タイルが表示され、正常に動作するはずです。


    ステップ4

    スパ内の別のルートに行く場合は、

    window.WebsitesWidgets () をアンマウントします。


    ストアロケータコンポーネントのアンマウント時に、すべてのコンポーネントが正しくアンマウントされ、ユーザーがビューに戻った際に正常に再起動できるようになります。

    これは、上記の手順で説明したロジックのほとんどを実行するこの tiles-componentを含む React 実装のリポジトリの例です


    APIでレビュータイルを実装する

    ウィジェットがすでに存在するかどうかを確認します(スニペットは null 以外である必要があります)

    得る https://uberall.com/api/locations/$locationId/widgets?v=20191203


    ウィジェットを作成する(例:レビュータイプ)

    POSThttps://uberall.com/api/locations/$locationId/widgets?v=20191203&type=レビュー


    ウィジェット設定を更新する

    パッチhttps://uberall.com/api/locations/$locationId/widgets?v=20191203{"widgets":[{"id": $ウィジェットID ,"type":"REVIEW","config":{"language":"en","privacyPolicyUrl":"","reviewDirectories":["GOOGLE","FACEBOOK","WEBSITE_WIDGETS"]}}]}


    APIでニュースタイルを実装する

    ウィジェットがすでに存在するかどうかを確認します(スニペットは null 以外である必要があります)

    得る https://uberall.com/api/locations/$locationId/widgets?v=20191203

    ウィジェットを作成

    投稿https://uberall.com/api/locations/$locationId/widgets?v=20191203&type=SOCIALPOST


    レビューウィジェットの実装例

    会社 URL スクリーンショット

    クラッシュチャンピオンのシンディ

    https://crashchampions.com/locations/crash-champions-chicago-heights

    サウンドキストン
    https://www.soundkistn.org/

    Was this article helpful?

    Save as PDF