150 讀數

如何个性化您的电子商务搜索引擎

经过 Algolia16m2023/04/26

太長; 讀書

在本教程中，我们将使用 React 和 Commerce.js 构建一个电子商务应用程序。我们的应用程序将能够搜索我们商店的产品目录，并根据用户活动提取相关（和个性化）的搜索结果。继续阅读以了解如何利用 Algolia Personalization 来创建您的用户会喜欢的自定义搜索体验。

在线购物最初被设计为通向便利的光荣途径——只需点击几下，您最喜欢的商品就会直接运送到您家门口，无需社交互动或长途跋涉穿过购物中心！

从那时起，电子商务就完全演变成了其他东西。现在，看似永无止境的目录和极少的人际关系指导会让网上商店感到不知所措。因此，电子商务体验中的用户往往严重依赖搜索来帮助缩小他们需要的内容，但可能会遇到循环性的困境，即挖掘成千上万的结果以找到他们真正想要的东西。但是，使用 Algolia 个性化您的搜索体验可以根据用户的活动和兴趣个性化这些搜索结果，从而消除这种困境。这为用户提供了更好的搜索体验，还增加了与您网站目录的互动，这对每个人来说都是双赢！

Algolia提供的工具可以让开发人员轻松实现个性化搜索功能。继续阅读以了解如何利用 Algolia Personalization 来创建您的用户会喜欢的自定义搜索体验！

我们正在建设什么

在本教程中，我们将使用 React 和 Commerce.js 构建一个电子商务应用程序。幸运的是，我们不必从头开始构建 — 我们将使用我们在本文中构建的具有推荐功能的基本电子商务应用程序作为起点。

完成本教程后，我们的应用程序将能够搜索我们商店的产品目录并根据用户活动提取相关（和个性化）的搜索结果：

如果您想提前查看完整项目的代码，可以访问algolia-commercejs-personalizations-app存储库。

入门

在我们开始构建之前，请确保设置以下内容：

Node：要检查您是否已经安装了 Node，请在命令行中运行node -v 。如果没有弹出任何版本，您将需要安装它——您可以在此处找到适用于您机器的安装说明。
ngrok：在此处创建一个 ngrok 帐户。您将需要它从本地应用程序建立隧道连接，以便您可以配置 webhook 和进行 API 调用。
Chec： Commerce.js 使用名为 Chec 的平台来管理您的集成、API 密钥和产品。您需要在此处创建一个帐户，然后设置一个 Commerce.js 商店。
Algolia：要利用 Algolia 的功能，请免费创建一个Algolia Build 计划帐户。拥有帐户后，创建一个应用程序来表示您的电子商务应用程序和一个名为products的索引。
- Algolia Recommend 事件：要使用您应用的全部功能，请设置Algolia Recommend – 为此，您需要在 3 天内手动或通过 CSV生成至少 500 个转化事件。
- 注意：您还需要这些事件才能使用 Algolia Personalization。
- Algolia 推荐模型：一旦你设置并聚合了你的事件，就可以根据这些事件为趋势项目生成一个推荐模型，这样它们就可以出现在你的应用程序中。

如果您不熟悉上述 Algolia 概念并且不确定如何自行设置，那么您很幸运！我们有一个完整的指南，其中包含上述设置步骤以及设置其他必要数据，例如用于推荐和个性化的事件以及生成推荐模型。

一旦您在本地运行的电子商务商店成功展示了您的产品、运行了聊天机器人并在您的产品详细信息页面上显示了热门商品推荐，您就可以继续下一步了！

建造时间

Algolia Personalization利用用户的特定品味，通过事件跟踪，为他们的搜索体验生成更相关和个性化的结果。由于搜索对不同类型的人可能有不同的含义，个性化将确保用户首先看到对他们最重要的结果。为了利用个性化的魔力，我们需要先执行几个步骤。

对您的产品进行分类

为了更深入地了解您的产品之间的关系，您需要在 Commerce.js 中为您的产品创建和添加类别。类别可以是产品相互关联的任何一般分组——以我们的古董寄售店为例，它可以是衣服类型（上衣、配饰、鞋子）、品牌（Vivienne Westwood、Dior、Chanel），甚至这些类别中的子类别（在鞋子中，有运动鞋、高跟鞋和靴子）。

在 Commerce.js 中添加类别并将它们分配给产品

首先，我们将在 Commerce.js 中为我们的产品添加类别。导航到 Chec 仪表板侧边栏中的“类别”页面，然后单击右上角的“添加”按钮以添加新类别。类别可以有父类别和子类别。

创建所有所需类别后，在 Commerce.js 中导航到您的产品并将这些类别分配给它们。为每个产品添加任意数量的类别 - 添加的类别越多，项目之间建立关系的机会就越多！

更新的产品列表将自动同步到 Algolia，这要归功于您在 Commerce.js 中设置的 Webhook，它将新产品推送到 Algolia 以进行products.create和products.update事件。如果您没有配置此配置，请阅读项目自述文件中的说明以添加它。

我们建议仔细检查您在 Algolia 中的产品，以确保为您在 Commerce.js 中更新的每个相应项目填充类别。如果您发现产品未同步到您的 Algolia 索引，您可以在此处的Chec 中检查您配置的 webhook。

在 Algolia 中定义构面的属性

对库存中的每个产品进行分类后，我们可以通过faceting为这些类别分配重要性。 Facets 是一组可过滤的类别，允许用户同时通过多个类别优化结果。这些类别在 Algolia 中称为“属性”，将包含我们在 Commerce.js 中分配给产品的类别。

