@savri/tracker

NPM

Official npm package for React, Next.js, and vanilla JavaScript. Full TypeScript support.

Why use the npm package?

• Full TypeScript support with type definitions
• Tree-shakable - only include what you use
• React hooks for seamless integration
• No global window object pollution

Installation

npm install @savri/tracker

Or with Yarn:

yarn add @savri/tracker

React / Next.js

Wrap your app with SavriProvider and use hooks anywhere in your component tree.

SavriProvider

Add the provider to your root layout to enable tracking throughout your app.

app/layout.tsx

import { SavriProvider } from '@savri/tracker/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <SavriProvider siteId="your-site-id">
          {children}
        </SavriProvider>
      </body>
    </html>
  )
}

useTracker()

Access trackEvent and trackPageview from any component.

import { useTracker } from '@savri/tracker/react'

function SignupButton() {
  const { trackEvent } = useTracker()

  return (
    <button onClick={() => trackEvent('Signup Click', { plan: 'pro' })}>
      Sign Up
    </button>
  )
}

usePageview(url?)

Track a pageview when a component mounts. Useful for modals and tabs.

import { usePageview } from '@savri/tracker/react'

function SignupModal() {
  usePageview('/modal/signup')
  return <div>...</div>
}

useTrackEvent(eventName)

Get a memoized callback for tracking a specific event.

import { useTrackEvent } from '@savri/tracker/react'

function CTAButton() {
  const trackClick = useTrackEvent('CTA Click')

  return (
    <button onClick={() => trackClick({ variant: 'blue' })}>
      Click me
    </button>
  )
}

Vanilla JavaScript

For non-React projects, import the functions directly.

Initialize and track

import { init, trackEvent } from '@savri/tracker'

// Initialize once on page load
init({ siteId: 'your-site-id' })

// Track events anywhere
document.getElementById('signup-btn').addEventListener('click', () => {
  trackEvent('Signup Click', { plan: 'pro' })
})

Configuration options

Customize tracking behavior with these options:

<SavriProvider
  siteId="your-site-id"          // Required
  apiUrl="https://savri.io"      // Optional, defaults to savri.io
  trackOutboundLinks             // Track external link clicks
  trackFileDownloads             // Track file downloads
  trackForms                     // Track form submissions
  trackScrollDepth               // Track scroll milestones
  debug                          // Log tracking calls to console
>
  <App />
</SavriProvider>

Enhanced tracking

Enable these features to automatically track common user interactions:

Feature	Description	Event generated
`trackOutboundLinks`	Track clicks on external links	Outbound Link: Click
`trackFileDownloads`	Track file downloads (PDF, ZIP, etc.)	File Download
`trackForms`	Track form submissions	Form Submit
`trackScrollDepth`	Track scroll milestones (25%, 50%, 75%, 100%)	Scroll Depth

TypeScript

Full TypeScript support is included. Import types from the package:

import type { SavriConfig, EventProps } from '@savri/tracker'

const config: SavriConfig = {
  siteId: 'your-site-id',
  trackOutboundLinks: true,
}

const props: EventProps = {
  productId: 'abc123',
  price: 99.99,
}

Prefer a script tag?

If you prefer not to use npm, you can add our tracking script directly to your HTML.

View script tag guide →

npm package GitHub