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

このページで学べること

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

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

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

始める前に

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

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

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

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

Tapcart で任意のレビュー ウィジェットを追加するには、次の手順に従います。これらの手順は、3 つすべてのウィジェットに対して繰り返す必要があります（つまり、個別のカスタムブロックを作成します）。

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. 作成した保存済みカスタム ブロックをテンプレートにドラッグします。
2. エディターではウィジェットを直接読み込めない場合があります。その場合、ブロック名がプレーン テキストとして表示されます。これは想定どおりです。
3. Preview your app をクリックし、アプリを追加したページに移動します。ウィジェットが正しく表示されていることを確認してください。

コードスニペット

星評価ウィジェット

<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>

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

Klaviyo レビューのウィジェットは Tapcart プレビューに自動的には表示されませんが、アプリでは正しく読み込まれます。これは、どのレビューを表示するかを判断するために、ウィジェットに実際の商品 ID が必要なためです。ウィジェットをプレビューするには、Tapcart エディターの 変数プレビュー値 フィールドに商品 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. プレビューがすぐに正しく表示されない場合は、エディタを更新してください。

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

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

その他のリソース