eコマース検索エンジンをパーソナライズする方法

オンライン ショッピングは当初、利便性への輝かしい経路として設計されました。数回クリックするだけで、お気に入りのアイテムがドアに直接配送されます。社交的なやり取りやショッピング モールを歩き回る必要はありません。

それ以来、 e コマースはまったく別のものに進化しました。現在、オンライン ショップは、一見終わりのないカタログと最小限の対人ガイダンスに圧倒されているように感じることがあります。その結果、e コマース エクスペリエンスのユーザーは、必要なものを絞り込むために検索に大きく依存する傾向がありますが、本当に探しているものを見つけるために何千もの結果を掘り下げるという循環的なジレンマを経験する可能性があります。ただし、Algolia で検索エクスペリエンスをパーソナライズすると、ユーザーのアクティビティと興味に基づいて検索結果をパーソナライズすることで、このジレンマを解消できます。これにより、ユーザーの検索エクスペリエンスが向上し、Web サイトのカタログとのエンゲージメントも向上します。これは、すべての人にとってメリットとなります。

Algolia は、開発者が Personalized Search 機能を簡単に実装できるツールを提供します。 Algolia パーソナライゼーションを活用して、ユーザーが気に入るカスタム検索エクスペリエンスを作成する方法を学びましょう!

私たちが構築しているもの

このチュートリアルでは、React と Commerce.js を使用して e コマース アプリケーションを構築します。幸いなことに、最初から作成する必要はありません。この記事で作成したレコメンデーション機能を備えたこの基本的な e コマース アプリケーションを出発点として使用します。

チュートリアルが完了すると、アプリケーションはストアの製品カタログを検索し、ユーザーのアクティビティに基づいて関連する (およびパーソナライズされた) 検索結果を引き出すことができるようになります。

プロジェクトの完全なコードを事前に確認したい場合は、 algolia-commercejs-personalizations-appリポジトリにアクセスしてください。

入門

構築を開始する前に、次の設定を行ってください。

• Node: Node が既にインストールされているかどうかを確認するには、コマンド ラインでnode -vを実行します。バージョンが表示されない場合は、それをインストールする必要があります — お使いのマシンのインストール手順については、こちら を参照してください。
• ngrok:ここでngrok アカウントを作成します。 Webhook を構成して API 呼び出しを行うことができるように、ローカル アプリからの接続をトンネリングするために必要になります。
• Chec: Commerce.js は Chec というプラットフォームを使用して、統合、API キー、および製品を管理します。ここでアカウントを作成してから、Commerce.js ストアをセットアップする必要があります。
• Algolia: Algolia の機能を利用するには、 Algolia Build プランのアカウントを無料で作成してください。アカウントを取得したら、e コマース アプリとproductsというインデックスを表すアプリケーションを作成します。
  • Algolia Recommend イベント:アプリの全機能を使用するには、 Algolia Recommendを設定します。これを行うには、手動またはCSV を使用して、3 日間で少なくとも 500 のコンバージョン イベントを生成する必要があります。
  • 注: Algolia Personalization を使用するには、これらのイベントも必要になります。
  • Algolia レコメンデーション モデル:イベントを設定して集計したら、これらのイベントに基づいてトレンド アイテムのレコメンデーション モデルを生成し、アプリで表示できるようにします。

上記の Algolia の概念に慣れておらず、自分で設定する方法がわからない場合は、幸運です!上記のセットアップ手順のほか、レコメンデーションやパーソナライゼーションのイベント、レコメンデーション モデルの生成など、その他の必要なデータを設定する完全なガイドがあります。

製品を表示し、チャットボットを実行し、製品詳細ページにトレンドアイテムの推奨事項を表示するローカルで実行されている e コマース ストアができたら、次のステップに進むことができます。

構築する時間

Algolia Personalization は、イベントを通じて追跡されたユーザー固有の好みを利用して、検索エクスペリエンスにより関連性の高い個人的な結果を生成します。検索は、さまざまなタイプの人にとってさまざまな意味を持つ可能性があるため、パーソナライゼーションにより、ユーザーにとって最も重要な結果が最初に表示されるようになります。パーソナライゼーションの魔法を活用するには、まずいくつかの手順に従う必要があります。

製品を分類する

製品間の関係についてより深い洞察を提供するには、Commerce.js でカテゴリを作成して製品に追加する必要があります。カテゴリは、製品が互いにどのように関連しているかを示す一般的なグループです。ヴィンテージの委託販売店の例では、服の種類 (トップス、アクセサリー、靴)、ブランド (Vivienne Westwood、Dior、Chanel)、さらにはそれらのカテゴリ内のサブカテゴリ (靴の中には、スニーカー、ヒール、ブーツがあります)。

