How to push search results to dataLayer using <InstantSearch /> in react

Using < InstantSearch /> component how would I get the results of the search query? I would like to push the results to the window.dataLayer as well
Using “react-instantsearch-dom”: “6.2.0”,

For an example:

<InstantSearch
        searchClient={useAlgoliaClient}
        indexName={Algolia.areasIndex.value}
        onSearchStateChange={(searchState) => {
          console.log(searchState);
          // The data I have:
            // event: "searchQuery",
            // searchTerm: "something",
            // searchPage is always 1 because it's limited to 5 results for: Areas, Cities,Golf courses
          window.dataLayer.push({
            event: "searchQuery",
            searchTerm: searchState.query
          });
        }}
        
      >
.... /<InstantSearch />

Hi @tarik_besic

The searchState reflects the state of the search UI (inputs) not the search results. The results are reflected in the Hits component. You could access the results by building a connector or via a hook (depending on the flavor of InstantSearch you are using).

You can then access the result set directly and render it how you choose.

1 Like

Just following up because I realized with InstantSearch React Hooks you can also retrieve the results from within the IntantSearch object as results: