Como personalizar seu mecanismo de pesquisa de comércio eletrônico

As compras on-line foram inicialmente projetadas como um caminho glorioso para a conveniência - alguns cliques e seus itens favoritos são enviados diretamente à sua porta, sem necessidade de interação social ou caminhadas em shoppings! Desde então, evoluiu para algo totalmente diferente. Agora, as lojas online podem parecer impressionantes com um catálogo aparentemente interminável e orientação interpessoal mínima. Como resultado, os usuários em experiências de comércio eletrônico tendem a se apoiar fortemente na pesquisa para ajudar a restringir o que precisam, mas podem enfrentar o dilema cíclico de vasculhar milhares de resultados para encontrar o que procuram. No entanto, personalizar sua experiência de pesquisa com o Algolia pode eliminar esse dilema, personalizando os resultados da pesquisa com base na atividade e nos interesses do usuário. Isso proporciona uma melhor experiência de pesquisa para os usuários e também aumenta o envolvimento com o catálogo do seu site, o que é uma vitória para todos! o comércio eletrônico realmente oferece as ferramentas para facilitar a implementação dos recursos de pesquisa personalizada para os desenvolvedores. Continue lendo para saber como aproveitar o Algolia Personalization para criar uma experiência de pesquisa personalizada que seus usuários vão adorar! A Algolia O que estamos construindo Neste tutorial, criaremos um aplicativo de comércio eletrônico usando React e Commerce.js. Felizmente, não teremos que criar do zero — usaremos aplicativo básico de e-commerce com recursos de Recomendações que construímos neste artigo como nosso ponto de partida. este Após a conclusão do tutorial, nosso aplicativo poderá pesquisar o catálogo de produtos de nossa loja e obter resultados de pesquisa relevantes (e personalizados) com base na atividade do usuário: Se quiser visualizar o código completo do projeto com antecedência, você pode visitar o repositório . algolia-commercejs-personalizations-app Começando Antes de começarmos a construir, certifique-se de configurar o seguinte: Para verificar se você já tem o Node instalado, execute em sua linha de comando. Se nenhuma versão aparecer, você precisará instalá-la — você pode encontrar instruções de instalação para sua máquina . Nó: node -v aqui Crie uma conta ngrok . Você precisará dele para encapsular conexões de seus aplicativos locais para poder configurar webhooks e fazer chamadas de API. ngrok: aqui Commerce.js usa uma plataforma chamada Chec para gerenciar suas integrações, API Keys e produtos. Você precisará criar uma conta e configurar uma loja Commerce.js. Chec: aqui para aproveitar os recursos do Algolia, crie uma gratuitamente. Depois de ter sua conta, para representar seu aplicativo de comércio eletrônico e um chamado . Algolia: conta do plano Algolia Build crie um aplicativo índice products Para usar todos os recursos do seu aplicativo, configure – para fazer isso, você precisará gerar pelo menos 500 eventos de conversão em 3 dias, manualmente ou . Algolia Recommend Events: o Algolia Recommend por meio de um CSV Você também precisará desses eventos para usar o Algolia Personalization. NOTA: depois de configurar e agregar seus eventos, gere um para itens de tendência com base nesses eventos para que possam aparecer em seu aplicativo. Modelo de recomendação da Algolia: modelo de recomendação Se você não estiver familiarizado com os conceitos de Algolia acima e não tiver certeza de como configurá-lo por conta própria, você está com sorte! Temos um que captura as etapas de configuração acima, além de configurar outros dados necessários, como eventos para recomendações e personalização e gerar um modelo de recomendações. guia completo Depois de ter uma loja de comércio eletrônico funcionando localmente exibindo seus produtos com sucesso, executando o chatbot e apresentando recomendações de itens de tendência na página de detalhes do produto, você pode prosseguir para a próxima etapa! Hora de Construir utiliza os gostos específicos do usuário, rastreados por meio de eventos, para gerar resultados mais relevantes e pessoais para suas experiências de pesquisa. Como as pesquisas podem significar coisas diferentes para diferentes tipos de pessoas, a Personalização garantirá que os usuários vejam os resultados que mais importam para eles primeiro. Para aproveitar a magia da Personalização, precisamos seguir algumas etapas primeiro. A Algolia Personalization Categorize seus produtos Para fornecer informações mais profundas sobre as relações entre seus produtos, você precisará criar e adicionar categorias a seus produtos em Commerce.js. As categorias podem ser qualquer agrupamento geral de como os produtos se relacionam entre si – no caso de nossa loja de consignação vintage, podem ser tipos de roupas (blusas, acessórios, sapatos), marcas (Vivienne Westwood, Dior, Chanel) e até subcategorias dentro dessas categorias (dentro de sapatos, há tênis, saltos e botas). Adicionar categorias em Commerce.js e atribuí-las aos produtos Em primeiro lugar, adicionaremos categorias aos nossos produtos em Commerce.js. Navegue até a página na barra lateral do seu painel Chec e clique no botão “Adicionar” no canto superior direito para adicionar novas categorias. As categorias podem ter categorias principais e subcategorias. Categorias Depois de criar todas as categorias desejadas, navegue até seus em Commerce.js e atribua essas categorias a eles. Adicione quantas categorias quiser a cada produto — quanto mais categorias forem adicionadas, mais oportunidades de criar relacionamentos entre os itens! Produtos As listas de produtos atualizadas serão sincronizadas automaticamente com Algolia graças ao webhook que você configurou em Commerce.js que envia novos produtos para Algolia para eventos e . Se você não tiver isso configurado, leia as instruções no do projeto para adicioná-lo. products.create products.update README Recomendamos verificar novamente seus produtos no Algolia para garantir que as categorias estejam sendo preenchidas para cada item correspondente que você atualizar no Commerce.js. Se você achar que os produtos não estão sincronizando com seu índice Algolia, você pode verificar seu webhook configurado em Chec . here Definir atributos para facetas em Algolia Com cada produto em seu inventário categorizado, podemos atribuir significado a essas categorias por meio . As facetas são um conjunto de categorias filtráveis que permitem aos usuários refinar os resultados por meio de várias categorias simultaneamente. Essas categorias, chamadas de “atributos” em Algolia, consistirão nas categorias que atribuímos a nossos produtos em Commerce.js. do facetamento Para declarar atributos para facetamento, navegue até o índice do seu aplicativo no painel do Algolia. Em seguida, clique em “Configuração” e localize o link “Facetas” no cabeçalho “Filtragem e Facetação”. Sob o título “Attributes for faceting”, clique em “Add an Attribute” — isso exibirá uma série de propriedades que cada item em seu índice possui. Localize o atributo . Se você tiver problemas para encontrar isso, verifique novamente seus dados de índice para garantir que o campo seja preenchido com objetos que contenham uma propriedade . categories.name categories name ) como um atributo. 💡 Se você quiser ter uma faceta adicional para resultados ainda mais personalizados, também podemos adicionar as tags de SEO que criamos para pesquisas de itens ( seo.description Com cada atributo, você também pode categorizá-los se devem ser "somente filtro", "pesquisáveis" ou "não pesquisáveis". Você pode aprender mais sobre esses agrupamentos . aqui Depois de concluída, a seção "Atributos para lapidação" do seu índice deve ser semelhante a esta: Configurar personalização Agora, estamos prontos para configurar a Personalização por meio do painel! 💡 *Personalização é um recurso premium da Algolia que está disponível no plano Build gratuito para desenvolvimento de pré-produção.* Comece navegando até a . Se esta for a primeira vez que usa o Personalization, você verá esta tela: seção Personalização em sua conta Clique em “Ativar personalização” e siga o fluxo para aceitar os termos e condições. Depois de concluir o fluxo, você verá um painel semelhante a este: Nesse painel, você pode configurar uma estratégia de personalização para garantir que os usuários vejam os resultados mais relevantes para os dados que você possui. Existem dois elementos diferentes que influenciam esta estratégia: : O principal mecanismo para aprender as afinidades do usuário. Eles são coletados por meio da API do Insights. Em nosso aplicativo, estamos coletando eventos de conversão acionados por usuários que clicam em produtos. Eventos : foram configuradas para o seu índice anteriormente neste artigo. As facetas consistem em categorias, grupos e detalhes adicionais de um produto que fornecem mais informações sobre um item com o qual interagiu em um evento e o que exatamente um usuário gosta nesse produto (exemplos disso são marca, tipo de produto ou cor). Facetas Pesar Eventos e Facetas No painel, você poderá avaliar a importância dos eventos e facetas para influenciar sua estratégia. A ponderação permite colocar diferentes níveis de importância e adicionar mais ou menos significado a certos eventos e facetas em detrimento de outros, combinando todos os pesos em uma estratégia geral que influenciará a Personalização. Para começar a pesagem, você precisará adicionar os eventos e facetas que gostaria de ter em sua estratégia. Todos os eventos disponíveis para o seu índice aparecerão automaticamente na categoria "Eventos disponíveis" no painel. Se você não vir nenhum evento, tente gerar novamente alguns eventos de conversão com as facetas recém-adicionadas clicando em vários produtos em sua loja. Para adicionar eventos à sua estratégia assim que aparecerem em “Eventos disponíveis”, clique no botão “Adicionar à estratégia”. Para facetas, você pode adicioná-las clicando no botão “Adicionar uma faceta” à direita do painel. A partir daí, você pode selecionar quaisquer atributos para facetamento adicionados anteriormente, como e : categories.name seo.description Ao adicionar esses eventos e facetas, você poderá ajustar porcentagens de peso para várias facetas e eventos adicionados à sua estratégia. Quanto maior o peso, mais importante aquele evento ou faceta será priorizado em sua estratégia. Saiba mais detalhes sobre e . pesagem de eventos pesagem de facetas neste artigo Definir o impacto da personalização Além da ponderação, você pode definir o impacto de uma estratégia de Personalização para influenciar o aumento da posição relativa que as afinidades do usuário têm no ranking de busca. Para este tutorial, deixamos o impacto em um padrão de 50%. Explore uma estratégia detalhada sobre o impacto da Personalização aqui. Simule sua estratégia Para testar várias alterações de eventos, facetas e configurações de impacto, você pode simular sua estratégia de Personalização e pesquisar por ID do usuário para visualizar os resultados da estratégia prevista. Como codificamos apenas um usuário para nosso aplicativo, podemos pesquisar por para ver o que pode surgir com nossa estratégia atual: user-1 Para obter mais informações sobre simulações de estratégias de personalização, você pode visualizar o guia . aqui Salvar configurações Por fim, quando estiver satisfeito com os resultados da simulação da sua estratégia, certifique-se de clicar no botão “Salvar alterações”. Se você não estiver satisfeito, pode clicar em “Descartar”. Adicionar no componente SearchBar Para pesquisar, os usuários precisam de um local para inserir resultados de pesquisa vinculados ao seu índice Algolia e consultas de resultados. Para começar, crie um arquivo, , em : 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; Isso cria uma barra de pesquisa muito simples usando o widget da biblioteca Algolia . InstantSearch O SearchBox permite que os usuários insiram pesquisas. Após o envio, uma consulta é feita para pesquisar um índice Algolia (neste caso, são ) que é especificado em , com o qual todas as nossas visualizações são agrupadas. Envolver essas exibições em tags do InstantSearch nos dá acesso a todos os recursos e componentes do InstantSearch para todos os componentes dentro da tag. products nossos componentes InstantSearch em client/src/App.js Para visualizar o componente depois de adicionado, você precisará adicionar um estilo. Crie um arquivo em e cole o conteúdo . Por fim, não se esqueça de importar o CSS para o arquivo adicionando a seguinte linha: SearchBar SearchBar.css client/src/components deste arquivo de exemplo SearchBar.js import "./SearchBar.css"; Mostrar resultados de pesquisa em SearchHits Agora que temos uma maneira de os usuários inserirem pesquisas, como podemos exibir os resultados? Isso aumenta a necessidade de outro novo componente para o qual podemos redirecionar as pesquisas, que exibirá diferentes produtos com base na consulta. Para obter os resultados da pesquisa de Algolia, podemos aproveitar novamente a biblioteca InstantSearch — especificamente, podemos usar um componente nessa biblioteca chamado , que exibirá esses itens para nós. Crie um arquivo em , que abrigará nosso componente . Em seguida, adicione o seguinte código: 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; Dentro do componente funcional primário SearchHits, estamos retornando nosso componente Hits da biblioteca InstantSearch<. Os acessos exibirão uma lista de resultados, ou resultados de pesquisa, com base no que é inserido em um SearchBox dentro da mesma tag InstantSearch — neste caso, é o SearchBox que acabamos de implementar em SearchBar.js. Com o componente Hits, você pode renderizar cada ocorrência de pesquisa usando um componente personalizado. Em nosso código, reutilizamos o que também é utilizado para exibir produtos em nossa página principal. componente ProductItem Por fim, de forma semelhante ao componente , cada é agrupado em um componente que leva à página de detalhes individual do produto. Isso permite que os usuários vejam o item com mais detalhes na lista de resultados de pesquisa e também rastreiem os cliques de conversão usando a biblioteca , como fazemos para todos os cliques de produtos em nosso site. ProductList da nossa página principal ProductItem Link search-insights Adicionar rotas ao App.js Depois de ter os componentes e prontos, é hora de adicionar esses componentes em nosso aplicativo oficialmente e apontar uma rota para nossa página ! SearchBar SearchHits SearchHits Acesse seu arquivo e importe os novos componentes na parte superior do arquivo: client/src/App.js import SearchBar from "./components/SearchBar"; import SearchHits from "./components/SearchHits"; Agora, vamos mostrar a barra de pesquisa na página inicial. Para fazer isso, adicione seu componente acima do componente em sua configuração de rota para o caminho : SearchBar ProductsList / // just added this in /> Por fim, adicionaremos uma nova rota que exibirá dinamicamente os resultados da pesquisa com base na consulta. Para fazer isso, precisaremos de uma rota dinâmica que leve na consulta de pesquisa. Adicione o seguinte dentro da tag em seu : App.js } /> O acima mostrará um , uma lista de da pesquisa anterior e o componente existente para o chatbot da nossa loja. Como estamos fazendo com as exibições de nossas outras rotas, estamos agrupando o conteúdo da página com uma instância do InstantSearch para que os usuários possam usar a biblioteca e seus recursos de pesquisa na página. SearchBar SearchHits Bot Neste ponto, você deve conseguir ver sua barra de pesquisa na página inicial: Atualize SearchBar para redirecionar para SearchHits ou home com base em rotas Por fim, temos nosso configurado. Também temos uma página, , que exibirá os resultados da pesquisa quando uma consulta for enviada. SearchBar SearchHits No entanto, você pode perceber que nenhum resultado está aparecendo (e, na verdade, nada está realmente mudando) ao clicar no botão Pesquisar em sua . Isso ocorre porque ainda não conectamos um evento para esse elemento. SearchBar onSubmit Vamos mergulhar de volta em e começar a trabalhar! SearchBar.js Para nosso , nosso comportamento desejado quando enviamos nosso resultado de pesquisa é que ele redirecione para a rota configurada em . No entanto, como estamos implementando isso em um ouvinte de evento, não podemos navegar para essa exibição usando tags como normalmente faríamos. Felizmente, o React oferece gancho que podemos aproveitar para nos redirecionar para a página desejada! SearchBar /results/:query App.js um useNavigate() Na parte superior de , importe o gancho : SearchBar useNavigate import { useNavigate } from "react-router-dom"; Em seguida, dentro do componente funcional , adicione o seguinte antes de : SearchBar return() let navigate = useNavigate(); const routeChangeSubmit = (query) => { let queryURI = encodeURIComponent(query); let path = `/results/${queryURI}`; navigate(path); }; const routeChangeReset = () => { let path = `/`; navigate(path); }; O acima inicia uma instância de gancho de . Em seguida, declaramos dois caminhos de mudança de rota diferentes — um que ocorre no evento de um evento e outro que ocorre no evento de um evento , que ocorre quando um usuário pesquisa e clica em um botão “X” ao lado do botão de pesquisa. useNavigate() onSubmit() onReset() Dentro do caminho , estamos pegando a consulta e codificando-a para que não cause problemas com a formatação do URL do roteador (isso é útil para casos em que as consultas de pesquisa dos usuários contêm espaços ou outros caracteres não compatíveis com URL). Em seguida, definimos um caminho para a rota desejada para nosso , usando a string de consulta codificada como parâmetro . Por fim, usamos o gancho para direcionar o usuário para esse caminho de rota, o que resulta em um redirecionamento contínuo para os resultados da pesquisa. O faz a mesma coisa, exceto que redireciona para a página inicial e não requer nenhuma manipulação de URL, pois o caminho é direto. routeChangeSubmit() SearchHits :query useNavigate() routeChangeReset() Por fim, adicionaremos os eventos e ao nosso componente dentro do : onSubmit onReset SearchBox return() { // added event.preventDefault(); if (event.target[0].value) { routeChangeSubmit(event.target[0].value); } }} onReset={() => { // added routeChangeReset(); }} /> Ambos os ouvintes de eventos chamam os caminhos que acabamos de adicionar para as respectivas ações, e a pesquisa. Dentro de , estamos chamando para evitar qualquer redirecionamento indesejado que possa acontecer. Em seguida, usamos o para extrair a consulta de pesquisa por meio de . submitting resetting onSubmit() event.preventDefault() event event.target[0].value No entanto, se a propriedade estiver vazia (o que significa que um usuário clicou no botão de pesquisa sem inserir uma consulta), ocorreria um redirecionamento de URL inválido, resultando em uma página em branco. Como resultado, o código verificará se esse valor existe e, se existir, chamará nosso caminho e passará na consulta de pesquisa. event.target[0].value routeChangeSubmit() Com este código adicionado, você deve ser capaz de pesquisar itens perfeitamente e visualizar os resultados correspondentes: Ativar personalização no componente Configurar Pesquisar é fantástico, mas pesquisar com personalização é . Felizmente, desenvolvemos uma estratégia de personalização com facilidade usando Algolia e podemos incorporá-la rapidamente em nossa instância de pesquisa existente! ainda melhor Para adicionar personalização, precisaremos adicionar dois parâmetros aos nossos (da biblioteca InstantSearch) em nosso , onde todas as nossas configurações de pesquisa estão conectadas. Os dois parâmetros que precisaremos adicionar são: componentes Configure App.js : um booleano que ativará ou desativará os resultados de personalização que ocorrem para a instância do InstantSearch de um usuário. enablePersonalization : Uma string que se destina a ser um ID de usuário exclusivo — se você estiver usando contas de usuário separadas para seu aplicativo, recupere o ID do usuário atual e preencha-o aqui. No cenário de nosso aplicativo, estamos rastreando apenas a atividade de um usuário, portanto, preencheremos esse valor com o ID desse usuário – . userToken user-1 Navegue até e inclua os seguintes parâmetros em cada tag para cada rota que contém um ( e ). client/src/App.js SearchBar / /results/:query Aqui está um exemplo de como ficaria dentro da rota home ( ): / Com isso adicionado ao componente de cada rota, agora você poderá ver resultados personalizados em cada pesquisa! Configure Para saber mais sobre como habilitar o Personalization na produção e outros métodos que você pode usar para habilitar o Personalization (como habilitá-lo no painel para determinados índices), visite . este artigo Conclusão Trabalho incrível, e obrigado por acompanhar! 🎉 Com este guia, você aprendeu como adicionar pesquisa personalizada à sua experiência de comércio eletrônico. Se quiser ver o código completo do projeto para este tutorial, você pode visitar o repositório . algolia-commercejs-personalizations-app Os recursos de personalização da Algolia fizeram todo o trabalho pesado para nós — por meio do painel de personalização, você conseguiu criar facilmente uma estratégia para experiências personalizadas de pesquisa do usuário. Além disso, os componentes pré-construídos do Algolia da biblioteca InstantSearch forneceram uma maneira direta de você começar a trabalhar e implementar uma solução de pesquisa fácil em seu site, com configuração mínima necessária. Esperamos que você tenha aprendido muito sobre o poder da Personalização neste tutorial! 💪 Se você gostaria de hackear mais o aplicativo que criamos hoje, você pode fazer algumas atualizações, como: Adicionando testes de front-end e back-end para garantir que seu site esteja sempre funcionando sem problemas Apresentando contas de usuário — permite que os usuários se inscrevam, façam login e saiam de contas em seu site. Você também pode adicionar novos recursos específicos do usuário, como favoritos Gerar mais tipos de eventos e experimentar diferentes modelos de recomendação e estratégias de personalização Criando uma experiência para adicionar itens a um carrinho e finalizar a compra As possibilidades são infinitas! ✨ Boa sorte com seu futuro hacking!