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, o comércio eletrônico 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 realmente 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!

A Algolia 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!

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 este aplicativo básico de e-commerce com recursos de Recomendações que construímos neste artigo como nosso ponto de partida.

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:

• Nó: Para verificar se você já tem o Node instalado, execute node -v 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 aqui .
• ngrok: Crie uma conta ngrok aqui . Você precisará dele para encapsular conexões de seus aplicativos locais para poder configurar webhooks e fazer chamadas de API.
• Chec: Commerce.js usa uma plataforma chamada Chec para gerenciar suas integrações, API Keys e produtos. Você precisará criar uma conta aqui e configurar uma loja Commerce.js.
• Algolia: para aproveitar os recursos do Algolia, crie uma conta do plano Algolia Build gratuitamente. Depois de ter sua conta, crie um aplicativo para representar seu aplicativo de comércio eletrônico e um índice chamado products .
  • Algolia Recommend Events: Para usar todos os recursos do seu aplicativo, configure o Algolia Recommend – para fazer isso, você precisará gerar pelo menos 500 eventos de conversão em 3 dias, manualmente ou por meio de um CSV .
  • NOTA: Você também precisará desses eventos para usar o Algolia Personalization.
  • Modelo de recomendação da Algolia: depois de configurar e agregar seus eventos, gere um modelo de recomendação para itens de tendência com base nesses eventos para que possam aparecer em seu aplicativo.

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 guia completo 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.

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

A Algolia Personalization 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.

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 Categorias 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.

Depois de criar todas as categorias desejadas, navegue até seus Produtos 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!

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 products.create e products.update . Se você não tiver isso configurado, leia as instruções no README do projeto para adicioná-lo.

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 do facetamento . 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.

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 categories.name . Se você tiver problemas para encontrar isso, verifique novamente seus dados de índice para garantir que o campo categories seja preenchido com objetos que contenham uma propriedade name .

• 💡 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 ) como um atributo.

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ção Personalização em sua conta . Se esta for a primeira vez que usa o Personalization, você verá esta tela:

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:

• Eventos : 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.
• Facetas : 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).

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 categories.name e 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 pesagem de eventos e 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 user-1 para ver o que pode surgir com nossa estratégia atual:

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, SearchBar.js , em 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;

Isso cria uma barra de pesquisa muito simples usando o widget <SearchBox> 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 products ) que é especificado em nossos componentes InstantSearch em client/src/App.js , 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.

Para visualizar o componente SearchBar depois de adicionado, você precisará adicionar um estilo. Crie um arquivo SearchBar.css em client/src/components e cole o conteúdo deste arquivo de exemplo . Por fim, não se esqueça de importar o CSS para o arquivo SearchBar.js adicionando a seguinte linha:

 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 <Hits> , que exibirá esses itens para nós.

Crie um arquivo em client/src/components/SearchHits.js , que abrigará nosso componente SearchHits . Em seguida, adicione o seguinte código:

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

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 componente ProductItem que também é utilizado para exibir produtos em nossa página principal.

Por fim, de forma semelhante ao componente ProductList da nossa página principal , cada ProductItem é agrupado em um componente Link 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 search-insights , como fazemos para todos os cliques de produtos em nosso site.

Adicionar rotas ao App.js

Depois de ter os componentes SearchBar e SearchHits prontos, é hora de adicionar esses componentes em nosso aplicativo oficialmente e apontar uma rota para nossa página SearchHits !

Acesse seu arquivo client/src/App.js e importe os novos componentes na parte superior do arquivo:

 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 SearchBar acima do componente ProductsList em sua configuração de rota para o caminho / :

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

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 <Routes> em seu App.js :

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

O acima mostrará um SearchBar , uma lista de SearchHits da pesquisa anterior e o componente Bot 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.

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 SearchBar configurado. Também temos uma página, SearchHits , que exibirá os resultados da pesquisa quando uma consulta for enviada.

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 SearchBar . Isso ocorre porque ainda não conectamos um evento onSubmit para esse elemento.

Vamos mergulhar de volta em SearchBar.js e começar a trabalhar!

Para nosso SearchBar , nosso comportamento desejado quando enviamos nosso resultado de pesquisa é que ele redirecione para a rota /results/:query configurada em App.js . No entanto, como estamos implementando isso em um ouvinte de evento, não podemos navegar para essa exibição usando tags <Link> como normalmente faríamos. Felizmente, o React oferece um gancho useNavigate() que podemos aproveitar para nos redirecionar para a página desejada!

Na parte superior de SearchBar , importe o gancho useNavigate :

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

Em seguida, dentro do componente funcional SearchBar , adicione o seguinte antes de 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 useNavigate() . Em seguida, declaramos dois caminhos de mudança de rota diferentes — um que ocorre no evento de um evento onSubmit() e outro que ocorre no evento de um evento onReset() , que ocorre quando um usuário pesquisa e clica em um botão “X” ao lado do botão de pesquisa.

Dentro do caminho routeChangeSubmit() , 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 SearchHits , usando a string de consulta codificada como parâmetro :query . Por fim, usamos o gancho useNavigate() para direcionar o usuário para esse caminho de rota, o que resulta em um redirecionamento contínuo para os resultados da pesquisa. O routeChangeReset() 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.

Por fim, adicionaremos os eventos onSubmit e onReset ao nosso componente SearchBox dentro do return() :

 <SearchBox showLoadingIndicator={true} onSubmit={(event) => { // 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, submitting e resetting a pesquisa. Dentro de onSubmit() , estamos chamando event.preventDefault() para evitar qualquer redirecionamento indesejado que possa acontecer. Em seguida, usamos o event para extrair a consulta de pesquisa por meio de event.target[0].value .

No entanto, se a propriedade event.target[0].value 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 routeChangeSubmit() e passará na consulta de pesquisa.

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 é ainda melhor . Felizmente, desenvolvemos uma estratégia de personalização com facilidade usando Algolia e podemos incorporá-la rapidamente em nossa instância de pesquisa existente!

Para adicionar personalização, precisaremos adicionar dois parâmetros aos nossos componentes Configure (da biblioteca InstantSearch) em nosso App.js , onde todas as nossas configurações de pesquisa estão conectadas. Os dois parâmetros que precisaremos adicionar são:

• enablePersonalization : um booleano que ativará ou desativará os resultados de personalização que ocorrem para a instância do InstantSearch de um usuário.
• userToken : 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 – user-1 .

Navegue até client/src/App.js e inclua os seguintes parâmetros em cada tag <Configure> para cada rota que contém um SearchBar ( / e /results/:query ).

Aqui está um exemplo de como ficaria dentro da rota home ( / ):

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

Com isso adicionado ao componente Configure de cada rota, agora você poderá ver resultados personalizados em cada pesquisa!

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!