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

# Npm Setup Guide

> This guide walks you through setting up the PlayerZero SDK using npm to start monitoring and improving your frontend applications.

## Prerequisites

* Node.js and npm or yarn installed.
* Access to your project’s frontend codebase.
* Your PlayerZero [API Key](https://playerzero.ai/current-org/settings/projects/current-project/api-tokens).

## Step-by-Step Instructions

### 1. Install the SDK

```bash npm theme={null}
npm i @goplayerzero/sdk-web --save
```

```bash yarn theme={null}
yarn add @goplayerzero/sdk-web
```

### 2. Initialize the SDK

Insert this early in your application’s entry point (e.g., index.js, main.ts, App.vue, etc.):

```javascript theme={null}
import PlayerZero from "@goplayerzero/sdk-web";
PlayerZero.init("your project id here");
```

**Important:** PlayerZero.init should only be called once.
Use PlayerZero.isInitialized() to check if initialization has occurred.

### 3. Identify the User (Recommended)

Once the user is authenticated or known: The authentication logic of your application will want to invoke the following logic appropriately at the point your application has identified the user.

```javascript theme={null}
PlayerZero.identify("user-id", {
  name: "Jane Doe",
  email: "jane@example.com",
  group: "Engineering",
});
```

***

### Example Implementations

#### Single Page Application (SPA) Setup

Once PlayerZero has been initialized, the below snippet demonstrates how to call the playerzero.identify method and capture user details in PlayerZero.

```javascript theme={null}
const userId = "userId";
const metadata = {
  name: "<DISPLAY_NAME>",
  email: "<USER_EMAIL>",
  group: "<CUSTOMER_ID_OR_OTHER_GROUP>", // Optional
};

if (window.playerzero) {
  window.playerzero.identify(userId, metadata);
} else {
  window.addEventListener(
    "playerzero_ready",
    () => { window.playerzero.identify(userId, metadata) },
    { once: true }
  );
}
```

#### Server Side Rendered (SSR) Setup

Once PlayerZero has been initialized, the below snippet demonstrates how to call the playerzero.identify method and capture user details in PlayerZero.

```javascript theme={null}
const userId = "<USER_ID>";
const metadata = {
  name: "<USER_NAME>",
  email: "<USER_EMAIL>",
  group: "<GROUP>", // optional
};

const setCookie = (traceId) => {
  document.cookie = `pz-traceid=${traceId}; Path=/;`;
};

if (window.playerzero) {
  // PlayerZero has loaded
  window.playerzero.identify(userId, metadata);
  window.playerzero.onTraceChange(setCookie);
} else {
  // Wait for PlayerZero to load
  window.addEventListener(
    "playerzero_ready",
    () => {
      window.playerzero.identify(userId, metadata);
      window.playerzero.onTraceChange(setCookie);
    },
    { once: true }
  );
}
```

## Next Steps

Once the SDK is installed and initialized, you can visit the [Users page](https://playerzero.ai/current-org/current-project/users) in PlayerZero to see live user sessions being captured.

If you want to control where PlayerZero is active, visit the [Domain Settings](/developer-guide/configuration-guides/capturing-user-sessions/domain-settings) guide to configure domain-level access and environment-specific behavior.

Want to extend your integration further? Explore the [Advanced SDK Usage](/developer-guide/configuration-guides/capturing-user-sessions/advanced-usage) guide to unlock features like custom event tracking, devtools links, and user metadata enhancements.