Google Analytics

The Analytics widget of the InstantSearch.js library handles the Google Analytics feature of the extension. The widget sends all searches to analytics tools, such as Google Analytics, Segment.io, or Kissmetrics.

The analytics feature only works on the InstantSearch page, not in the autocomplete menu.

Configuration

The Analytics feature has three variables that you can configure.

Delay

The delay in milliseconds. Each keystroke in the search box triggers a search in Algolia. This gives users a search-as-you-type experience. Sending every keystroke’s query to the analytics service would generate a lot of unnecessary data and noise. The delay setting defines how long the widget should wait between keystrokes before pushing data to the analytics service. Only the last search after this delay is sent to the analytics service.

Push before delay on UI interaction

If the delay is too high, a user might click a result before the delay finishes. This could prevent the search event from being sent to the analytics service. When this setting is true, the search event is sent to the analytics service, even if it occurred within the delay parameter set.

Push after initial search

If users land on the search page directly from a shared URL, the search is automatically triggered without any user interaction. At the same time, the load of the page triggers the default Google Analytics code for a page view. This setting specifies whether to send a search event in such non-interactive search scenarios.

Push function

The analytics widget calls the push function whenever it sends data to an analytics service. If Google Analytics is enabled in Magento, the widget automatically configures the push function to send data to Google Analytics. You can configure Magento’s Google Analytics settings under Stores > Configuration > Sales > Google API > Google Analytics.

Screenshot of Google Analytics settings: 'Enable' set to 'Yes', 'Account Number' as 'UA-12345678-1', and 'Enable Content Experiments' set to 'No'.

Each search is tracked as a page view in Google Analytics. The URL of the page view has the following format: /catalogsearch/result/?q=[[search_term]]&[[selected_filters]]&numberOfHits=[[number_of_results]]

You can find the code for the push function on GitHub.

Other analytics services

If you need to send data to analytics services other than Google Analytics, you need to write a custom push function. To do this, define a algoliaAnalyticsPushFunction variable, and assign the custom function to it. The widget automatically calls the custom function.

Examples

JavaScript

const algoliaAnalyticsPushFunction = (
  formattedParameters,
  { query },
  { nbHits },
) => {
  // Google Analytics
  window.ga(
    "set",
    "page",
    `/search/query/?query=${query}&${formattedParameters}&numberOfHits=${nbHits}`,
  );
  window.ga("send", "pageView");

  // GTM
  dataLayer.push({
    event: "search",
    "Search Query": query,
    "Facet Parameters": formattedParameters,
    "Number of Hits": nbHits,
  });

  // Segment.io
  analytics.page("[SEGMENT] instantsearch", {
    path: `/instantsearch/?query=${query}&${formattedParameters}`,
  });

  // KissMetrics
  const objParams = JSON.parse(
    `{"${decodeURI(formattedParameters.replace(/&/g, '","').replace(/=/g, '":"'))}"}`,
  );
  const arrParams = $.map(objParams, (value, index) => [value]);
  _kmq.push([
    "record",
    "[KM] Viewed Result page",
    {
      Query: query,
      "Number of Hits": nbHits,
      "Search Params": arrParams,
    },
  ]);

  // Or any other service
};

​Configuration

​Delay

​Push before delay on UI interaction

​Push after initial search

​Push function

​Other analytics services

​Examples

Configuration

Delay

Push before delay on UI interaction

Push after initial search

Push function

Other analytics services

Examples