> 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/fhr-tracking-plan.md).

# FHR Tracking plan

{% hint style="warning" %}
The following documentation is deprecated, please take a look at our new page: [https://github.com/Attraqt/product-discovery-documentation/blob/main/new-docs/Archive/broken-reference/README.md](https://github.com/Attraqt/product-discovery-documentation/blob/main/new-docs/Archive/broken-reference/README.md "mention")
{% endhint %}

## Prerequisites

In order to be able to send events through the tracker for your XO integration you need to have the following information ready from server side in your front-end application.

**Triggers**

* View Activity (view)
* Add to Cart Activity (add to cart)
* Purchase Activity (buy)
* Click on Recommendation Activity (click on recommendation)

{% hint style="info" %}
Usually the click-on-recommendation trigger is available after the integration of the XO Recommendation API
{% endhint %}

**Variables**

* productid
* quantity
* orderId
* widgetId
* locale
* price
* quantity
* currency

{% hint style="warning" %}
The productId should match the main productId in your catalogue
{% endhint %}

## Views on Navigation Results

If your website's **navigation** is powered by Attraqt's services, 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 Attraqt's services, 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)

If your Product Detail Pages(PDPs) are powered by Attraqt's services, 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.

## Add to Cart

## **Lister page**

When the add to cart comes from **navigation** result page or a **search** result page, rather than from a **product** **detail** **page,** we consider this as adding to cart from a **lister** page. See example:

```javascript
const addToCartAction = {
    "action":"add-to-cart",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "quantity": 1,
        "locale": "en_GB"
    },
    "sourceId": "5f0dfaf1-c79a-47fd-982f-b17de6533cf3" // optional, see below
}
xo.activity.send(addToCartAction);
```

The properties needed for sending an **add to cart** event from a lister page are as follows:

* `action` - you need to specify the action as **add-to-cart**
* `target.product` - you need to specify the product id that is added to cart. If you are implementing an **FHR** integration, this would be equal to the `secondId` available in the **FHR query** response.
* `metadata.quantity` - you need to specify the quantity of the item added in the basket.
* `sourceId` - if you are implementing an **FHR** integration you should send over the **source id** of the page which corresponds to the `responseId` **\*\*from the** FHR query\*\* response.
* `locale` - the locale selected by the user.

Any additional information you wish to send(other than **quantity**) can also be included in the `metadata` \_\*\*\_object.

{% hint style="info" %}
**Important!** Don't forget, you need to send a separate event for every item.
{% endhint %}

## **Product detail page**

When the add to cart comes from a **product detail page**, you should omit the **source id**. See example:

```javascript
const addToCartAction = {
    "action":"add-to-cart",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "quantity": 1,
        "locale": "en_GB"
    }
}
xo.activity.send(addToCartAction);
```

The properties needed for sending an **add to cart** event from a product detail page are as follows:

* `action` - you need to specify the action as **add-to-cart**
* `target.product` - you need to specify the product id that is added to cart. If you are implementing an **FHR** integration, this would be equal to the `secondId` available in the **FHR query** response.
* `metadata.quantity` - you need to specify the quantity of the item added in the basket.
* `locale` - the locale selected by the user.

Any additional information you wish to send(other than **quantity**) can also be included in the `metadata` \_\*\*\_object.

{% content-ref url="/pages/JQ59TsETzqOlIjQ5Q9b9" %}
[Add to Cart](/product-discovery/resources/archived-pages/the-tracking-api-and-js-library/what-to-track/generic-actions/add-to-cart.md)
{% endcontent-ref %}

## Purchase

When your user decides to perform a purchase, you should send a **purchase** action for every item they are purchasing, but you can specify the **quantity** of the item purchased. Purchase events are mostly used to calculate **purchase** conversion rates, and revenues.

```javascript
const purchaseAction = {
    "action":"purchase",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "orderId": "ec1851da-bff2-495c-b757-c162d9a079bd",
        "price": 3250,
        "quantity": 2,
        "currency": "EUR",
        "locale": "en_GB"
    }
}

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

The properties needed for sending a **purchase** event are as follows:

* `action` - you need to specify the action as **purchase**
* `target.product` - you need to specify the product id of the product that is purchased. If you are implementing an **FHR** integration, this would be equal to the `secondId` available in the **FHR query** response.
* `metadata.quantity` - you need to specify the quantity of the item purchased.
* `metadata.price` - you need to specify the price of the product purchased - **in cents** (i.e. no decimal spaces)**.**
* `metadata.currency` - the **currency** of the price, in *\*\**[ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) format.
* `locale` - the locale selected by the user.

Any additional information you wish to send(other than **quantity**, **price,** and **currency**) can also be included in the `metadata` \_\*\*\_object. Typical extra information for purchase events:

* `metadata.orderId` - the **order id** from your system.

{% content-ref url="/pages/QXEZSkU7IjtrA7xs8G4T" %}
[Purchase](/product-discovery/resources/archived-pages/the-tracking-api-and-js-library/what-to-track/generic-actions/purchase.md)
{% endcontent-ref %}

## 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.

<pre class="language-javascript"><code class="lang-javascript">const clickActionOnProduct = {
    "action":"click",
    "target": {
        "product": "83647582"
    },
    "sourceId":"8efbbef2-6640-4c16-b263-1f5a84813a1c",
    "metadata": {
        "locale": "en_GB"
    }
}

<strong>xo.activity.send(clickActionOnProduct);
</strong></code></pre>

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.

##

{% content-ref url="/pages/o8fl0ZBhkVTN0tm0fV8z" %}
[Click](/product-discovery/resources/archived-pages/the-tracking-api-and-js-library/what-to-track/generic-actions/click.md)
{% endcontent-ref %}