> ## Documentation Index
> Fetch the complete documentation index at: https://docs.khaime.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Store Pulse for API integrations

> Track visitors, traffic and your checkout funnel on a site you built with the Khaime API

Store Pulse is the analytics page in your Khaime dashboard: revenue, visitors, traffic sources, top countries, product performance, live visitors and your checkout funnel.

If Khaime hosts your store, all of this works automatically. If you built your own site on the Khaime API, here is what you get and how to turn on the rest.

## What works without any setup

Every payment you take through Khaime is already counted:

* Revenue and orders, in each currency you are paid in
* The revenue timeline
* Checkouts Khaime priced (`/cart/validate`), payments started, and paid orders

Visitors, traffic sources, countries, product views and the steps before checkout happen on your site, so Khaime needs its tracker there to see them.

## Turn on visitor tracking

<Steps>
  <Step title="Get your tracking key on your server">
    Call `getKhaimeTracking` with your API key. The first call turns tracking on for your business; later calls return the same key. Your API key must stay on the server. The tracking key it returns is safe to put in the page.

    ```tsx app/layout.tsx theme={null}
    import { KhaimeAnalytics } from '@khaime/react';
    import { getKhaimeTracking } from '@khaime/react/server';

    export default async function RootLayout({ children }) {
      const tracking = await getKhaimeTracking({
        apiKey: process.env.KHAIME_API_KEY!,
        // Next.js: cache the key instead of fetching it on every request
        fetchOptions: { next: { revalidate: 3600 } },
      });

      return (
        <html lang="en">
          <body>
            {children}
            {tracking?.tracking_key && (
              <KhaimeAnalytics
                trackingKey={tracking.tracking_key}
                scriptUrl={tracking.script_url}
                apiBase={tracking.api_base}
              />
            )}
          </body>
        </html>
      );
    }
    ```

    Not using React? Call `GET /api/v1/analytics/tracking` with your `X-API-Key` header and load `script_url` with `window.KhaimeCA = { key: tracking_key, apiBase: api_base }` set first.
  </Step>

  <Step title="Pass the visitor to Khaime at checkout">
    This is what joins a visit to the cart, payment and order it led to. Read the ids in the browser and send them to your server with your checkout request:

    ```tsx theme={null}
    import { withKhaimeVisitor } from '@khaime/react';

    await fetch('/api/checkout', {
      method: 'POST',
      body: JSON.stringify(withKhaimeVisitor({ items, shipping })),
    });
    ```

    Then forward them on your Khaime calls as headers:

    ```ts theme={null}
    await fetch(`${KHAIME_API}/cart/validate`, {
      method: 'POST',
      headers: {
        'X-API-Key': process.env.KHAIME_API_KEY!,
        'X-CA-Visitor': body.visitor_id,
        'X-CA-Session': body.session_id,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(cart),
    });
    ```

    Send the same headers on `/product-payment/intent` or `/payment/intent`.
  </Step>

  <Step title="Review your funnel in Store Pulse">
    Once visits arrive, Store Pulse shows **Tracking is live on your site** and suggests your checkout funnel from what it saw: the pages where products were viewed, the buttons shoppers used to add to cart, and the checkouts and payments Khaime recorded. Open **Review funnel** to:

    * Rename, reorder, add or remove steps
    * Point a step at a page pattern (`/shop/:id`, `/checkout`) or an event, optionally a click on a button containing some text
    * Tick the domains your site runs on

    **Confirm** saves the funnel and locks tracking to those domains. Edits later apply to past visits too.
  </Step>
</Steps>

## Report actions yourself (optional)

By default the tracker recognises product pages and "Add to cart" or "Checkout" buttons from the page. If your site is built differently, report actions explicitly and set `autoDetectCommerce={false}` so nothing is counted twice:

```tsx theme={null}
import { trackKhaimeEvent } from '@khaime/react';

trackKhaimeEvent('product_view', { product_id: 2397 });
trackKhaimeEvent('add_to_cart', { product_id: 2397, cart_value_cents: 2500000 });
trackKhaimeEvent('checkout_start');
```

Use Khaime product ids so Store Pulse can show product performance.

## How the funnel is measured

| Step                                           | Measured by                    |
| ---------------------------------------------- | ------------------------------ |
| Visits, page views, product views, add to cart | Your site, through the tracker |
| Reached checkout (Khaime priced the cart)      | Khaime                         |
| Payment started                                | Khaime                         |
| Bought                                         | Khaime                         |

Steps measured by Khaime can be renamed but not remapped, so revenue and conversion always match your payments. A step that needs your site shows **Not tracked** until your site reports it, instead of a misleading zero.

## Privacy

The tracker stores a random visitor id in the browser and records page views, product views and the text of buttons and links shoppers click. It never records what shoppers type into forms. Mention Khaime analytics in your privacy notice, and pass `disabled` to `<KhaimeAnalytics />` until a visitor consents if your site requires it.

## Reference

<ParamField path="trackingKey" type="string" required>
  From `getKhaimeTracking()`. Tracking does nothing without it.
</ParamField>

<ParamField path="scriptUrl" type="string">
  From `getKhaimeTracking()`. Defaults to Khaime's production tracker.
</ParamField>

<ParamField path="apiBase" type="string">
  From `getKhaimeTracking()`.
</ParamField>

<ParamField path="autoDetectCommerce" type="boolean" default="true">
  Recognise product views and add to cart / checkout clicks from the page. Turn off if you call `trackKhaimeEvent` yourself.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  Load nothing while true, for example before cookie consent.
</ParamField>
