@savri/tracker

NPM

Officiellt npm-paket för React, Next.js och vanilla JavaScript. Fullt TypeScript-stöd.

Varför använda npm-paketet?
  • • Fullt TypeScript-stöd med typdefinitioner
  • • Tree-shakable - inkludera bara det du använder
  • • React hooks för sömlös integration
  • • Ingen global window-förorening

Installation

npm install @savri/tracker

Eller med Yarn:

yarn add @savri/tracker

React / Next.js

Wrappa din app med SavriProvider och använd hooks var som helst i komponentträdet.

SavriProvider

Lägg till providern i din root layout för att aktivera tracking i hela appen.

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()

Få tillgång till trackEvent och trackPageview från vilken komponent som helst.

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

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

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

usePageview(url?)

Tracka en sidvisning när en komponent monteras. Användbart för modaler och flikar.

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

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

useTrackEvent(eventName)

Få en memoizerad callback för att tracka ett specifikt 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

För projekt utan React, importera funktionerna direkt.

Initiera och tracka

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' })
})

Konfigurationsalternativ

Anpassa tracking-beteendet med dessa alternativ:

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

Utökad tracking

Aktivera dessa funktioner för att automatiskt tracka vanliga användarinteraktioner:

FunktionBeskrivningEvent som genereras
trackOutboundLinksTracka klick på externa länkarOutbound Link: Click
trackFileDownloadsTracka filnedladdningar (PDF, ZIP, etc.)File Download
trackFormsTracka formulärinskickningarForm Submit
trackScrollDepthTracka scroll-milstolpar (25%, 50%, 75%, 100%)Scroll Depth

TypeScript

Fullt TypeScript-stöd ingår. Importera typer från paketet:

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

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

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

Föredrar du en script-tagg?

Om du hellre inte vill använda npm kan du lägga till vårt tracking-script direkt i din HTML.

Visa script-tagg-guide →
npm packageGitHub