Commerce.js にカテゴリを追加して商品に割り当てる

まず、Commerce.js で製品にカテゴリを追加します。 Chec ダッシュボードのサイドバーにある[カテゴリ]ページに移動し、右上の [追加] ボタンをクリックして新しいカテゴリを追加します。カテゴリには、親カテゴリとサブカテゴリを含めることができます。

必要なカテゴリをすべて作成したら、Commerce.js 内の製品に移動し、これらのカテゴリを割り当てます。各製品に好きなだけカテゴリを追加します。追加するカテゴリが多いほど、アイテム間の関係を構築する機会が増えます!

更新された製品リストは、 products.createおよびproducts.updateイベントのために新しい製品を Algolia にプッシュする Commerce.js で設定した Webhook のおかげで、自動的に Algolia に同期されます。これを構成していない場合は、プロジェクトのREADMEの指示を読んで追加してください。

Algolia で製品を再確認して、Commerce.js で更新する対応する各アイテムのカテゴリが入力されていることを確認することをお勧めします。製品が Algolia インデックスと同期していないことがわかった場合は、ここでChec で構成済みの Webhook をチェックインできます。

Algolia でファセットの属性を定義する

在庫内の各商品を分類すると、ファセットを通じてこれらのカテゴリに重要性を割り当てることができます。ファセットは、ユーザーが複数のカテゴリを同時に使用して結果を絞り込むことを可能にするフィルタ可能なカテゴリのセットです。 Algolia では「属性」と呼ばれるこれらのカテゴリは、Commerce.js で製品に割り当てたカテゴリで構成されます。

ファセットの属性を宣言するには、Algolia ダッシュボードでアプリのインデックスに移動します。次に、[構成] をクリックし、[フィルタリングとファセット] 見出しの下にある [ファセット] リンクを見つけます。 「ファセットの属性」見出しの下で、「属性の追加」をクリックします。これにより、インデックス内のすべてのアイテムが所有する一連のプロパティが表示されます。 categories.name属性を見つけます。これが見つからない場合は、インデックス データを再確認して、 categoriesフィールドにnameプロパティを含むオブジェクトが入力されていることを確認してください。

• 💡 さらにパーソナライズされた結果を得るために追加のファセットが必要な場合は、アイテム検索用に作成した SEO タグ ( seo.description ) を属性として追加することもできます。

各属性を使用して、「フィルターのみ」、「検索可能」、または「検索不可」に分類することもできます。これらのグループ化の詳細については、こちらをご覧ください。

完了すると、インデックスの「ファセットの属性」セクションは次のようになります。

パーソナライゼーションの設定

これで、ダッシュボードからパーソナライゼーションを設定する準備が整いました!

💡 *パーソナライゼーションは、本番前の開発用の無料ビルド プランで利用できる Algolia のプレミアム機能です。*

まず、アカウントの [パーソナライズ] セクションに移動します。パーソナライゼーションを初めて使用する場合は、次の画面が表示されます。

「パーソナライズを有効にする」をクリックし、フローに従って利用規約に同意します。

フローが完了すると、次のようなダッシュボードが表示されます。

このダッシュボード内でパーソナライゼーション戦略を設定して、所有するデータに最も関連する結果がユーザーに表示されるようにすることができます。この戦略に影響を与える 2 つの異なる要素があります。

• イベント: ユーザーのアフィニティを学習するための主要なメカニズム。これらは Insights API を通じて収集されます。私たちのアプリケーションでは、現在、ユーザーが製品をクリックすることによってトリガーされたコンバージョン イベントを収集しています。
• ファセット: これらは、この記事の前半でインデックス用に構成されています。ファセットは、カテゴリ、グループ、およびイベントでやり取りされたアイテムと、ユーザーがその製品について正確に何を好むかについてのより多くの洞察を提供する製品の追加の詳細で構成されます (この例には、ブランド、製品のタイプ、または色があります)。

イベントとファセットの重み付け

ダッシュボードでは、イベントとファセットの両方の重要性を比較検討して、戦略に影響を与えることができます。重み付けを使用すると、さまざまなレベルの重要性を設定し、特定のイベントやファセットに多かれ少なかれ意味を追加して、すべての重みを 1 つの一般的な戦略に組み合わせてパーソナライゼーションに影響を与えることができます。

