> 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/view.md).

# View

**Views** are one of the most basic **actions** your user can do. **Views** should be sent whenever your customer navigates to a page, whether that's from the navigation menu, a search result, or a product detail page. **View actions** are used within our services in order to track impressions, and product views.

### Impressions vs Views.

When your customer navigates through your website or performs a search, results are displayed and our system tracks this as an impression. If you customer then decides to click on a product, that translates into a view, so then we can ultimately calculate the **view conversion** **rate**.

## Views on Navigation Results

If your website's **navigation** is powered by Fredhopper, you should send a navigation view event whenever your users navigate to a page and a query is made (in case of an infinite scroll implementation you can send multiple events while on the same page). Check the structure of the event below.

```javascript
const viewActionOnNavigationResult = {
    "action":"view",
    "target": {
        "page": "path/to/page"
    },
    "sourceId":"f9caf9db-7549-4498-8c2a-3be977ce48d9",
    "metadata": {
        "locale": "en_GB"
    }
}

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

The properties needed for sending a **view** event on a **navigation** **result** are as follows:

* `action` - you need to specify the action as **view**
* `target.page` - you need to specify the path of your page in your web shop
* `sourceId` - if you are implementing an **FHR** integration, you need to specify `sourceId` 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.

## Views on Search Results

If your website's **search** is powered by Fredhopper, you should send a navigation view event whenever your users navigate to a page. Check the structure of the event below.

```javascript
const viewActionOnSearchResult = {
    "action":"view",
    "target": {
        "page": "path/to/page"
        "search-terms": "trousers"
    },
    "sourceId":"8efbbef2-6640-4c16-b263-1f5a84813a1c",
    "metadata": {
        "locale": "en_GB"
    }
}

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

The properties needed for sending a **view** event on a **search** **result** are as follows:

* `action` - you need to specify the action as **view**
* `target.page` - you need to specify the path of your page in your web shop
* `target.search-terms` - you need to specify the **search terms**. If you are implementing an **FHR** integration they would be available in the **FHR query** response.
* `sourceId` - if you are implementing an **FHR** integration, you need to specify `sourceId` which is equal to the `responseId` you get from the **FHR query** 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.

## Views on products - PDPs powered by FHR

If your Product Detail Pages(PDPs) are powered by Fredhopper, you should send a product view event when your users land on your product details page.

```javascript
const viewActionOnProduct = {
    "action":"view",
    "target": {
        "product":"83647582"
    },
    "sourceId":"6266c5de-6a3c-4299-af78-3fd17dc3e787",
    "metadata": {
        "locale": "en_GB"
    }
}

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

The properties needed for sending a **view** event on a **product** **detail** **page** are as follows:

* `action` - you need to specify the action as **view**
* `target.product` - you need to specify the product id of the product on the page. For an **FHR** integration, this corresponds to the `secondId` **\*\*provided in the** FHR query\*\* response.
* `sourceId`- if you are implementing an **FHR** integration you need to specify a `sourceId` which is equal to the `responseId` you get from the **FHR query** response. If you are implementing an **XO** integration, you need to specify a `sourceId` which corresponds to the `recommendationId`.
* `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.

## Views on products - PDPs *NOT* powered by FHR

If your Product Detail Pages(PDPs) are **not** powered by FHR, you should still send a product view event when your users land on a product detail page.

```javascript
const viewActionOnProduct = {
    "action":"view",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "locale": "en_GB"
    }
}

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

The properties needed for sending a **view** event on a **product** **detail** **page** when not powered by FHR are as follows:

* `action` - you need to specify the action as **view**
* `target.product` - you need to specify the product id of the product on the page. For an **FHR** integration, this corresponds to the `secondId` **\*\*provided in the** FHR query\*\* 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.