> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./api/more-features/checkout-tracking.md).

# Checkout Tracking

Track completed purchases with checkout items and configured field roles.

{% hint style="warning" %}
Checkout tracking is best implemented on the server. Only the server can reliably detect the checkout event and track its exact details.

To implement checkout tracking on the client-side relies on a correctly behaving client. However, the network response may fail, or users may close the checkout page early. Clients are also able to replicate and therefore manipulate checkout tracking events.

**Generally, we recommend the server-side implementation of checkout tracking.**
{% endhint %}

The `ff-checkout-tracking` element sends a checkout tracking request for each `ff-checkout-tracking-item` in its DOM. Generate these elements server-side after checkout completes. Each product needs its own item with `record-id`.

Optionally provide `count`, `price`, and `channel`:

* `count` is the number of purchased items. It defaults to `1`.
* `price` is the item price. When absent, it is inferred from the clicked item and configured field roles.
* `channel` selects the tracking channel. When absent, the `ff-communication` default applies.

```html
<ff-checkout-tracking>
    <ff-checkout-tracking-item record-id="10321926" count="5" channel="NEW_CHANNEL"></ff-checkout-tracking-item>
    <ff-checkout-tracking-item record-id="10321938" count="3" price="9.99"></ff-checkout-tracking-item>
    <ff-checkout-tracking-item record-id="10321943" count="1"></ff-checkout-tracking-item>
</ff-checkout-tracking>
```

## Documentation

### Disable auto-tracking

The tracking requests are sent immediately after the element has finished initializing. You can disable this behavior by setting the property `disable-auto-tracking` like so:

```html
<ff-checkout-tracking disable-auto-tracking>
    ...
</ff-checkout-tracking>
```

This enables you to manipulate the `ff-checkout-tracking-item` child elements on the client-side. Consequentially, you will have to manually invoke `ff-checkout-tracking`'s `trackCheckoutItems()` function through JavaScript.

```js
const trackingElement = document.querySelector(`ff-checkout-tracking`);

// Manipulate child elements here.

trackingElement.trackCheckoutItems();
```

### Field roles

{% hint style="warning" %}
Setting field roles is required. Checkout pages typically do not issue a search before tracking. Web Components therefore does not know the field role configuration.
{% endhint %}

Set `fieldRoles` manually so `ff-checkout-tracking` resolves the correct fields:

```html
<script>
document.addEventListener("ffReady", function (event) {
    const factfinder = event.factfinder;
    factfinder.communication.fieldRoles = {
        brand: "BrandFieldName",
        campaignProductNumber: "SomeIDField",
        deeplink: "DeeplinkField",
        description: "DescriptionField",
        displayProductNumber: "SomeIDField",
        ean: "TheEanField",
        imageUrl: "ImageUrlField",
        masterArticleNumber: "MasterArticleNumberField",
        price: "PriceField",
        productName: "NameField",
        trackingProductNumber: "SomeIdField"
    };
});
</script>
```

Replace the example values with your field names. Retrieve the configuration by running a search on a page using FactFinder Web Components. Then open browser DevTools and run:

```javascript
factfinder.communication.fieldRoles
```

{% hint style="info" %}
`ff-checkout-tracking` requires FactFinder's Record API. It does not work without Record API support.
{% endhint %}

## API code

### `ff-checkout-tracking`

**Properties**

<details>

<summary>Properties</summary>

| Name                                                 | Description                                                               |
| ---------------------------------------------------- | ------------------------------------------------------------------------- |
| **disable-auto-tracking** (Boolean) (default: false) | Controls whether the element sends a tracking request upon its rendering. |

</details>

**Methods**

<details>

<summary>Methods</summary>

| Name                     | Description                                                                                |
| ------------------------ | ------------------------------------------------------------------------------------------ |
| **trackCheckoutItems()** | Dispatches a tracking checkout event for each of its `ff-checkout-tracking-item` children. |

</details>

### `ff-checkout-tracking-item`

**Properties**

<details>

<summary>Properties</summary>

| Name                                    | Description                                                                                                           |
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **record-id** (String) (default: empty) | The item's ID used for tracking in FactFinder.                                                                        |
| **count** (String) (default: "1")       | Number of pieces of this item that were bought.                                                                       |
| **price** (String)                      | Price of the item bought. If omitted, it will be inferred from the clicked item and the configured fieldRoles.        |
| **channel** (String)                    | Channel used to send a tracking request. If omitted, the default value configured in `ff-communication` will be used. |

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./api/more-features/checkout-tracking.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.