重み付けを開始するには、戦略に含めるイベントとファセットを追加する必要があります。インデックスで利用可能なイベントは、ダッシュボードの「利用可能なイベント」カテゴリの下に自動的に表示されます。イベントが表示されない場合は、ストア内のさまざまな製品をクリックして、新しく追加されたファセットでコンバージョン イベントを再生成してみてください。 「利用可能なイベント」の下に表示されたイベントを戦略に追加するには、「戦略に追加」ボタンをクリックします。

ファセットの場合は、ダッシュボードの右側にある [ファセットを追加] ボタンをクリックして追加できます。そこから、 categories.nameやseo.descriptionなど、以前に追加したファセットの属性を選択できます。

これらのイベントとファセットを追加すると、戦略に追加されたさまざまなファセットとイベントの重みのパーセンテージを調整できるようになります。重みが高いほど、そのイベントまたはファセットが戦略で優先される重要性が高くなります。

イベントの重み付けとファセットの重み付けの詳細については、 この記事を参照してください。

パーソナライゼーションの影響を定義する

重み付けに加えて、パーソナライゼーション戦略の影響を定義して、ユーザー アフィニティが検索ランキングに及ぼす相対的な順位上昇に影響を与えることができます。このチュートリアルでは、影響をデフォルトの 50% のままにしました。

パーソナライゼーションの影響に関する詳細な戦略については、こちらをご覧ください。

戦略をシミュレートする

イベント、ファセット、および影響設定のさまざまな変更をテストするために、パーソナライズ戦略をシミュレートし、ユーザー ID で検索して、予測された戦略の結果を表示できます。

アプリのユーザーを 1 人だけハードコーディングしたので、 user-1を検索して、現在の戦略で何が表面化するかを確認できます。

パーソナライゼーション戦略のシミュレーションについてさらに詳しく知るには、 こちらのガイドをご覧ください。

設定を保存する

最後に、ストラテジーのシミュレーション結果に満足したら、必ず [変更を保存] ボタンをクリックしてください。満足できない場合は、「破棄」をクリックしてください。

SearchBar コンポーネントに追加する

ユーザーが検索するには、Algolia インデックスにリンクする検索結果を入力し、結果を照会する場所が必要です。

まず、ファイルSearchBar.js client/src/componentsに作成します。

 // client/src/components/SearchBar.js import React from "react"; import { SearchBox } from "react-instantsearch-dom"; function SearchBar() { return ( <div className="search__bar"> <SearchBox showLoadingIndicator={true} /> </div> ); } export default SearchBar;

これにより、Algolia InstantSearchライブラリの<SearchBox>ウィジェットを使用して、非常に単純な検索バーが作成されます。

SearchBox を使用すると、ユーザーは検索を入力できます。送信すると、すべてのビューがラップされているclient/src/App.js の InstantSearch コンポーネントで指定された Algolia インデックス (この場合はproducts ) を検索するためのクエリが作成されます。これらのビューを InstantSearch タグでラップすると、タグ内のすべてのコンポーネントのすべての InstantSearch 機能とコンポーネントにアクセスできます。

追加されたSearchBarコンポーネントを表示するには、スタイルを追加する必要があります。 client/src/componentsにSearchBar.cssファイルを作成し、 このサンプル ファイルの内容を貼り付けます。最後に、次の行を追加して、CSS をSearchBar.jsファイルにインポートすることを忘れないでください。

 import "./SearchBar.css";

SearchHits で検索結果を表示する

ユーザーが検索を入力できるようになったので、結果を表示するにはどうすればよいでしょうか?

これにより、検索をリダイレクトできる別の新しいコンポーネントが必要になり、クエリに基づいてさまざまな製品が表示されます。 Algolia から検索結果を取得するために、InstantSearch ライブラリを再度利用できます。具体的には、このライブラリの<Hits>というコンポーネントを使用して、これらのアイテムを表示します。

client/src/components/SearchHits.jsに、 SearchHitsコンポーネントを格納するファイルを作成します。次に、次のコードを追加します。

 // client/src/components/SearchHits.js import React from "react"; import { Hits } from "react-instantsearch-dom"; import ProductItem from "./ProductItem"; import aa from "search-insights"; import { Link } from "react-router-dom"; function Hit({ hit }) { return ( <div className="hit"> <Link to={`/products/${hit.id}`} state={{ selectedProduct: hit }} key={hit.id} onClick={() => { aa("convertedObjectIDs", { userToken: "user-1", index: "products", eventName: "Product conversion", objectIDs: [hit.id], }); }} > <ProductItem product={hit} /> </Link> </div> ); } function SearchHits() { return ( <> <Hits hitComponent={Hit} /> </> ); } export default SearchHits;

