Show Optimizely CMS Search and Navigation Statistics using its own Proxy
This blog post is a demonstration about how to get the Optimizely Search statistics top searched terms displayed in the CMS dashboard and use them in your site for your users to see or use. By default the Search default C# API does not allow you to get these statistics so we had to use a proxy which is already used by the interface above to get the data. So, without further due lets begin.
For this we are only going to add a search view model and a search component to render it. The search model has a property to save the most searched terms that find returns from the search result hit
public class SearchViewModel
{
public string MostSearchedTermsTitle { get; set; }
public List<SearchResultHit> MostSearchedTerms { get; set; }
public string SearchUrl { get; set; }
}
public class SearchResultHit
{
public string Query { get; set; }
public int Count { get; set; }
}
In the component we use the Search URL already required for the engine to work with the CMS and then query /_stats/query/top? to get the statistics that we need. We parse those results and add it to the model of the component and render the view with that data.
public class SearchComponent : ViewComponent
{
private readonly string _findEpiserverUrl;
public SearchComponent(IConfiguration configuration) => _findEpiserverUrl =
configuration["EpiServer:Find:ServiceUrl"] + configuration["EpiServer:Find:DefaultIndex"];
public IViewComponentResult Invoke(SearchViewModel viewModel)
{
using var client = new HttpClient();
viewModel.MostSearchedTerms = new List<SearchResultHit>();
var headerView = "~/Features/Shared/Components/Header/Search.cshtml";
var mostSearchedTermsResult = client.GetAsync(_findEpiserverUrl + "/_stats/query/top?size=6").Result; // Get stats using proxy
if (!mostSearchedTermsResult.IsSuccessStatusCode)
{
return View(headerView, viewModel);
}
var mostSearchedTermsResponse = JObject.Parse(mostSearchedTermsResult.Content.ReadAsStringAsync().Result);
if (!mostSearchedTermsResponse.ContainsKey("hits"))
{
return View(headerView, viewModel);
}
mostSearchedTermsResponse.TryGetValue("hits", out var jToken);
if (jToken is not { HasValues: true })
{
return View(headerView, viewModel);
}
viewModel.MostSearchedTerms = jToken.ToObject<List<SearchResultHit>>();
return View(headerView, viewModel);
}
}
Finally, we add a view to render the results of the model which can be implemented as you want.
model Shared.Components.Header.SearchViewModel
@if (Model == null)
{
return;
}
<h6 id="headerSearchResultsTitle">@Model.MostSearchedTermsTitle</h6>
<div id="headerSearchResults" class="header-search__term-list">
<ul>
@if (Model.MostSearchedTerms is {Count: > 0 })
{
foreach (var termResult in Model.MostSearchedTerms)
{
var searchUrl = Model.SearchUrl + "?q=" + termResult.Query;
<li>
<a href="@searchUrl">@termResult.Query</a>
</li>
}
}
</ul>
</div>
And that is it. You can now use the Search statistics for the top terms searched in your site to your clients. If you have any questions or suggestions please let me know in the comments. I hope this can help someone and as always keep learning !!!
Leave a Reply