Extending the Commerce Search Results rendering with analytics
Overview of how to extend the Commerce Search by customizing search events.
The Commerce Search Results rendering is used on the Home page, the Commerce Catalog Category page, and the Commerce Search Results page. When a customer searches for a product, changes the sort order, applies a facet (for example, brand), or removes a facet to display the desired products, it triggers various analytic events to display the desired products. To generate analytics on customer searches, the commerce-specific Facet Applied and Sorting Applied events are triggered. Triggering these events is not part of the standard SXA Search implementation that the commerce search functionality is based on.
With the Commerce Search Results rendering, the rendering JavaScript is contained in the catalog-commerce-search-results.js file that is part of the Basic theme. As part of the JavaScript for the rendering, subscription on internal SXA search events , such as facet-data-filtered and facet-data-partial filtered, is done as shown in the following code.
XA.component.search.vent.on("facet-data-filtered", component.FacetApplied);
XA.component.search.vent.on("facet-data-partial-filtered", component.FacetApplied);In the end, two Connect methods are called when a customer searches for products and sorts results that eventually trigger the events in xDB using xConnect:
-
the ProductSorting method is called when the customer changes the sort order and the event contains information about the selected sort option.
-
the FacetApplied method is called when the customer applies a facet to filter search results and the event contains information about the facet.
When a customer sorts search results and a change is made to the SearchSort component drop-down, a call is made to trigger the relevant Sitecore event.