> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# analytics

> Sends the current search state to analytics platforms.

export const SearchQuery = () => <Tooltip tip="The text users enter into a search box. In the Search API, this corresponds to the query parameter. A search query is often used with filters, facets, and other parameters, but these aren't part of the query text itself.">
    search query
  </Tooltip>;

<Warning>
  **This widget is deprecated** and only supported in InstantSearch.js versions 1.9 to 4.8.
  Use the [`insights`](/doc/api-reference/widgets/insights/js) middleware instead.
  For details, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/js#analytics-widget).
</Warning>

```ts Signature theme={"system"}
analytics({
  pushFunction: function,
  // Optional parameters
  delay?: number,
  triggerOnUIInteraction?: boolean,
  pushInitialSearch?: boolean,
  pushPagination?: boolean,
});
```

## Import

<CodeGroup>
  ```js Package manager theme={"system"}
  import { analytics } from "instantsearch.js/es/widgets";
  ```

  ```js CDN theme={"system"}
  const { analytics } = instantsearch.widgets;
  // or directly use instantsearch.widgets.analytics()
  ```
</CodeGroup>

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/js/?path=/story/metadata-analytics--default" horizontal>
  Preview this widget and its behavior.
</Card>

## About this widget

The `analytics` widget pushes the current state of the search to the analytics platform of your choice.
It requires the implementation of a function that pushes the data.

This widget doesn't render a UI.

## Examples

### Google Analytics

```js JavaScript icon=code theme={"system"}
analytics({
  pushFunction(formattedParameters, state, results) {
    window.ga("set", "page", window.location.pathname + window.location.search);
    window.ga("send", "pageView");
  },
});
```

### Google Tag Manager

```js JavaScript icon=code theme={"system"}
analytics({
  pushFunction(formattedParameters, state, results) {
    dataLayer.push({
      event: "search",
      "Search query": state.query,
      "Facet parameters": formattedParameters,
      "Number of hits": results.nbHits,
    });
  },
});
```

### Segment.io

```js JavaScript icon=code theme={"system"}
analytics({
  pushFunction(formattedParameters, state, results) {
    analytics.page("[SEGMENT] instantsearch", {
      path: "/instantsearch/?query=" + state.query + "&" + formattedParameters,
    });
  },
});
```

### Kissmetrics

```js JavaScript icon=code theme={"system"}
analytics({
  pushFunction(formattedParameters, state, results) {
    const objParams = JSON.parse(
      '{"' +
        decodeURI(
          formattedParameters.replace(/&/g, '","').replace(/=/g, '":"'),
        ) +
        '"}',
    );
    const arrParams = $.map(objParams, (value, index) => {
      return [value];
    });

    _kmq.push([
      "record",
      "[KM] Viewed Result page",
      {
        Query: state.query,
        "Number of hits": results.nbHits,
        "Search parameters": arrParams,
      },
    ]);
  },
});
```

## Options

<ParamField body="pushFunction" type="function" required>
  A function that is called every time the <SearchQuery /> or refinements changes.
  You need to add the logic to push the data to your analytics platform.

  The function takes three parameters:

  * `formattedParameters`. Contains the search parameters, serialized as a query string.
  * `state`. Contains the whole search state.
  * `results`. The last received results.

  ```js JavaScript icon=code theme={"system"}
  analytics({
    pushFunction(formattedParameters, state, results) {
      // send data to your analytics system
    },
  });
  ```
</ParamField>

<ParamField body="delay" type="number" default={3000}>
  The number of milliseconds between the last search keystroke and calling `pushFunction`.

  ```js JavaScript icon=code theme={"system"}
  analytics({
    // ...
    delay: 5000,
  });
  ```
</ParamField>

<ParamField body="triggerOnUIInteraction" type="boolean">
  Triggers `pushFunction` after click on page or redirecting the page.
  This is useful if you want the `pushFunction` to be called for the last actions before users leaves the current page,
  even if the `delay` wasn't reached.

  ```js JavaScript icon=code theme={"system"}
  analytics({
    // ...
    triggerOnUIInteraction: false,
  });
  ```
</ParamField>

<ParamField body="pushInitialSearch" type="boolean" default={true}>
  Triggers `pushFunction` when InstantSearch is initialized.
  This means the `pushFunction` might be called even though users didn't perfom any search-related action.

  ```js JavaScript icon=code theme={"system"}
  analytics({
    // ...
    pushInitialSearch: true,
  });
  ```
</ParamField>

<ParamField name="pushPagination" type="boolean">
  Triggers `pushFunction` when the page changes, either through the UI or programmatically.

  ```js JavaScript icon=code theme={"system"}
  analytics({
    // ...
    pushPagination: false,
  });
  ```
</ParamField>