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

在线购物最初被设计为通向便利的光荣途径——只需点击几下，您最喜欢的商品就会直接运送到您家门口，无需社交互动或长途跋涉穿过购物中心！ 从那时起， 就完全演变成了其他东西。现在，看似永无止境的目录和极少的人际关系指导会让网上商店感到不知所措。因此，电子商务体验中的用户往往严重依赖搜索来帮助缩小他们需要的内容，但可能会遇到循环性的困境，即挖掘成千上万的结果以找到他们 想要的东西。但是，使用 Algolia 个性化您的搜索体验可以根据用户的活动和兴趣个性化这些搜索结果，从而消除这种困境。这为用户提供了更好的搜索体验，还增加了与您网站目录的互动，这对每个人来说都是双赢！ 电子商务 真正 提供的工具可以让开发人员轻松实现个性化搜索功能。继续阅读以了解如何利用 Algolia Personalization 来创建您的用户会喜欢的自定义搜索体验！ Algolia 我们正在建设什么 在本教程中，我们将使用 React 和 Commerce.js 构建一个电子商务应用程序。幸运的是，我们不必从头开始构建 — 我们将使用我们在本文中构建的具有推荐功能的基本电子商务应用 作为起点。 程序 完成本教程后，我们的应用程序将能够搜索我们商店的产品目录并根据用户活动提取相关（和个性化）的搜索结果： 如果您想提前查看完整项目的代码，可以访问 存储库。 algolia-commercejs-personalizations-app 入门 在我们开始构建之前，请确保设置以下内容： 要检查您是否已经安装了 Node，请在命令行中运行 。如果没有弹出任何版本，您将需要安装它——您可以 找到适用于您机器的安装说明。 Node： node -v 在此处 创建一个 ngrok 帐户。您将需要它从本地应用程序建立隧道连接，以便您可以配置 webhook 和进行 API 调用。 ngrok： 在此处 Commerce.js 使用名为 Chec 的平台来管理您的集成、API 密钥和产品。您需要 创建一个帐户，然后设置一个 Commerce.js 商店。 Chec： 在此处 要利用 Algolia 的功能，请免费创建一个 。拥有帐户后， 来表示您的电子商务应用程序和一个名为 的 。 Algolia： Algolia Build 计划帐户 创建一个应用程序 products 索引 要使用您应用的全部功能，请设置 – 为此，您需要在 3 天内手动或 生成至少 500 个转化事件。 Algolia Recommend 事件： Algolia Recommend 通过 CSV 您还需要这些事件才能使用 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 中定义构面的属性 对库存中的每个产品进行分类后，我们可以通过 为这些类别分配重要性。 Facets 是一组可过滤的类别，允许用户同时通过多个类别优化结果。这些类别在 Algolia 中称为“属性”，将包含我们在 Commerce.js 中分配给产品的类别。 faceting 要声明分面属性，请导航到您的 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 ( ); } 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"; 现在，让我们在主页上显示搜索栏。为此，请在 路径的路由配置中的 组件上方添加 组件： / ProductsList SearchBar // just added this in /> 最后，我们将添加一个新路由，该路由将根据查询动态显示搜索结果。为此，我们需要一个接受搜索查询的动态路由。在 的 标记中添加以下内容： App.js } /> 上面的内容将显示一个 ，一个来自先前搜索的 列表，以及我们商店的聊天机器人的现有 组件。就像我们处理其他路由的视图一样，我们用 InstantSearch 实例包装页面内容，以便用户可以在页面中使用该库及其搜索功能。 SearchBar SearchHits Bot 此时，您应该能够在主页上看到您的搜索栏： 更新 SearchBar 以根据路由重定向到 SearchHits 或主页 最后，我们设置了 。我们还有一个页面 ，它会在提交查询时显示搜索结果。 SearchBar SearchHits 但是，您可能会注意到在单击 中的 Search 按钮后没有显示任何结果（事实上，没有任何改变）。这是因为我们还没有为该元素设置 事件。 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); }; 以上启动了 的钩子实例。然后，我们声明两种不同的路由更改路径——一种发生在 事件的事件中，另一种发生在 事件的事件中，该事件发生在用户搜索并单击“X”按钮时在搜索按钮旁边。 useNavigate() onSubmit() onReset() 在 路径中，我们正在获取查询并对其进行编码，这样它就不会导致路由器 URL 格式出现问题（这对于用户的搜索查询包含空格或其他非 URL 友好字符的情况很有帮助）。然后，我们使用编码的查询字符串作为 参数，为 设置所需路由的路径。最后，我们使用 挂钩将用户定向到该路由路径，从而无缝重定向到搜索结果。 做同样的事情，除了它重定向到主页并且不需要任何 URL 操作，因为路径很简单。 routeChangeSubmit() :query SearchHits useNavigate() routeChangeReset() 最后，我们将在 中将 和 事件添加到我们的 组件： return() onSubmit onReset SearchBox { // 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 库），我们所有的搜索设置都连接在那里。我们需要添加的两个参数是： App.js Configure 组件 ：一个布尔值，它将启用或禁用针对用户的 InstantSearch 实例发生的个性化结果。 enablePersonalization ：一个旨在作为唯一用户 ID 的字符串——如果您为您的应用程序使用单独的用户帐户，您将检索当前用户的 ID 并在此处填充它。在我们的应用场景中，我们只跟踪一个用户的活动，因此我们将使用该用户的 ID – 填充该值。 userToken user-1 导航到 并为包含 （ 和 ）的每个路由的每个 标记添加以下参数。 client/src/App.js SearchBar / /results/:query 下面是 home ( ) 路由中的示例： / 通过为每条路线的 组件添加此功能，您现在将能够在每次搜索中看到个性化的结果！ Configure 要了解有关在生产中启用个性化以及可用于启用个性化的其他方法（例如在某些索引的仪表板中启用它）的更多信息，请访问 。 本文 结论 令人难以置信的工作，感谢您的关注！ 🎉 通过本指南，您了解了如何将个性化搜索添加到您的电子商务体验中。如果您想查看本教程的完整项目代码，可以访问 存储库。 algolia-commercejs-personalizations-app Algolia 的个性化功能为我们完成了所有繁重的工作——通过个性化仪表板，您能够轻松地为自定义用户搜索体验创建策略。此外，Algolia 来自 InstantSearch 库的预构建组件为您提供了一种直接的方式，让您可以在您的站点上开始运行并实施简单的搜索解决方案，只需最少的配置。 我们希望您从本教程中学到了很多有关个性化功能的知识！ 💪 如果您想对我们今天构建的应用程序进行更多修改，您可以考虑进行一些更新，例如： 添加前端和后端测试以确保您的站点始终顺畅运行 引入用户帐户——允许用户在您的网站上注册、登录和注销帐户。您还可以添加新的用户特定功能，例如收藏夹 生成更多类型的事件并尝试不同的推荐模型和个性化策略 创建将商品添加到购物车并结账的体验 可能性是无止境！ ✨祝你未来的黑客好运！