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

# Send click and conversion events with React InstantSearch

> Unlock Algolia's most powerful features by sending click, conversion, and view events from your React InstantSearch app.

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

<Frame>
  <iframe width="644" height="363" src="https://www.youtube.com/embed/UPOc9pIuvk4" title="Add events to an InstantSearch app" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen className="video-embed" />
</Frame>

<Columns>
  <Card title="Open CodeSandbox" icon="codesandbox" href="https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/react-instantsearch/algolia-insights">
    Run and edit the Send click and conversion events with React InstantSearch example in CodeSandbox.
  </Card>

  <Card title="Explore source code" icon="github" href="https://github.com/algolia/doc-code-samples/tree/master/react-instantsearch/algolia-insights">
    Browse the source for the Send click and conversion events with React InstantSearch example on GitHub.
  </Card>
</Columns>

## What are events?

Events are actions that users take on your app or website.
They unlock powerful features, such as recommendations,
personalization, smarter search results,
and analytics that help you optimize your user experience.

For more information, see [Choose how to send events](/doc/guides/sending-events/getting-started).

## How to send events

InstantSearch widgets can automatically send certain events if you enable the [`insights`](/doc/api-reference/widgets/instantsearch/js#param-insights)
option when setting up your app.

For a full guide to implementing events, see [Send events with InstantSearch](/doc/guides/sending-events/instantsearch/send-events).

## Default events

With the `insights` middleware, your InstantSearch widgets send default events.
To check the default events, go to the [**Events Debugger**](https://dashboard.algolia.com/events/debugger).

For more information, see [Validate your events](/doc/guides/sending-events/guides/validate).

### Default `click` events for refinement widgets

The following widgets send `click` events ("Filter Applied") when users select a refinement.
[Custom widgets](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react) using the hooks send the same events.

| Widget                                                                   | Hook                                                                             |
| ------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| [`HierarchicalMenu`](/doc/api-reference/widgets/hierarchical-menu/react) | [`useHierarchicalMenu`](/doc/api-reference/widgets/hierarchical-menu/react#hook) |
| [`Menu`](/doc/api-reference/widgets/menu/react)                          | [`useMenu`](/doc/api-reference/widgets/menu/react#hook)                          |
| [`RefinementList`](/doc/api-reference/widgets/refinement-list/react)     | [`useRefinementList`](/doc/api-reference/widgets/refinement-list/react#hook)     |
| [`ToggleRefinement`](/doc/api-reference/widgets/toggle-refinement/react) | [`useToggleRefinement`](/doc/api-reference/widgets/toggle-refinement/react#hook) |

<Note>
  Numeric refinement widgets don't send `clicked` events as the `clickedFilters` event does not apply to numeric filters.
  This is relevant for [`useNumericMenu`](/doc/api-reference/widgets/numeric-menu/react)-
  and [`useRange`](/doc/api-reference/widgets/range-input/react#hook)-based widgets.
</Note>

### Default view events for results widgets

The following widgets send `view` events ("Hits Viewed") for the visible items in the search results.
[Custom widgets](/doc/guides/building-search-ui/widgets/create-your-own-widgets/react) using the connectors send the same events.

| Widget                                                           | Hook                                                                     |
| ---------------------------------------------------------------- | ------------------------------------------------------------------------ |
| [`Hits`](/doc/api-reference/widgets/hits/react)                  | [`useHits`](/doc/api-reference/widgets/hits/react#hook)                  |
| [`InfiniteHits`](/doc/api-reference/widgets/infinite-hits/react) | [`useInfiniteHits`](/doc/api-reference/widgets/infinite-hits/react#hook) |

### Default click events for results widgets

The following widgets send `click` events ("Hit Clicked") when users click a search result.

| Widget                                                           | Hook                                                                     |
| ---------------------------------------------------------------- | ------------------------------------------------------------------------ |
| [`Hits`](/doc/api-reference/widgets/hits/react)                  | [`useHits`](/doc/api-reference/widgets/hits/react#hook)                  |
| [`InfiniteHits`](/doc/api-reference/widgets/infinite-hits/react) | [`useInfiniteHits`](/doc/api-reference/widgets/infinite-hits/react#hook) |

**Because of technical limitations, the default `click` events aren't sent when using [`useHits`](/doc/api-reference/widgets/hits/react#hook) or [`useInfiniteHits`](/doc/api-reference/widgets/infinite-hits/react#hook).** If you're using hooks, make sure to set up `click` events on them.

```jsx React icon=code theme={"system"}
function CustomHits(props) {
  const { items, sendEvent } = useHits(props); // or `useInfiniteHits`

  return (
    <ul>
      {items.map((item) => (
        <li
          key={item.objectID}
          onClick={() => {
            sendEvent("click", item, "Hit Clicked");
          }}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
}
```