In my last post, Add Search to Hugo Sites With Azure Search, I explained how I added a search capability to my site using Azure Search. In this post, I’ll show you how I monitor it to see what queries people are running and which result they are clicking on.
Using Azure Application Insights, and the optional PowerBI Content Pack provided by Microsoft, you can get some cool insights into your search implementation. What I’ve done is hook it up so every time search is executed on my site, I track it, as well as which item in the results people clicked on.
Here’s what it looks like in my Azure App Insights instance for my site when I search for all events that start with search/:
The first column shows the results of filtering all custom events that start with search/. Notice there are two types of events: search/execute & search/result_click:
When I select one of these, it shows complete timeline for this user’s session:
From here, I can can see what page they were on but also that they executed a search query and also clicked on one of the results. If I select the search/execute entry, you can see the details of the query:
The notable details from this image are the QueryTerms, what they searched for, and the SearchId. Each search query has an ID that you can lookup later to see what results they got back.
If I select the search/result_click, you can see which item they clicked:
Here you can see the user clicked the 2nd item in the results. You also have the ID of the document as in the search index as well as the ID of the search query. You can use these within the PowerBI report. To learn more about the PowerBI report, select the menu item Search traffic analytics in your Azure Search instance located in the Azure portal.
For the remainder of this post, I’ll show you how I set this up on my site.
I’m going to assume you already have Azure Application Insights setup on your site. If you don’t, that’s the first step.
Next, you need to make some changes to how you execute the query to ask Azure Search to include the ID of the search query in the returned results. You do this by adding a few HTTP headers to the request. Then, when you get the results, fetch the ID of the search query out of the response’s HTTP header and stuff it into a variable an log the custom event to App Insights:
I also modified the search results to add an index to each of the items in the returned result collection. Why? Because I want to track which item in the index someone selected. Let’s say if I get a lot of queries for “SPFx Web Parts” and most people are selecting the 4th item in the results, that tells me I need to make this page more visible in the results and possibly promote it to the top and highlight it on the site.
There are ways with Mustache to get the index of an item in a collection, but I found this to be easier. Looping through 25 items on the page isn’t expensive, so I went with the easier approach.
Next, I need to update how the results are rendered and create a new function that will log a custom event to App Insights on each result click:
Here, I modified the link to the item in the results to call a method
trackSearchClick() and I pass in the document’s ID and index. This is how I’m logging each time someone clicks on a search result.
That’s pretty much it! There’s just one more step to finishing off my search implementation, and that’s to trigger a reindex each time the site is updated. That’s in the next post.comments powered by Disqus