オンサイトの商品レコメンデーションのスタートガイド

このページで学べること

パーソナライズされた商品レコメンデーション ブロックを商品詳細ページ（PDP）に直接追加し、Klaviyo のオンサイト パーソナライゼーションを Klaviyo Customer Hub ドロワーを超えて拡張する方法をご覧ください。このガイドでは、埋め込みブロックの動作、設定とデザインの方法、機能が段階的に提供される仕組み、実装に伴う技術的なトレードオフについて説明します。

埋め込み型の商品レコメンデーションは、設計上どのコマースプラットフォームにも依存せず、最終的にはサイト内のどのページでもホストできます。最初の重点は PDP です。この機能に関するフィードバックについては、Klaviyo Customer Hub プロダクトチームまでお問い合わせください。

始める前に

• 要件: このブロックでは、Klaviyo で Klaviyo Customer Hub を有効にする必要があります。
• プラットフォーム サポート: 現在、Shopify（テーマ アプリ ブロックとして）、Shopify Plus（埋め込み可能なコードスニペットとして）、Salesforce Commerce Cloud（SFRA サポートのみ）でご利用いただけます。追加のプラットフォームのサポートも予定されています。
• エンジン依存：おすすめの品質は、Klaviyo のレコメンデーション エンジンによって支えられています。当社では次世代のレコメンデーション サービスを通じておすすめを提供しています。これは、匿名の訪問者におすすめをパーソナライズできなかった以前のシステムからのアップグレードです。

注意：オンサイトの商品おすすめは以前、Hub ドロワーでのみ利用可能で、ログイン済みユーザーのみが対象でした。この機能により、おすすめが Hub ドロワーから PDP に表示されるようになります。

埋め込み商品のおすすめでできること

埋め込みの商品レコメンド ブロックを使用すると、商品詳細ページ上で関連商品を直接表示できるため、すべての訪問者（既知・匿名を問わず）が自分に関連する内容を確認できます。

• サイトのスタイルに合わせる：フォント、色、レイアウト、ボタンスタイルをカスタマイズして、ブロックがテーマのネイティブな一部のように感じられるようにします。すべての Klaviyo Customer Hub 要素、すべての埋め込みブロック、またはおすすめブロックのみを対象とするカスタム CSS クラスを追加します。ブロックヘッダー（例：「Top picks for you」または「You may also like」）を編集し、カルーセルスタイルのレイアウトを選択します。
• 既知の訪問者向けのおすすめをパーソナライズする： おすすめは、Next Gen Product Recommendations（NGPRS）サービスにより、Klaviyo がプロファイルについて把握している情報に基づいています。
• すべての訪問者に何かを表示する: 匿名訪問者には、Shopify から取得した一般的な商品レコメンデーションがデフォルトで表示されます。
• ページのパフォーマンスを損なわずにすばやく読み込む：このブロックは最初からすばやく読み込めるように設計されており、余分なコードでページを重くしないため、ウェブサイトの表示速度を低下させたり、パフォーマンス スコアに悪影響を与えたりしません。
• エンゲージメントと収益を測定： すべてのクリックは「商品クリック」イベントとしてトラッキングされ、Hub ドロワー内の商品のクリックと同じ方法でアトリビューションされるため、ビュー数、クリック数、アトリビューション可能な収益を測定できます。
• エクスペリエンスの一貫性を保つ：既知または識別済みの訪問者は、Hub ドロワーと PDP で同じおすすめを確認できます。
• 買い物客が商品を後で保存できるようにする：買い物客は、カードから直接おすすめ商品をお気に入りに追加したり、まだ購入する準備ができていない場合はカートに追加したりできます。
• カートにすでに入っている商品のおすすめは避けてください： ショッパーのカートにすでに入っている商品は、そのユーザーに表示されるおすすめから除外されます。

新しい埋め込み商品のおすすめブロックを作成する

これは新しい埋め込み可能ブロックです。幅広い埋め込みパーソナライズ コンテンツ ブロックのフレームワークを通じてではなく、お気に入りや FAQ などの他の埋め込みブロックと同じ方法で設定します。

1. ブロック ライブラリにアクセスします：
   1. Klaviyo の左側のナビゲーションで [サービス] > [Klaviyo Customer Hub] に移動します。[デザイン] > [オンサイト ブロック] をクリックします。ブロック ライブラリで 商品レコメンデーション を見つけて、商品ページに追加してください。
2. おすすめソースを設定してください：
   1. 訪問者の状態に基づいて、おすすめがどのように入力されフィルタリングされるかを選択してください：
      1. ログイン済みで識別された訪問者： Klaviyo（デフォルト）または Shopify。
      2. 匿名の訪問者： Shopify（デフォルトで、現在は唯一のオプションです）。このソースは、匿名の訪問者向けの Hub ドロワー レコメンデーションも提供します。
      3. 在庫切れの商品を除外： [オン]／[オフ] を切り替えます。
      4. ショッパーのカートにすでに入っている商品をフィルタリング： オン/オフを切り替えます。
3. デザインとカスタマイズ：
   1. ブロックがサイトにネイティブに感じられるように、ビジュアル設定を調整してください：
      1. 要素：価格（デフォルトで表示）、お気に入りボタン（デフォルトで表示）、カートに追加ボタン（デフォルトで非表示）、商品バリエーション（デフォルトで非表示）を表示または非表示にします。
      2. ボタン：スタイル（丸形、四角形、曲線）、色、テキストの色、テキストの大文字/小文字を選択します。
      3. レイアウト：最大幅、最大商品数（1～10、デフォルト 4）、パディング（上、左、右、下）、およびマージン（タイトルと商品行の間、商品間）を設定します。画像サイズ（幅、高さ）とフィット（cover、contain、fill）を設定します。
      4. フォント：ヘッダー フォント、商品名フォント、価格フォント、バリエーション フォントのファミリーとサイズを選択します。
      5. カスタム CSS：Klaviyo Customer Hub のすべての要素、すべての埋め込みブロック、またはレコメンデーション ブロックを個別にターゲットにするクラスを追加します。

4. プラットフォーム設定を完了：
   1. EC プラットフォームのフロントエンドにブロックをインストールします：
      1. Shopify: テーマ エディターからアプリ ブロックとして追加します。
      2. Shopify Plus: テーマレベルでの制御が必要なマーチャント向けに、コードスニペット（div）として追加します。
5. [公開]：
   1. 変更を保存し、公開します。ブロックは、設定したソース、フィルター、デザイン設定に従って、ライブの PDP に表示されます。

アトリビューションとアナリティクス

• おすすめ商品のクリックはすべて、Clicked Product イベントとして追跡され、ソースは “Embedded product recommendation block.” となります。
• クリックは、Hub ドロワー内の商品に対するクリックと同じ方法で関連付けられます。
• Klaviyo では、閲覧とクリックがログに記録されるため、導入（少なくとも 1 つのライブのおすすめブロックがあるアカウント）、エンゲージメント（クリックスルー率、クリック後のカート追加率、お気に入り）、収益（ブロックのインプレッション 1,000 件あたりの帰属収益、およびおすすめ機能によるクリック経路を含む注文の割合）を追跡できます。

スタイルの一致

既存のテーマに合わせるには、Shopify が Klaviyo に代わって商品ブロックをレンダリングする方法が最適です。ただし、Shopify は商品のコンテキストで Klaviyo のアプリ拡張機能内のブロックをレンダリングしないため、代わりに商品ブロックをレンダリングする新しいセクションブロックを作成します。