# JavaScript (Web)

URL: https://pieowl.com/docs/sdks/web





Installation [#installation]

<Steps>
  Step 1: Install [#step-1-install]

  <CodeBlockTabs defaultValue="npm">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="npm">
        npm
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="pnpm">
        pnpm
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="yarn">
        yarn
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="bun">
        bun
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="npm">
      ```bash
      npm install @pieowl/web
      ```
    </CodeBlockTab>

    <CodeBlockTab value="pnpm">
      ```bash
      pnpm add @pieowl/web
      ```
    </CodeBlockTab>

    <CodeBlockTab value="yarn">
      ```bash
      yarn add @pieowl/web
      ```
    </CodeBlockTab>

    <CodeBlockTab value="bun">
      ```bash
      bun add @pieowl/web
      ```
    </CodeBlockTab>
  </CodeBlockTabs>

  Step 2: Initialize [#step-2-initialize]

  ```js title="pieowl.ts"
  import { Pieowl } from '@pieowl/web';

  export const pieowl = new Pieowl({
    clientId: 'YOUR_CLIENT_ID',
  });
  ```

  `clientId` is enough. What the SDK collects by itself (page views, outside link clicks, `data-track` clicks, session replay) is set in **Settings → Site → What Pieowl counts**, not in code.

  Options [#options]

  <CommonSdkConfig />

  <WebSdkConfig />

  Step 3: Usage [#step-3-usage]

  ```js title="main.ts"
  import { pieowl } from './pieowl';

  pieowl.track('my_event', { foo: 'bar' });
  ```
</Steps>

Usage [#usage]

The Web SDK has the same methods as the [JavaScript SDK](/docs/sdks/javascript#usage). It also adds:

* `screenView()` to track a page view by hand
* Session replay, turned on per site in Settings → Site. See [Session replay](/docs/session-replay).
* `allowReplay()` to start session replay once the visitor agrees, when **Record only after visitors agree** is on. See [Consent management](/docs/consent-management#session-replay-only-after-consent).