主な SearchHits 機能コンポーネント内で、InstantSearch< ライブラリから Hits コンポーネントを返しています。 Hits は、同じ InstantSearch タグ内の SearchBox 内に入力された内容に基づいて、結果のリストまたは検索ヒットを表示します。この場合は、SearchBar.js で実装した SearchBox です。

Hits コンポーネントを使用すると、カスタム コンポーネントを使用して各検索ヒットをレンダリングできます。このコードでは、メイン ページに製品を表示するためにも利用されているProductItem コンポーネントを再利用しています。

最後に、 メイン ページのProductListコンポーネントと同様に、各ProductItem製品の個々の詳細ページにつながるLinkコンポーネントにラップされます。これにより、ユーザーは検索結果のリストからアイテムをより詳細に見ることができ、ウェブサイト全体のすべての製品クリックに対して行っているように、 search-insightsライブラリを使用してコンバージョン クリックを追跡することもできます。

ルートを App.js に追加する

SearchBarコンポーネントとSearchHitsコンポーネントの準備ができたら、これらのコンポーネントを公式にアプリに追加し、 SearchHitsページへのルートを指定します。

client/src/App.jsファイルに移動し、ファイルの上部にある新しいコンポーネントをインポートします。

 import SearchBar from "./components/SearchBar"; import SearchHits from "./components/SearchHits";

