> For the complete documentation index, see [llms.txt](https://fredhopper.gitbook.io/product-discovery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fredhopper.gitbook.io/product-discovery/resources/archived-pages/the-tracking-api-and-js-library/what-to-track/generic-actions/click.md).

# Click

When your user performs a click on your site, you can register a **click action**. Click actions can be performed on various different things like facets or products, so it's important that you specify them in `target`.

**Click actions** are mainly used in our system to track user interaction with different features of your website, and extract insight from these interactions. Your click actions can have various targets such as a **product** or **facet.**

## Click on a product

If you would like to add a click action when opening a product it can be done in the following way.

```javascript
const clickActionOnProduct = {
    "action":"click",
    "target": {
        "product": "83647582"
    },
    "sourceId":"8efbbef2-6640-4c16-b263-1f5a84813a1c",
    "metadata": {
        "locale": "en_GB"
    }
}

xo.activity.send(clickActionOnProduct);
```

The properties needed for sending a **click** event on a product are as follows:

* `action` - you need to specify the action as **click**
* `target.product` - you need to specify the product id that is the target of the click. If you are implementing an **FHR** integration, this would be equal to the `secondId` available in the **FHR query** response.
* `sourceId` - if you are implementing an **FHR** integration, you need to specify `sourceId` for the page the user is performing the click from which is equal to the `responseId` you get from the FAS response.
* `locale` - the locale selected by the user.

If you have any extra details you wish to send you can include them in the `metadata` \_\*\*\_object.

### Click on a product from a campaign

If the given product is also part of a campaign, you should add the **campaign id** through the **campaign** field in the **target.**

```javascript
const clickActionOnProductFromCampaign = {
    "action":"click",
    "target": {
        "product": "83647582",
        "campaign": "41234266-cf17-4ed3-8423-fbd029a3d7ae"
    },
    "sourceId":"8efbbef2-6640-4c16-b263-1f5a84813a1c",
    "metadata": {
        "locale": "en_GB"
    }
}

xo.activity.send(clickActionOnProductFromCampaign);
```

The properties needed for sending a **click** event on a product are as follows:

* `action` - you need to specify the action as **click**
* `target.product` - you need to specify the product id that is the target of the click. If you are implementing an **FHR** integration, this would be equal to the `secondId` available in the **FHR query** response.
* `target.campaign` - you need to specify the campaign id of the campaign clicked. If you are implementing an **FHR** integration, this is available in the **FHR query** response.
* `sourceId` - if you are implementing an **FHR** integration, you need to specify `sourceId` for the page the user is performing the click from which is equal to the `responseId` you get from the FAS response.
* `locale` - the locale selected by the user.

If you have any extra details you wish to send you can include them in the `metadata` \_\*\*\_object.

## Click on a facet

Click actions can also be recorded on **facets.** You should supply the facet id through the **facet** property(the case below is an example of a click on the **color** facet). You should also supply the value of the facet, by using the facet id as key(**28f909c0-332b-4afd-bd75-1e0e793e1984)** and entering the value(in this case **red**).

```javascript
const clickActionOnFacet = {
  "action": "click",
  "target": {
    "facet": "28f909c0-332b-4afd-bd75-1e0e793e1984",
    "28f909c0-332b-4afd-bd75-1e0e793e1984": "red"
  },
  "sourceId": "8efbbef2-6640-4c16-b263-1f5a84813a1c",
  "metadata": {
    "locale": "en_GB"
  }
}

xo.activity.send(clickActionOnFacet);
```

The properties needed for sending a **click** event on a facet are as follows:

* `action` - you need to specify the action as **click**
* `target.facet` - you need to specify the facet id that is the target of the click. If you are implementing an **FHR** integration, this is available in the **FHR query** response.
* `target.[facet_id]` - you need to specify the **facet** **value**, where you use the **facet** **id** as key.
* `sourceId` - if you are implementing an **FHR** integration, you need to specify `sourceId` for the page the user is performing the click from which is equal to the `responseId` you get from the FAS response.
* `locale` - the locale selected by the user.

If you have any extra details you wish to send you can include them in the `metadata` \_\*\*\_object.

## Click on a recommendation

If you are using the **XO** platform, you also have the ability to perform a click action on recommendations. To do this, you need to include the **recommendation id** as a **source id**, and you can include the **widget id** in metadata.

```javascript
const clickActionOnRecommendation = {
  "action": "click",
  "target": {
    "product": "83647582"
  },
  "sourceId": "be55f177-0306-464b-b086-fded86256a2e", // your recommendation id
  "metadata": {
    "widgetId": "w_25934853"
  }
}

xo.activity.send(clickActionOnRecommendation);
```

The properties needed for sending a **click** event on a recommendation are as follows:

* `action` - you need to specify the action as **click**
* `target.product` - you need to specify the product id that is the target of the click.
* `sourceId` - This would be your `recommendationId` .
* `metadata.widgetId` - the id of the widget serving the recommendation.

If you have any extra details you wish to send you can include them in the `metadata` \_\*\*\_object.