Recommendations thrive on data – the more you know, the better the recommendations you can make. Algolia’s Recommend product puts your data to work using machine-learning to suggest products or content that will interest your customers. Today, we’re putting a spotlight on Recommend’s new Trends models. You’ll learn about how they work and how they expand the ways that you can use recommendations.

At launch, Recommend offered two initial machine-learning models: Related Products and Frequently Bought Together. Both are collaborative-filtering models, meaning you train them on the products your users click on and purchase as they interact with your website (events data). These models are great for product-centric recommendations. Given a specific product from your catalog, you can use the models to suggest other products that your customers either found similar or also purchased. You can place these recommendations on product detail pages and checkout flows to help your customers discover other products they might be interested in. Separate to what we’ll be discussing in this article, these initial models have just been updated and you can now get started using them right away without events data – learn more here.

Trends models are similarly powered by collaborative-filtering, but are different in that they aren’t restricted to recommendations based on a single product. Instead, they look for product trends across the entire catalog, or within a particular facet/category of your catalog.

Diving into Trends

To use the Recommend models, you’ll need to have your products stored in an Algolia index. Then, you can track trends for either items or facet values across your index. Remember that a facet is an attribute, like “color”, that you have configured in your index for filtering. The possible values for this attribute across your index are called facet values – like “red” or “purple”.

Depending on the type of trend, you will train one of two new models:

• Trending items – The most popular items either for a specific facet value or across the entire catalog.
• Trending facet values – The most popular values for a specific facet (e.g. “sweaters” as a value for “category”).

Both models are trained by collaborative-filtering, meaning they learn trends from events data – specifically conversion events captured from your users. A conversion event could be purchasing an item, adding it to a shopping cart, or marking it as a favorite.

The trending items model looks at both the total number of conversion events for each item over the last few days, and the change in the number of conversion events over time to learn “trendiness” for each record in the index. It then assigns a score to each item in the catalog, either globally or within a particular facet value.

For trending facet values, this model does the same thing for a facet attribute – scoring the total number of conversions and change in conversions over a number of days for each facet value. You can collect trend information on up to three facets per model.

In order to use trends, you’ll need to train the model with at least 500 conversion events spread out over at least three days. Obviously, the more information you send, the better the recommendations the model can provide.

Where to use Trends

Trending items complement the other product-centric models by allowing you to recommend popular items or top sellers within a particular category on your home page before your customers have selected a single product.

Trending facets are great for adding popular categories or product attributes to your homepage that are relevant right now – whether it’s garden supplies in the spring or coats and hats in the fall.

Both models, once trained, can provide up to 30 recommendations, either globally or within a specified facet.

Training your Trends model

Before you can use any of the Recommend models, you’ll need to sign-up for an Algolia account and load your product catalog into an index. You can use an existing Search index or set one up just for Recommend.

Once your index is populated with product records, you’ll need to start sending user event information to Algolia. You can use the event integrations built into Algolia’s InstantSearch front-end libraries, the Algolia Insights API, or supported integrations with major ecommerce platforms and analytics back ends to collect this data. You can even upload your events as a CSV file with the appropriate record format.

Remember, because the Trends models look at changes over time, you’ll need to send conversion events that span multiple days.

The minimum event requirements are:

• 500 conversions in the last 30 days
• Events across a minimum of 3 days (so not 500 conversions in 1 day)
• Events for a minimum of 10 items in your index

You can track your events totals across your application in the Data Sources section of the Dashboard. This section also gives you access to debugging tools for troubleshooting your events.

To start training your model, choose the Trends model from the Recommend Dashboard. Select your product index and Recommend will let you know if you have enough of the required conversion events to start training. If you see an error about retrieving events, you may need to disable your ad-blocking software.

Next, you can select any facets that you want to take into account when training your model. For instance, you could train the model for Trending facet values on the facet category_page_id. You are now ready to click Train Model to start the training process. Training typically takes a few hours to complete.

Add trends to your frontend using the Recommend UI

Once your model is trained, you are ready to start adding Trend recommendations to your application. The easiest way to do this is with the Recommend front end UI libraries for vanilla JavaScript or React.

Let’s say that you want to add trending categories to the Algolia Ecommerce UI Template using your newly trained Trending facet values model. First, you’ll need to add the recommend and recommend-react libraries to your project using npm (or yarn):

npm install --save @algolia/recommend-react @algolia/recommend

Once the libraries are installed, you’ll need to write a new FacetList component to retrieve and display facet recommendations from your trained model. Your component needs to initialize a Recommend client using the App ID and API key from the app that contains your trained model.

const recommendClient = recommend(ALGOLIA_APP_ID, ALGOLIA_SEARCH_ONLY_API_KEY)

Next, add the TrendingFacets widget from the Recommend React library. Since you’re working in the Ecommerce UI, you’ll use the abstracted Container component as a wrapper and handle titles the same way as other components in this library. That means you’ll want to suppress the default header by including headerComponent={() => null}. You can avoid overwhelming your visitors by reducing the list of 30 recommendations to just the top 3 using maxRecommendations={3}.

Here’s the complete FacetList component:

import algoliasearch from 'algoliasearch';
import recommend from '@algolia/recommend'
import { TrendingFacets } from '@algolia/recommend-react'
import classNames from 'classnames'
import { Container } from '@/components/container/container'

const recommendClient = recommend(ALGOLIA_APP_ID, ALGOLIA_SEARCH_ONLY_API_KEY)

export type FacetListProps = {
  title?: string
  indexName: string
  facetName: string
  className?: string
  [index: string]: any
}

export function FacetList({
  indexName,
  facetName,
  title,
  className,
}: FacetListProps) {
  return (
    <section className={classNames('py-4 laptop:py-16', className)}>
      <Container>
        {title && (
          <h2 className="text-sm font-semibold tracking-[2px] uppercase mb-3 laptop:mb-6 laptop:ml-3 laptop:heading-3">
            {title}
          </h2>
        )}
        <TrendingFacets
          recommendClient={recommendClient}
          indexName={indexName}
          maxRecommendations={3}
          itemComponent={({ item }) => <a href={item.facetValue}>{item.facetValue}</a>}
          headerComponent={() => null}
          facetName={facetName}
        />
      </Container>
    </section>
  )
}

Finally, add the finished component after the Banner widget on your index.tsx page:

      <FacetList
        title="Trending Categories"
        indexName="prod_ECOM"
        facetName="category_page_id"
      />

After reloading, you should now see the top trending categories, just below the banner on the home page:

Conclusion

Trends models are a great complement to the existing, (and newly updated), Product models in Recommend. You can combine both types of models to help your customers discover new items during their entire journey on your site – facet value trends on the homepage lead them to trending items on the category page, related products on a product detail page, and finally to items frequently bought together during checkout. At each stage, customers are guided to items that they may have missed through a traditional search.

You can start using Trending items and Trending facet values right now from the Algolia Recommend dashboard. Or, you can read more about the other features that Recommend has to offer.