それでは、ホームページに検索バーを表示しましょう。これを行うには、 /パスの Route 構成でProductsListコンポーネントの上にSearchBarコンポーネントを追加します。

 <Route exact path="/" element={ <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics /> <SearchBar /> // just added this in <ProductsList products={products} /> <Bot /> </InstantSearch> />

最後に、クエリに基づいて検索結果を動的に表示する新しいルートを追加します。そのためには、検索クエリを受け取る動的ルートが必要です。 App.jsの<Routes>タグ内に以下を追加します。

 <Route exact path="/results/:query" element={ <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics /> <SearchBar /> <SearchHits /> <Bot /> </InstantSearch> } />

上記はSearchBar 、前の検索からのSearchHitsのリスト、およびストアのチャットボットの既存のBotコンポーネントを表示します。他のルートのビューで行っているように、ページのコンテンツを InstantSearch インスタンスでラップして、ユーザーがページ内でライブラリとその検索機能を使用できるようにします。

この時点で、ホームページに検索バーが表示されるはずです。

SearchBar を更新して、ルートに基づいて SearchHits またはホームにリダイレクトします

最後に、 SearchBarセットアップしました。また、クエリが送信されたときに検索結果を表示するSearchHitsページもあります。

ただし、 SearchBarの [検索] ボタンをクリックしても結果が表示されない (実際には何も変化していない) ことに気付くかもしれません。これは、この要素のonSubmitイベントをまだ接続していないためです。

SearchBar.jsに戻って作業を始めましょう!

SearchBarの場合、検索結果を送信するときの望ましい動作は、 App.jsで構成された/results/:queryルートにリダイレクトすることです。ただし、これをイベント リスナーに実装しているため、通常のように<Link>タグを使用してこのビューに移動することはできません。幸いなことに、React にはuseNavigate()フックが用意されており、これを利用して目的のページにリダイレクトできます。

SearchBarの上部にuseNavigateフックをインポートします。

 import { useNavigate } from "react-router-dom";

次に、 SearchBar機能コンポーネント内で、 return()の前に次を追加します。

 let navigate = useNavigate(); const routeChangeSubmit = (query) => { let queryURI = encodeURIComponent(query); let path = `/results/${queryURI}`; navigate(path); }; const routeChangeReset = () => { let path = `/`; navigate(path); };

上記は、 useNavigate()のフック インスタンスを開始します。次に、2 つの異なるルート変更経路を宣言します。1 つはonSubmit()イベントのイベントで発生し、もう 1 つはonReset()イベントのイベントで発生します。これは、ユーザーが検索して「X」ボタンをクリックしたときに発生します。検索ボタンの横にあります。

routeChangeSubmit()パスウェイ内で、クエリを取得してエンコードし、ルーターの URL フォーマットで問題が発生しないようにします (これは、ユーザーの検索クエリにスペースやその他の URL に適していない文字が含まれている場合に役立ちます)。次に、エンコードされたクエリ文字列を:queryパラメータとして使用して、 SearchHitsの目的のルートへのパスを設定します。最後に、 useNavigate()フックを使用して、ユーザーをそのルート パスに誘導します。これにより、検索結果にシームレスにリダイレクトされます。 routeChangeReset()同じことを行いますが、ホームページにリダイレクトし、パスが単純であるため URL 操作を必要としません。

最後に、 return()内のSearchBoxコンポーネントにonSubmitおよびonResetイベントを追加します。

 <SearchBox showLoadingIndicator={true} onSubmit={(event) => { // added event.preventDefault(); if (event.target[0].value) { routeChangeSubmit(event.target[0].value); } }} onReset={() => { // added routeChangeReset(); }} />

両方のイベント リスナーは、それぞれのアクションに対して追加したばかりの経路を呼び出し、検索をsubmitting resetting 。 onSubmit()内で、発生する可能性のある望ましくないリダイレクトを回避するためにevent.preventDefault()を呼び出しています。次に、 eventを使用して、 event.target[0].valueを介して検索クエリを取得します。

ただし、 event.target[0].valueプロパティが空の場合 (ユーザーがクエリを入力せずに検索ボタンをクリックしたことを意味します)、無効な URL リダイレクトが発生し、空白のページが表示されます。その結果、コードは値が存在することを確認し、存在する場合はrouteChangeSubmit()経路を呼び出し、検索クエリを渡します。

このコードを追加すると、アイテムをシームレスに検索し、対応する結果を表示できるようになります。

設定コンポーネントでパーソナライゼーションを有効にする

検索は素晴らしいですが、パーソナライゼーションによる検索はさらに優れています。幸いなことに、Algolia を使用してパーソナライゼーション戦略を簡単に開発できたので、それを既存の検索インスタンスにすばやく組み込むことができます。

パーソナライゼーションを追加するには、すべての検索設定が接続されているApp.jsのConfigure コンポーネント(InstantSearch ライブラリから) に 2 つのパラメーターを追加する必要があります。追加する必要がある 2 つのパラメーターは次のとおりです。

• enablePersonalization : ユーザーの InstantSearch インスタンスに対して発生するパーソナライズ結果を有効または無効にするブール値。
• userToken : 一意のユーザー ID を意図した文字列 — アプリケーションに別のユーザー アカウントを使用している場合は、現在のユーザーの ID を取得してここに入力します。このアプリのシナリオでは、1 人のユーザーのアクティビティのみを追跡しているため、この値にそのユーザーの ID ( user-1を入力します。

client/src/App.jsに移動し、 SearchBar ( /および/results/:query ) を含む各ルートの各<Configure>タグに次のパラメーターを追加します。

これがホーム ( / ) ルート内でどのように見えるかの例を次に示します。

 <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics enablePersonalization={true} userToken="user-1" /> <SearchBar /> <ProductsList products={products} /> <Bot /> </InstantSearch>

各ルートのConfigureコンポーネントにこれを追加すると、各検索でパーソナライズされた結果を表示できるようになります!

本番環境でパーソナライゼーションを有効にする方法、およびパーソナライゼーションを有効にするために使用できるその他の方法 (特定のインデックスのダッシュボードでパーソナライゼーションを有効にするなど) の詳細については、 この記事を参照してください。

結論

信じられないほどの仕事、そしてフォローしてくれてありがとう！ 🎉 このガイドでは、パーソナライズされた検索を e コマース エクスペリエンスに追加する方法を学習しました。このチュートリアルの完全なプロジェクト コードを表示するには、 algolia-commercejs-personalizations-appリポジトリにアクセスしてください。

Algolia のパーソナライゼーション機能は、すべての面倒な作業を行ってくれました。パーソナライゼーション ダッシュボードを通じて、カスタム ユーザー検索エクスペリエンスの戦略を簡単に作成することができました。さらに、InstantSearch ライブラリからの Algolia の事前構築済みコンポーネントにより、必要最小限の構成で、実行を開始し、サイトに簡単な検索ソリューションを実装するための簡単な方法が提供されました。

このチュートリアルでパーソナライゼーションの力について多くを学んでいただければ幸いです。 💪 今日構築したアプリをさらにハックしたい場合は、次のようないくつかの更新を行うことを検討してください。

• フロントエンドとバックエンドのテストを追加して、サイトが常にスムーズに動作していることを確認する

• ユーザー アカウントの導入 — ユーザーがサイトのアカウントにサインアップ、ログイン、ログアウトできるようにします。お気に入りなどの新しいユーザー固有の機能を追加することもできます

• より多くの種類のイベントを生成し、さまざまなレコメンデーション モデルとパーソナライズ戦略を試す

• カートにアイテムを追加してチェックアウトするためのエクスペリエンスを作成する

  
  

可能性は無限大！ ✨ 今後のハッキングをよろしくお願いします!