---
title: "Facet click events"
slug: "facet-click-events"
abstract: "Understand facet click events, which track when a site visitor clicks a Sitecore Search facet value in your app."
---
# Facet click events

The facet click event tracks when the site visitor clicks a facet value in your app, on the search results page. For example, when the site visitor narrows down the search results for shoes by clicking the **Blue** value in the *color* facet, the **43** value in the *size* facet, and the **UrbanNomadTrainers** value in the *brand* facet.

You can send facet click events by using the [`widgetFacetClick`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-search/cloud-sdk-search-browser/functions/cloud-sdk-search-browser-widgetfacetclick.html "widgetFacetClick") function and passing it the [facet click event data object](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-search/cloud-sdk-search-browser/interfaces/cloud-sdk-search-widgetfacetclickeventparams.html "WidgetFacetClickEventParams").

## The facet click event data object

The facet click event data object represents all the required and optional data about the event.

This is the object where [you provide data about the event](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking/events/sitecore-search-events/events.html#UUID-b78ff86e-4442-71e7-edc6-81adf8fabe27_section-idm46246153457504340509825241 "The data in the events"). All this data is sent to Sitecore Search, so make sure to provide the correct data depending on your organization's requirements. Construct the object in the following way:

- Provide the ID of the widget[^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N67248fcfc8b58] that was clicked, data about the filter values that were clicked, and the URI where the event triggered.
- Optionally, you can provide data such as the channel and the language of the page where the event triggered.

## Examples

> [!tip]
> During development, use your web browser's developer tools to [check the payload](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking/events/sitecore-search-events/events.html#UUID-b78ff86e-4442-71e7-edc6-81adf8fabe27_section-idm234451877631545 "Checking the payload") containing all the event data that is sent to Sitecore.

Example 11. Sending a facet click event

Here's an example event data object for a facet click event. The object contains all the required and some optional event data. You can send this event by passing the object to the `widgetFacetClick` function:

::::tabs
:::tab{title="Browser module"}

```typescript
import type { WidgetFacetClickEventParams } from "@sitecore-cloudsdk/search/browser";
import { widgetFacetClick } from "@sitecore-cloudsdk/search/browser";

const eventData: WidgetFacetClickEventParams = {
  filters: [
    {
      displayName: "Color",
      facetPosition: 1,
      name: "color",
      title: "Color",
      value: "Blue",
      valuePosition: 2
    }
  ],
  request: {
    keyword: "green",
    numResults: 3,
    totalResults: 3,
    numRequested: 10
  },
  pathname: "/search",
  widgetId: "rfkid_7"
};

widgetFacetClick(eventData);
```

:::
:::tab{title="Server module"}

```typescript
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";
import { CloudSDK } from "@sitecore-cloudsdk/core/server";
import { widgetFacetClick } from "@sitecore-cloudsdk/search/server";
import type { WidgetFacetClickEventParams } from "@sitecore-cloudsdk/search/server";

export default async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Initialize the SDK and the package...

  // Send event:
  const eventData: WidgetFacetClickEventParams = {
    filters: [
      {
        displayName: "Color",
        facetPosition: 1,
        name: "color",
        title: "Color",
        value: "Blue",
        valuePosition: 5
      }
    ],
    request: {
      keyword: "green",
      numResults: 3,
      totalResults: 3,
      numRequested: 10
    },
    pathname: "/search",
    widgetId: "rfkid_7"
  };

  const widgetFacetClickResponse = await widgetFacetClick(request, eventData);
  console.log("Sent widget facet click event.", widgetFacetClickResponse);

  return response;
}
```

:::
::::

For this facet click event data object, the following payload is sent to Sitecore:

```json
{
  "browser_id": "a38b230c-11eb-4cf9-8d5d-274e9f344925​",
  "channel": "WEB",
  "client_key": "",
  "currency": "EUR",
  "language": "EN",
  "page": "search",
  "pos": "",
  "requested_at": "2026-01-13T11:`34:08`.078Z",
  "sc_search": {
    "data": {
      "action_cause": "filter",
      "value": {
        "context": {
          "page": {
            "uri": "/search"
          }
        },
        "filters": [
          {
            "display_name": [
              "Color"
            ],
            "facet_position": 1,
            "name": "color",
            "title": "color",
            "value": [
              "Blue"
            ],
            "value_position": [
              5
            ]
          }
        ],
        "request": {
          "keyword": "green",
          "num_requested": 10,
          "num_results": 3,
          "total_results": 3
        },
        "rfk_id": "rfkid_7"
      }
    },
    "metadata": {
      "ut_api_version": "1.0"
    }
  },
  "type": "SC_SEARCH_WIDGET_CLICK"
}
```

[^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N67248fcfc8b58]: A *widget ID*, also known as the RFK ID, is a unique identifier assigned to every widget in Sitecore Search. Cloud SDK developers use the widget ID when requesting widget data and when capturing *events* that occur in a specific widget.