Tapcart を使用してモバイルアプリに Klaviyo レビューのウィジェットを追加する方法

このページで学べること

Tapcart で構築されたモバイル アプリに Klaviyo レビューのウィジェットを追加する方法を確認してください。これらのウィジェットは、カスタム ブロックを使用して Tapcart アプリに追加できます：

• 星評価ウィジェット
  商品ページのみ：商品の全体の星評価を表示します
• 商品レビュー ウィジェット
  商品ページのみ。商品のすべてのレビューの要約と一覧に加えて、質問する、またはレビューを投稿するためのボタンを表示します
• 注目レビュー カルーセル ウィジェット
  任意のページ。複数の商品にわたる注目レビューの一部を表示します。

Tapcart は、Shopify で構築されたストアでのみ利用できます。

始める前に

このプロセスは、以下に該当する企業のみが利用できます：

• Tapcart でモバイルアプリをすでに作成している場合
• Tapcart の Enterprise プランを使用
• アクティブな Klaviyo レビューのプランを保有している。

まだ Klaviyo レビューを設定していない場合は、「Klaviyo レビューのスタートガイド」の記事をご覧ください。

おすすめレビューのカルーセルを追加する場合は、カルーセルをプレビューする前に、Klaviyoでおすすめとして表示する公開済みレビューを選択してください。

Tapcart のカスタムブロックを使用して Klaviyo レビュー ウィジェットを追加

Tapcartでレビューのウィジェットを追加するには、次の手順に従ってください。追加したい各ウィジェットについて、個別のカスタムブロックを作成してください。

1. Tapcart エディターを開きます。
2. App Studioで、Design BlocksからCustom Blocksに切り替えます。
   

3. 新しいカスタム ブロックを作成するには、[Blocks Editor を起動] をクリックしてください。
4. ウィジェットに、Klaviyo Star Rating custom block のようなわかりやすい名前を付けます。
5. ブロックエディタの JS タブで、次のコードスニペットを追加します。PUBLIC_API_KEY を、6 文字の Klaviyo サイト ID に置き換えます。
   

var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js?module=reviews';
document.head.appendChild(script);

1. ブロックエディターの HTML タブで、追加したいウィジェット（例：スター評価ウィジェット）のスニペットを貼り付けます。以下のコードスニペットを確認してください：
   1. 星評価ウィジェットのコード
   2. 商品レビュー ウィジェット コード
   3. 注目レビューのカルーセル ウィジェット コード
      

2. [保存] をクリックします。
3. エディターを終了するには、[閉じる] をクリックしてください。
4. [App Studio] ドロップダウンから、[商品詳細] を選択します。
   
   

1. 作成した保存済みカスタム ブロックをテンプレートにドラッグします。

エディターではウィジェットを直接読み込めない場合があります。その場合、ブロック名がプレーン テキストとして表示されます。これは想定どおりです。

1. アプリをプレビューをクリックし、ウィジェットを追加したページに移動します。ウィジェットが正しく表示されているか確認してください。
2. 顧客にウィジェットを表示する準備ができたら、Tapcartで変更内容を公開してください。

コードスニペット

星評価ウィジェット

<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div>

商品レビューウィジェット

<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>

注目レビューのカルーセル

<div id="klaviyo-featured-reviews-carousel"></div>

アプリ ウィジェットをプレビュー

星評価と商品レビューのウィジェットで正しいレビューを表示するには、実際の商品IDが必要です。これらのウィジェットをプレビューするには、Tapcartエディタの変数プレビュー値フィールドで商品IDを設定してください。注目レビューのカルーセルには商品IDは必要ありません。

1. Tapcart の App Studio で、Custom を選択してカスタムウィジェットを表示します。
2. レビュー ウィジェット ブロックのいずれかの横にある 3 点アイコンをクリックし、エディターを起動をクリックします。
3. [設定] をクリックします。

4. JSON をスクロールまたは検索して、product オブジェクト内の id 変数を見つけてください。他のオブジェクト内にも id 変数がありますが、編集が必要なのはここに示されている商品 ID のみです。
   

5. サンプルの商品の ID を、貴社のストア内にあるレビューが 1 件以上ある商品の ID に置き換えてください。商品の ID を確認するには、Klaviyo で [コンテンツ] > [商品] に移動し、アイテム ID をコピーします。
   

6. [保存] をクリックします。
7. 追加した各星評価または商品レビューのカスタムブロックごとに、これらの手順を繰り返してください。
8. プレビューがすぐに正しく表示されない場合は、エディタを更新してください。

アプリのウィジェットのスタイルを設定

Klaviyoのウィジェットエディターでウィジェットの設定を変更すると、変更を公開をクリックした後に、ウェブサイトとアプリの両方に適用されます。スタイルの変更をアプリのみに適用するには、TapcartのカスタムブロックエディターのCSSタブにカスタムCSSを追加してください。カスタムCSSを使用してKlaviyoレビューのウィジェットのスタイルを設定する方法をご覧ください。

その他のリソース