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

オンライン ショッピングは当初、利便性への輝かしい経路として設計されました。数回クリックするだけで、お気に入りのアイテムがドアに直接配送されます。社交的なやり取りやショッピング モールを歩き回る必要はありません。 それ以来、 まったく別のものに進化しました。現在、オンライン ショップは、一見終わりのないカタログと最小限の対人ガイダンスに圧倒されているように感じることがあります。その結果、e コマース エクスペリエンスのユーザーは、必要なものを絞り込むために検索に大きく依存する傾向がありますが、 探しているものを見つけるために何千もの結果を掘り下げるという循環的なジレンマを経験する可能性があります。ただし、Algolia で検索エクスペリエンスをパーソナライズすると、ユーザーのアクティビティと興味に基づいて検索結果をパーソナライズすることで、このジレンマを解消できます。これにより、ユーザーの検索エクスペリエンスが向上し、Web サイトのカタログとのエンゲージメントも向上します。これは、すべての人にとってメリットとなります。 e コマースは 本当に 開発者が Personalized Search 機能を簡単に実装できるツールを提供します。 Algolia パーソナライゼーションを活用して、ユーザーが気に入るカスタム検索エクスペリエンスを作成する方法を学びましょう! Algolia は、 私たちが構築しているもの このチュートリアルでは、React と Commerce.js を使用して e コマース アプリケーションを構築します。幸いなことに、最初から作成する必要はありません。この記事で作成したレコメンデーション機能を備えた 基本的な e コマース アプリケーションを出発点として使用します。 この チュートリアルが完了すると、アプリケーションはストアの製品カタログを検索し、ユーザーのアクティビティに基づいて関連する (およびパーソナライズされた) 検索結果を引き出すことができるようになります。 プロジェクトの完全なコードを事前に確認したい場合は、 リポジトリにアクセスしてください。 algolia-commercejs-personalizations-app 入門 構築を開始する前に、次の設定を行ってください。 Node が既にインストールされているかどうかを確認するには、コマンド ラインで を実行します。バージョンが表示されない場合は、それをインストールする必要があります — お使いのマシンのインストール手順については 参照してください。 Node: node -v 、こちら を ngrok アカウントを作成します。 Webhook を構成して API 呼び出しを行うことができるように、ローカル アプリからの接続をトンネリングするために必要になります。 ngrok: ここで Commerce.js は Chec というプラットフォームを使用して、統合、API キー、および製品を管理します。 アカウントを作成してから、Commerce.js ストアをセットアップする必要があります。 Chec: ここで Algolia の機能を利用するには、 無料で作成してください。アカウントを取得したら、e コマース アプリと という を表す 。 Algolia: Algolia Build プランのアカウントを products インデックス アプリケーションを作成します アプリの全機能を使用するには、 を設定します。これを行うには、手動または 、3 日間で少なくとも 500 のコンバージョン イベントを生成する必要があります。 Algolia Recommend イベント: Algolia Recommend CSV を使用して Algolia Personalization を使用するには、これらのイベントも必要になります。 注: イベントを設定して集計したら、これらのイベントに基づいてトレンド アイテムの 生成し、アプリで表示できるようにします。 Algolia レコメンデーション モデル: レコメンデーション モデルを 上記の Algolia の概念に慣れておらず、自分で設定する方法がわからない場合は、幸運です!上記のセットアップ手順のほか、レコメンデーションやパーソナライゼーションのイベント、レコメンデーション モデルの生成など、その他の必要なデータを設定する あります。 完全なガイドが 製品を表示し、チャットボットを実行し、製品詳細ページにトレンドアイテムの推奨事項を表示するローカルで実行されている e コマース ストアができたら、次のステップに進むことができます。 構築する時間 イベントを通じて追跡されたユーザー固有の好みを利用して、検索エクスペリエンスにより関連性の高い個人的な結果を生成します。検索は、さまざまなタイプの人にとってさまざまな意味を持つ可能性があるため、パーソナライゼーションにより、ユーザーにとって最も重要な結果が最初に表示されるようになります。パーソナライゼーションの魔法を活用するには、まずいくつかの手順に従う必要があります。 Algolia Personalization は、 製品を分類する 製品間の関係についてより深い洞察を提供するには、Commerce.js でカテゴリを作成して製品に追加する必要があります。カテゴリは、製品が互いにどのように関連しているかを示す一般的なグループです。ヴィンテージの委託販売店の例では、服の種類 (トップス、アクセサリー、靴)、ブランド (Vivienne Westwood、Dior、Chanel)、さらにはそれらのカテゴリ内のサブカテゴリ (靴の中には、スニーカー、ヒール、ブーツがあります)。 Commerce.js にカテゴリを追加して商品に割り当てる まず、Commerce.js で製品にカテゴリを追加します。 Chec ダッシュボードのサイドバーにある ページに移動し、右上の [追加] ボタンをクリックして新しいカテゴリを追加します。カテゴリには、親カテゴリとサブカテゴリを含めることができます。 [カテゴリ] 必要なカテゴリをすべて作成したら、Commerce.js 内の に移動し、これらのカテゴリを割り当てます。各製品に好きなだけカテゴリを追加します。追加するカテゴリが多いほど、アイテム間の関係を構築する機会が増えます! 製品 更新された製品リストは、 および イベントのために新しい製品を Algolia にプッシュする Commerce.js で設定した Webhook のおかげで、自動的に Algolia に同期されます。これを構成していない場合は、プロジェクトの の指示を読んで追加してください。 products.create products.update 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 ( ); } export default SearchBar; これにより、Algolia ライブラリの ウィジェットを使用して、非常に単純な検索バーが作成されます。 InstantSearch SearchBox を使用すると、ユーザーは検索を入力できます。送信すると、すべてのビューがラップされている で指定された Algolia インデックス (この場合は ) を検索するためのクエリが作成されます。これらのビューを InstantSearch タグでラップすると、タグ内のすべてのコンポーネントのすべての InstantSearch 機能とコンポーネントにアクセスできます。 client/src/App.js の InstantSearch コンポーネント products 追加された コンポーネントを表示するには、スタイルを追加する必要があります。 に ファイルを作成し、 内容を貼り付けます。最後に、次の行を追加して、CSS を ファイルにインポートすることを忘れないでください。 SearchBar client/src/components SearchBar.css このサンプル ファイルの SearchBar.js import "./SearchBar.css"; SearchHits で検索結果を表示する ユーザーが検索を入力できるようになったので、結果を表示するにはどうすればよいでしょうか? これにより、検索をリダイレクトできる別の新しいコンポーネントが必要になり、クエリに基づいてさまざまな製品が表示されます。 Algolia から検索結果を取得するために、InstantSearch ライブラリを再度利用できます。具体的には、このライブラリの というコンポーネントを使用して、これらのアイテムを表示します。 に、 コンポーネントを格納するファイルを作成します。次に、次のコードを追加します。 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 ( { aa("convertedObjectIDs", { userToken: "user-1", index: "products", eventName: "Product conversion", objectIDs: [hit.id], }); }} > ); } function SearchHits() { return ( <> ); } 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 // just added this in /> 最後に、クエリに基づいて検索結果を動的に表示する新しいルートを追加します。そのためには、検索クエリを受け取る動的ルートが必要です。 の タグ内に以下を追加します。 App.js } /> 上記は 、前の検索からの のリスト、およびストアのチャットボットの既存の コンポーネントを表示します。他のルートのビューで行っているように、ページのコンテンツを InstantSearch インスタンスでラップして、ユーザーがページ内でライブラリとその検索機能を使用できるようにします。 SearchBar SearchHits Bot この時点で、ホームページに検索バーが表示されるはずです。 SearchBar を更新して、ルートに基づいて SearchHits またはホームにリダイレクトします 最後に、 セットアップしました。また、クエリが送信されたときに検索結果を表示する ページもあります。 SearchBar SearchHits ただし、 の [検索] ボタンをクリックしても結果が表示されない (実際には何も変化していない) ことに気付くかもしれません。これは、この要素の イベントをまだ接続していないためです。 SearchBar onSubmit に戻って作業を始めましょう! SearchBar.js の場合、検索結果を送信するときの望ましい動作は、 で構成された ルートにリダイレクトすることです。ただし、これをイベント リスナーに実装しているため、通常のように タグを使用してこのビューに移動することはできません。幸いなことに、React には が用意されており、これを利用して目的のページにリダイレクトできます。 SearchBar App.js /results/:query 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); }; 上記は、 のフック インスタンスを開始します。次に、2 つの異なるルート変更経路を宣言します。1 つは イベントのイベントで発生し、もう 1 つは イベントのイベントで発生します。これは、ユーザーが検索して「X」ボタンをクリックしたときに発生します。検索ボタンの横にあります。 useNavigate() onSubmit() onReset() パスウェイ内で、クエリを取得してエンコードし、ルーターの URL フォーマットで問題が発生しないようにします (これは、ユーザーの検索クエリにスペースやその他の URL に適していない文字が含まれている場合に役立ちます)。次に、エンコードされたクエリ文字列を パラメータとして使用して、 の目的のルートへのパスを設定します。最後に、 フックを使用して、ユーザーをそのルート パスに誘導します。これにより、検索結果にシームレスにリダイレクトされます。 同じことを行いますが、ホームページにリダイレクトし、パスが単純であるため URL 操作を必要としません。 routeChangeSubmit() :query SearchHits useNavigate() routeChangeReset() 最後に、 内の コンポーネントに および イベントを追加します。 return() SearchBox onSubmit onReset { // 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 ただし、 プロパティが空の場合 (ユーザーがクエリを入力せずに検索ボタンをクリックしたことを意味します)、無効な URL リダイレクトが発生し、空白のページが表示されます。その結果、コードは値が存在することを確認し、存在する場合は 経路を呼び出し、検索クエリを渡します。 event.target[0].value routeChangeSubmit() このコードを追加すると、アイテムをシームレスに検索し、対応する結果を表示できるようになります。 設定コンポーネントでパーソナライゼーションを有効にする 検索は素晴らしいですが、パーソナライゼーションによる検索は います。幸いなことに、Algolia を使用してパーソナライゼーション戦略を簡単に開発できたので、それを既存の検索インスタンスにすばやく組み込むことができます。 さらに優れて パーソナライゼーションを追加するには、すべての検索設定が接続されている の (InstantSearch ライブラリから) に 2 つのパラメーターを追加する必要があります。追加する必要がある 2 つのパラメーターは次のとおりです。 App.js Configure コンポーネント : ユーザーの InstantSearch インスタンスに対して発生するパーソナライズ結果を有効または無効にするブール値。 enablePersonalization : 一意のユーザー ID を意図した文字列 — アプリケーションに別のユーザー アカウントを使用している場合は、現在のユーザーの ID を取得してここに入力します。このアプリのシナリオでは、1 人のユーザーのアクティビティのみを追跡しているため、この値にそのユーザーの ID ( を入力します。 userToken user-1 に移動し、 ( および ) を含む各ルートの各 タグに次のパラメーターを追加します。 client/src/App.js SearchBar / /results/:query これがホーム ( ) ルート内でどのように見えるかの例を次に示します。 / 各ルートの コンポーネントにこれを追加すると、各検索でパーソナライズされた結果を表示できるようになります! Configure 本番環境でパーソナライゼーションを有効にする方法、およびパーソナライゼーションを有効にするために使用できるその他の方法 (特定のインデックスのダッシュボードでパーソナライゼーションを有効にするなど) の詳細については、 を参照してください。 この記事 結論 信じられないほどの仕事、そしてフォローしてくれてありがとう！ 🎉 このガイドでは、パーソナライズされた検索を e コマース エクスペリエンスに追加する方法を学習しました。このチュートリアルの完全なプロジェクト コードを表示するには、 リポジトリにアクセスしてください。 algolia-commercejs-personalizations-app Algolia のパーソナライゼーション機能は、すべての面倒な作業を行ってくれました。パーソナライゼーション ダッシュボードを通じて、カスタム ユーザー検索エクスペリエンスの戦略を簡単に作成することができました。さらに、InstantSearch ライブラリからの Algolia の事前構築済みコンポーネントにより、必要最小限の構成で、実行を開始し、サイトに簡単な検索ソリューションを実装するための簡単な方法が提供されました。 このチュートリアルでパーソナライゼーションの力について多くを学んでいただければ幸いです。 💪 今日構築したアプリをさらにハックしたい場合は、次のようないくつかの更新を行うことを検討してください。 フロントエンドとバックエンドのテストを追加して、サイトが常にスムーズに動作していることを確認する ユーザー アカウントの導入 — ユーザーがサイトのアカウントにサインアップ、ログイン、ログアウトできるようにします。お気に入りなどの新しいユーザー固有の機能を追加することもできます より多くの種類のイベントを生成し、さまざまなレコメンデーション モデルとパーソナライズ戦略を試す カートにアイテムを追加してチェックアウトするためのエクスペリエンスを作成する 可能性は無限大！ ✨ 今後のハッキングをよろしくお願いします!