要声明分面属性，请导航到您的 Algolia 仪表板中的应用程序索引。然后，单击“Configuration”并在“Filtering and Faceting”标题下找到“Facets”链接。在“分面属性”标题下，单击“添加属性”——这将显示索引中每个项目所拥有的一系列属性。找到categories.name属性。如果您找不到它，请仔细检查您的索引数据以确保categories字段填充了包含name属性的对象。

💡 如果您想要一个额外的方面以获得更加个性化的结果，我们还可以添加我们为项目搜索创建的 SEO 标签 ( seo.description ) 作为属性。

对于每个属性，您还可以根据它们是“仅过滤”、“可搜索”还是“不可搜索”对它们进行分类。您可以在此处了解有关这些分组的更多信息。

完成后，索引的“分面属性”部分应如下所示：

设置个性化

现在，我们已准备好通过仪表板设置个性化！

💡 *个性化是 Algolia 的一项高级功能，可在用于预生产开发的免费构建计划中使用。*

首先导航到您帐户中的“个性化”部分。如果这是您第一次使用个性化，您将看到以下屏幕：

单击“启用个性化”并按照流程接受条款和条件。

完成流程后，您将看到如下所示的仪表板：

在此仪表板中，您可以设置个性化策略以确保用户看到与您拥有的数据最相关的结果。有两个不同的因素会影响此策略：

事件：学习用户相似性的主要机制。这些是通过 Insights API 收集的。在我们的应用程序中，我们目前正在收集用户点击产品触发的转化事件。
Facets ：这些是在本文前面为您的索引配置的。构面由产品的类别、组和其他详细信息组成，这些详细信息可以更深入地了解在事件中与之交互的项目以及用户究竟喜欢该产品的哪些方面（例如品牌、产品类型或颜色）。

权衡事件和方面

在仪表板中，您将能够权衡事件和方面的重要性以影响您的策略。权衡允许您设置不同级别的重要性，并为某些事件和方面添加或多或少的意义，将所有权重组合到一个将影响个性化的总体策略中。

要开始权衡，您需要添加您希望在策略中包含的事件和方面。索引的任何可用事件将自动显示在仪表板上的“可用事件”类别下。如果您没有看到任何事件，请尝试通过单击您商店中的各种产品来使用新添加的方面重新生成一些转换事件。要将事件添加到您的策略中，一旦它们出现在“可用事件”下，请单击“添加到策略”按钮。

对于构面，您可以通过单击仪表板右侧的“添加构面”按钮来添加它们。从那里，您可以选择您之前添加的分面的任何属性，例如categories.name和seo.description ：

添加这些事件和方面后，您将能够调整添加到策略中的各个方面和事件的权重百分比。权重越高，事件或方面在您的策略中的优先级就越高。

在本文中了解有关称量事件和称量方面的更多细节。

定义个性化影响

除了权衡之外，您还可以定义个性化策略的影响，以影响用户亲和力对搜索排名的相对排名提升。对于本教程，我们将影响保留为默认的 50%。

在此处探索有关个性化影响的深入策略。

模拟您的策略

要测试事件、方面和影响设置的各种更改，您可以模拟您的个性化策略并按用户 ID 搜索以查看预测的策略结果。

由于我们只为我们的应用程序硬编码了一个用户，我们可以搜索user-1以查看我们当前策略可能会出现什么：

要更深入地了解个性化策略模拟，您可以在此处查看指南。

保存设置

最后，一旦您对策略模拟的结果感到满意，请务必点击“保存更改”按钮。如果您不满意，可以单击“放弃”。

添加 SearchBar 组件

为了进行搜索，用户需要一个地方来输入链接到您的 Algolia 索引和结果查询的搜索结果。

首先，在client/src/components中创建一个文件SearchBar.js ：

 // 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";

现在，让我们在主页上显示搜索栏。为此，请在/路径的路由配置中的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中的 Search 按钮后没有显示任何结果（事实上，没有任何改变）。这是因为我们还没有为该元素设置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()的钩子实例。然后，我们声明两种不同的路由更改路径——一种发生在onSubmit()事件的事件中，另一种发生在onReset()事件的事件中，该事件发生在用户搜索并单击“X”按钮时在搜索按钮旁边。

在routeChangeSubmit()路径中，我们正在获取查询并对其进行编码，这样它就不会导致路由器 URL 格式出现问题（这对于用户的搜索查询包含空格或其他非 URL 友好字符的情况很有帮助）。然后，我们使用编码的查询字符串作为:query参数，为SearchHits设置所需路由的路径。最后，我们使用useNavigate()挂钩将用户定向到该路由路径，从而无缝重定向到搜索结果。 routeChangeReset()做同样的事情，除了它重定向到主页并且不需要任何 URL 操作，因为路径很简单。

最后，我们将在return()中将onSubmit和onReset事件添加到我们的SearchBox组件：

 <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 库），我们所有的搜索设置都连接在那里。我们需要添加的两个参数是：

enablePersonalization ：一个布尔值，它将启用或禁用针对用户的 InstantSearch 实例发生的个性化结果。
userToken ：一个旨在作为唯一用户 ID 的字符串——如果您为您的应用程序使用单独的用户帐户，您将检索当前用户的 ID 并在此处填充它。在我们的应用场景中，我们只跟踪一个用户的活动，因此我们将使用该用户的 ID – user-1填充该值。

导航到client/src/App.js并为包含SearchBar （ /和/results/:query ）的每个路由的每个<Configure>标记添加以下参数。

下面是 home ( / ) 路由中的示例：

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

通过为每条路线的Configure组件添加此功能，您现在将能够在每次搜索中看到个性化的结果！