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

# Set up DPC

> Install, import and initialise the Depict Performance Client once, then send events from anywhere in your app.

DPC (Depict Performance Client) is the small browser library that sends tracking events to Depict. Set it up once; the event pages that follow assume `dpc` is initialised.

## Install

Add the dependency to your project:

<CodeGroup>
  ```shell NPM theme={null}
  npm i @depict-ai/dpc
  ```

  ```shell Yarn theme={null}
  yarn add @depict-ai/dpc
  ```
</CodeGroup>

If you don't use a module bundler, skip this step and load DPC from a CDN in the next one.

## Import

Add the import at the top of the file where you initialise DPC:

<CodeGroup>
  ```ts ESM theme={null}
  import { DPC } from "@depict-ai/dpc";
  ```

  ```ts CommonJS theme={null}
  const { DPC } = require("@depict-ai/dpc");
  ```

  ```html Not using a module bundler theme={null}
  <script type="module">
      import { DPC } from "https://esm.run/@depict-ai/dpc@2/ES10";
      // Initialise DPC here (see below)
  </script>
  ```
</CodeGroup>

## Initialise

Execute this once in your application, with your merchant id and the market the visitor is browsing:

```ts theme={null}
import { DPC } from "@depict-ai/dpc";

const dpc = new DPC("{merchant_id}", { market: "market" })
```

Both values are case-sensitive; merchant ids are always lowercase. Once DPC is initialised, the `dpq` global for sending events imperatively is also available. See the [DPC reference](/reference/performance-client/performance-client) for more information.

### Merchant and market ids

<Note>
  Your **merchant id** is the first path segment after `/v2` in the portal URL:
  when you're logged in at [app.depict.ai](https://app.depict.ai) the address
  looks like `app.depict.ai/v2/your-merchant-id/dashboard`. It's always
  lowercase.
</Note>

<Note>
  Your **market ids** are set up together with your data ingestion and appear
  in the market filters throughout the portal (for example on the Analytics
  page). Use them exactly as written there — they are case-sensitive. If in
  doubt, ask your Depict contact.
</Note>

<Warning>
  **Consent management:** DPC stores a single random visitor identifier in
  `localStorage` under the key `_dep_id` (with a cookie fallback of the same
  name) and starts sending events as soon as it is initialised — it has no
  built-in consent gating. If your consent policy requires it, only initialise
  DPC after the visitor has consented to performance/analytics tracking.
</Warning>