> 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/api/more-features/checkout-tracking.md).

# Checkout Tracking

\`ff-checkout-tracking\` sends purchase events from nested \`ff-checkout-tracking-item\` elements. Provide completed-order product data for reliable checkout tracking.

## Documentation

{% 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 %}

When the `ff-checkout-tracking` element is in the page, it sends out checkout tracking requests based on the `ff-checkout-tracking-item` elements defined in its DOM. These elements should be generated server-side after the checkout is completed.

Each product needs its own `ff-checkout-tracking-item` with its respective `product-number`. Various other optional attributes are available.

```html
<ff-checkout-tracking>
    <ff-checkout-tracking-item product-number="10321926" count="5"></ff-checkout-tracking-item>

    <ff-checkout-tracking-item product-number="10321938"
                               count="3"

                               master-id="1032x"
                               price="9.99"
                               title="The Product's Title"

                               campaign="campaign_id"
    ></ff-checkout-tracking-item>

    <ff-checkout-tracking-item product-number="10321943"
                               count="1"

                               channel="OTHER_CHANNEL"
    ></ff-checkout-tracking-item>
</ff-checkout-tracking>
```

## Attributes

`product-number` is strictly required and must always be specified.

All other attributes are optional.

`count` will default to `1` if omitted.

While `master-id`, `price` and `title` are optional, they are still required to create a valid tracking request. If one of these attributes is omitted, Web Components will send a separate request to the `/records` API to fetch the relevant values before sending the tracking request. It is therefore best to always provide these values.

`campaign` can be set when the checked out product was selected through a campaign.

The `channel` attribute specifies the channel to which a tracking request should be sent. You only need to set this attribute if you want the item to be tracked to a different channel than the one configured in the global Web Components configuration.

### Global trackable values

`sid`, `userId` and `purchaserId` are also tracked but these are always taken from the global Web Components configuration. Double-check that you have configured your Web Components application correctly on the checkout page.

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

It is generally not necessary to configure field roles on the checkout page. However, it is good practice to always configure them in order to avoid inconsistent behavior across your website.

If the `ff-checkout-tracking` element detects incomplete data, it will query FactFinder's `/records` API and read the field roles directly from there. Should your client-side integration require a set of field roles different from the one configured in FactFinder, then you will have to ensure these are specified during the Web Components initialization phase.

## API

### `ff-checkout-tracking`

#### Properties

| Name                                                 | Description                                                                           |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------- |
| **disable-auto-tracking** (Boolean) (default: false) | Controls whether the element automatically sends a tracking request when initialized. |

#### Methods

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

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

#### Properties

*(`*` - required)*

| Name                                    | Description                                                        |
| --------------------------------------- | ------------------------------------------------------------------ |
| **product-number**`*` (String)          | The item ID.                                                       |
| **campaign** (String) (default: empty)  | The campaign ID through which the item was selected.               |
| **channel** (String) (default: empty)   | The tracking channel. Uses global configuration when omitted.      |
| **count** (Number) (default: `1`)       | The number of purchased items.                                     |
| **master-id** (String) (default: empty) | The item master ID. If omitted, Web Components queries `/records`. |
| **price** (Number) (default: empty)     | The item price. If omitted, Web Components queries `/records`.     |
| **title** (String) (default: empty)     | The item title. If omitted, Web Components queries `/records`.     |


---

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