Skip to main content
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.
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.
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.
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.
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.
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.
// 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.
In React, place Saytics.track inside a useEffect hook to fire tracking calls after a component mounts.
import { useEffect } from 'react';
import Saytics from '@saytics/js';

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

  return <div>Pricing content</div>;
}
Call Saytics.reset() when a user logs out to prevent associating future events with the previous user’s profile.

Next steps