BlogOptimizely Autocomplete (Statistics)

Optimizely Autocomplete (Statistics)

OptimizelySearchAutocomplete
17 July 2024

This feature is known on almost every major website: a user starts typing in the search input, and it returns suggestions for phrases they might be searching for. But how to achieve this?

Magnifying glass

Building a new search engine or using a paid AI service? No need. If the website is built on Optimizely, it can be done easily.

This is because of the Statistics module in the Search and Navigation (previously known as Episerver Find). Official documentation mentions only the JavaScript method of using it. Still, it is also possible to do it on the backend and create own API endpoint that returns statistics data. To make it work, it is needed to follow two easy steps:

1. When performing an actual search, the .Track() extension method needs to be added so the engine will collect statistics:

_client
	.Search<IContent>(Language.English)
	.For("puppies")
	.StaticallyCacheFor(TimeSpan.FromMinutes(1))
	.Track()
	.GetContentResults();

2. In the place when actual suggestions are returned, Statstics client must be used:

public IEnumerable<string> GetSuggestionsFor(string query)
{
    var result = _statisticsClient.GetAutocomplete(query);
    return result?.Hits?.Select(x => x.Query);
}

That would be it, except for a small detail that can cause frustration if the solution is unknown. Normally, it can be assumed that the statistics client is injected by the Dependency Injection container.

private readonly IStatisticsClient _statisticsClient;
public SearchSuggestionsService(IStatisticsClient statisticsClient)
{
    _statisticsClient = statisticsClient;
}

But this will not work. When running it, it will return an error that the client cannot be resolved, meaning it is not registered in the DI container. Manual registration doesn’t help either, the error will just be different.

To make it work, this must be done:

public SearchSuggestionsService(IClient searchClient)
{
    _statisticsClient = searchClient.Statistics();
}

The search client, used for performing search queries must be injected. The statistics client must be extracted using an extension method.

In the end, it might be worth mentioning how autocomplete works. It doesn't generate phrases out of thin air. It needs data. It collects this data using the Track() method mentioned above, building a source for autocomplete. So, autocomplete is made by users. If they type something in the search, the phrase will be saved and shown to the next user searching for the same term. Simple and clever. Initially, there will be no terms, but over time, the data will build up, and it will return accurate phrases specific to the business domain.

There is also a UI in the Search and Navigation section of the Optimizely edit mode where autocomplete terms can be added manually if needed.

Happy autocompleting! (or anything else with the Statistics module…)

More articles

Colorful lego bricks
.NETOptimizelyWeb DevelopmentDesign Patterns

Global Components Builders

Implementing global common components every site consists of

Have a question?

Don't hesitate, and send me an email

smutek.damian95@gmail.com