Installation

Install and initialize the browser SDK

Install the package

# npm
npm install @realanalytics/sdk

# yarn
yarn add @realanalytics/sdk

# pnpm
pnpm add @realanalytics/sdk

# bun
bun add @realanalytics/sdk

Next.js setup

The SDK uses browser APIs (window, localStorage,sessionStorage), so initialize it in client code.

// components/analytics-provider.tsx
'use client'

import { createClient } from '@realanalytics/sdk'
import { useEffect } from 'react'

export const analytics = createClient({
  publicKey: process.env.NEXT_PUBLIC_REALANALYTICS_KEY!,
})

export function AnalyticsProvider() {
  useEffect(() => {
    return () => analytics.shutdown()
  }, [])

  return null
}
// app/layout.tsx
import { AnalyticsProvider } from '@/components/analytics-provider'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <AnalyticsProvider />
      </body>
    </html>
  )
}

React / Vite setup

// src/analytics.ts
import { createClient } from '@realanalytics/sdk'

export const analytics = createClient({
  publicKey: import.meta.env.VITE_REALANALYTICS_KEY,
})

Optional script tag snippet

If you deploy through the CLI, it prints a script-tag snippet for direct HTML usage:

<script
  src="https://cdn.realanalytics.dev/v1.js"
  data-key="pk_live_xxx"
></script>

Environment variables

FrameworkVariable
Next.jsNEXT_PUBLIC_REALANALYTICS_KEY
ViteVITE_REALANALYTICS_KEY
CRAREACT_APP_REALANALYTICS_KEY

Public key safety

Keys beginning with pk_live_ are meant for client-side use. Keep sk_live_ keys server-side only.

Next steps