Tracking Events with the Saytics JavaScript SDK

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.

React
Vue
Vanilla JS

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>;
}

In Vue, use the mounted lifecycle hook to fire tracking calls after the component is added to the DOM.

import Saytics from '@saytics/js';

export default {
  mounted() {
    Saytics.track('Page Viewed', {
      page: 'Pricing'
    });
  }
};

In plain JavaScript, wrap your tracking calls in a DOMContentLoaded listener to ensure the page is ready before the SDK runs.

import Saytics from '@saytics/js';

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

Call Saytics.reset() when a user logs out to prevent associating future events with the previous user’s profile.

Get Started

Core Concepts

Tracking

Integrations

Account

Tracking Events with the Saytics JavaScript SDK

Installation

Initialization

Core methods

track(event, properties)

page(name, properties)

identify(userId, traits)

reset()

Framework examples

Next steps

​Installation

​Initialization

​Core methods

​track(event, properties)

​page(name, properties)

​identify(userId, traits)

​reset()

​Framework examples

​Next steps

Installation

Initialization

Core methods

track(event, properties)

page(name, properties)

identify(userId, traits)

reset()

Framework examples

Next steps