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

# Tracking Events with the Saytics JavaScript SDK

> Use the Saytics JavaScript SDK to track page views, user actions, and custom events in your browser-based app. Includes setup and code examples.

The Saytics JavaScript SDK lets you track user behavior directly from the browser. It works with any frontend framework — React, Vue, Angular, or plain JavaScript — and requires no build-tool plugins or additional configuration beyond installation.

## Installation

Install the SDK using your preferred package manager.

```bash theme={null}
npm install @saytics/js
# or
yarn add @saytics/js
```

## Initialization

Initialize the SDK once at the entry point of your application, before any tracking calls are made.

```js theme={null}
import Saytics from '@saytics/js';

Saytics.init('YOUR_WRITE_KEY', {
  debug: false,         // Enable console logging
  autoPageview: true,   // Auto-track page views
});
```

Replace `YOUR_WRITE_KEY` with the write key from your Saytics workspace settings. When `autoPageview` is `true`, the SDK automatically sends a page view event on every navigation change, so you don't need to call `Saytics.page()` manually for standard page loads.

## Core methods

### track(event, properties)

Use `track` to record any action a user takes in your app. The first argument is the event name; the second is an object of properties that describe the action.

```js theme={null}
Saytics.track('Button Clicked', {
  buttonId: 'cta-signup',
  page: '/pricing'
});
```

### page(name, properties)

Use `page` to record a page view when `autoPageview` is disabled, or when you need to attach extra context to a view.

```js theme={null}
Saytics.page('Pricing', {
  referrer: document.referrer
});
```

### identify(userId, traits)

Use `identify` to associate the current user with a known user ID and optional profile traits. Call this after login or sign-up.

```js theme={null}
Saytics.identify('user_123', {
  email: 'user@example.com',
  plan: 'pro'
});
```

### reset()

Use `reset` to clear the anonymous session ID, typically when a user logs out.

```js theme={null}
// Call on logout to clear the anonymous ID
Saytics.reset();
```

## Framework examples

The SDK integrates with any JavaScript framework. The examples below show where to place your tracking calls in the most common setups.

<Tabs>
  <Tab title="React">
    In React, place `Saytics.track` inside a `useEffect` hook to fire tracking calls after a component mounts.

    ```jsx theme={null}
    import { useEffect } from 'react';
    import Saytics from '@saytics/js';

    function PricingPage() {
      useEffect(() => {
        Saytics.track('Page Viewed', {
          page: 'Pricing'
        });
      }, []);

      return <div>Pricing content</div>;
    }
    ```
  </Tab>

  <Tab title="Vue">
    In Vue, use the `mounted` lifecycle hook to fire tracking calls after the component is added to the DOM.

    ```js theme={null}
    import Saytics from '@saytics/js';

    export default {
      mounted() {
        Saytics.track('Page Viewed', {
          page: 'Pricing'
        });
      }
    };
    ```
  </Tab>

  <Tab title="Vanilla JS">
    In plain JavaScript, wrap your tracking calls in a `DOMContentLoaded` listener to ensure the page is ready before the SDK runs.

    ```js theme={null}
    import Saytics from '@saytics/js';

    document.addEventListener('DOMContentLoaded', () => {
      Saytics.track('Page Viewed', {
        page: 'Pricing'
      });
    });
    ```
  </Tab>
</Tabs>

<Note>
  Call `Saytics.reset()` when a user logs out to prevent associating future events with the previous user's profile.
</Note>

## Next steps

* [Identify users and set traits](/tracking/identify)
* [Design and send custom events](/tracking/custom-events)