Cómo implementar Algolia en tu página web

Algolia es un motor de búsqueda muy potente que puede implementarse de manera muy sencilla y rápida en cualquier página web o aplicación móvil. En este artículo encontrarás una guía básica para implementar Algolia de principio a fin.

Si quieres saber más en profundidad te recomendamos ver nuestro post ¿Qué es Algolia? El motor de búsqueda para mejorar tu UX y CRO.

Sin más dilación, vamos a ver cómo implementarlo.

Paso 1: Preparar los datos

Cuando decimos “preparar los datos” nos referimos a que los datos deben seguir unas especificaciones concretas para que el motor de búsqueda pueda procesarlos y también a optimizar los datos para su búsqueda, y así mejorar la velocidad y calidad de la respuesta.

Formato

Algolia funciona exclusivamente con datos en formato JSON.

Los tipos de atributos que se puede utilizar son cadenas (string), números (integer y float), booleanos (true o false), objetos anidados y arrays. No admite, por ejemplo, el formato de fecha (date). Para trabajar con fechas habría que convertirlas a unix timestamp. Un registro podría ser el siguiente ejemplo:

Optimización de los datos

Para esta parte la premisa principal es el lema “Menos es más” como decía el arquitecto Mies van der Rohe. 

No es una buena práctica pasar toda la base de datos del feed de producto a la herramienta. Lo recomendable es hacer una selección de aquellos datos que se consideren relevantes para la búsqueda. Podemos diferenciar varios tipos distintos:

• Searchable attributes: los atributos que pueden ser buscados. Por ejemplo, para un registro de películas estos podrían ser título, actores, género o descripción.
• Filtering/facetting attributes: atributos que van a permitir refinar la búsqueda y conseguir un mejor resultado, como podrían ser el año, género, puntuación o palabras clave.
• Display attributes: atributos que se utilizarán para visualizar los resultados, como por ejemplo la URL que permitirá visualizar una imagen.
• Business metrics attributes: atributos decisivos para que los mejores resultados aparezcan por delante de otros menos relevantes.

Subir los datos a Algolia

El primer paso es configurar el cliente API instalando el paquete algoliasearch. Utilizaremos NPM para este ejemplo, pero puedes utilizar el gestor de paquetes que tú prefieras.

npm install --save algoliasearch

A continuación hay que crear una instancia del cliente con el appID y apiKey de la cuenta que quieras utilizar. Esta información la encontrarás en tu Dashboard de Algolia:

El código para crear la instancia es el siguiente:

const algoliasearch = require ('algoliasearch');
const client = algoliasearch ('PW7Q8HCMTL', '4eadc8f72bc64cbf48d67887005cb3c1');
const index = client.initIndex('test_MOVIES');

Ahora ya podemos subir los registros. Hay varias formas para hacerlo: directamente desde el código fuente, importando un archivo JSON o importando los datos desde la base de datos.

La forma más común de cargar los datos es utilizando un fichero JSON, y sería desde la sección de Indices desplegando el submenú de Upload records y seleccionando Upload file:

Podríamos hacer lo mismo desde código con las siguientes sentencias:

const movies = require("./movie_dataset.json");
index.addObjects(movies);

Después habría que ejecutar en consola el siguiente comando:

node main.js

Paso 2: Definir reglas de relevancia

Por defecto todos los atributos que aparecen en el JSON de feed de producto son “buscables” y eso genera mucho ruido. Así que habrá que definir las reglas de relevancia para mejorar la calidad de la respuesta de las búsquedas que haga el usuario. 

Searcheable Attributes

Son aquellos atributos que se quieren controlar, se excluirían por ejemplo, las URLs de imágenes o la página web asociada al registro. Además podemos ordenar los atributos por relevancia o ponerlos al mismo nivel de importancia si se diera el caso. Por último, también podríamos indicar si el orden en el que se escriben las palabras es relevante para cada atributo o no lo es.

Veamos el siguiente ejemplo:

index.setSettings({
       searchableAttributes:["title, alternative_titles", "unordered(genre)", "actors"]
   });

En el ejemplo anterior estamos indicando que el atributo title y alternative_titles tienen la misma relevancia. El siguiente atributo más importante es genre y por último actors. Además, en genre indicamos que no es relevante el orden que tengas las palabras de atributo utilizando unordered.

Custom ranking attributes

Cuando varios registros tienen exactamente la misma relevancia textual para una consulta dada, se define una clasificación personalizada que provocará el desempate y colocará los resultados más relevantes en primer lugar.

Siguiendo con el mismo ejemplo podríamos definir lo siguiente:

index.setSettings({
       customRanking:["desc(rating)", "desc(year)", "desc(score)"]
   });

En el ejemplo anterior estamos indicando que el desempate se basará en primer lugar en el valor del atributo rating en sentido descendente, en segundo lugar por el atributo year y en tercer lugar por el atributo score. Si queremos que se tengan en cuenta en sentido ascendente solo habría que cambiar desc por asc.

Faceting

Además, se pueden definir una especie de filtros que facilita la búsqueda del usuario. Se definen de la siguiente manera:

index.setSettings({
       'attributesForFaceting': ['genre', 'actors']
   })

Pagination

Podemos definir también el número máximo de resultados que se muestran al usuario por página del siguiente modo:

index.setSettings({
       'maxValuesPerFacet': 1000
   });

Todo esto y muchas más reglas se pueden configurar también desde el Dashboard del proyecto Algolia. En la sección de Indices, si accedes a la pestaña de Configuración podrás configurar de forma completa la búsqueda en función de los intereses comerciales del momento.

Paso 3: Desarrollo de la interfaz del usuario

Hay dos formas fundamentales de visualizar la búsqueda en la web. Dropdown menu que se aconseja cuando el buscador es accesible desde distintas páginas de la web y la más utilizada que es Instant search result page, donde se pasa a una página dedicada en exclusiva a la visualización de resultados. Generalmente, esta última garantiza una mejor experiencia de usuario.

Se puede ver un ejemplo de la primera en la web de noon y un ejemplo de la segunda en la web de Mercadona.

Instant search result page

La página de resultados instantánea es válida para aplicaciones móviles iOS como Android y además para aplicaciones web siendo compatible con Vanilla, React, React Native, Angular y Vue.

Las posibilidades que permite Algolia para desarrollar la parte front del buscador son múltiples y variadas. Encontrarás mucha documentación interesante y sencilla de aplicar en la web oficial de Algolia.

Ejemplo para testear

Para concluir te dejamos aquí un ejemplo de sandbox para que veas lo fácil y rápido que sería montar un proyecto propio:

¿A qué esperas para ponerte a ello? Implementa Algolia y cuéntanos qué te ha parecido en los comentarios.