RealanalyticsDocs
Documentation

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 and localStorage), so initialize it in client code.

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

import { createClient } from '@realanalytics/sdk'

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

export function AnalyticsProvider() {
  return null
}

Do not call shutdown() from this singleton component's effect cleanup. React Strict Mode can run a development cleanup while the app still expects the module-level client to remain active. Reserveshutdown() for the real lifetime boundary of a client you intentionally created and own.

// 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,
})

Copy-paste browser script

For sites without a JavaScript build, install the queue before the asynchronous browser bundle:

<script>
  window.realanalytics = window.realanalytics || function () {
    (window.realanalytics.q = window.realanalytics.q || []).push(arguments)
  }
</script>
<script
  async
  src="https://cdn.jsdelivr.net/npm/@realanalytics/sdk@0.1.0/dist/browser.global.js"
  data-public-key="pk_live_xxx"
></script>

Collection remains denied until your consent manager records a decision. The jsDelivr asset fetch is still a third-party CDN request; self-host the published bundle or load it after your CMP decision if your policy disallows that request before consent. See the browser and consent guide for CMP mapping, local verification, and the complete queued API.

Environment variables

FrameworkVariable
Next.jsNEXT_PUBLIC_REALANALYTICS_KEY
ViteVITE_REALANALYTICS_KEY
CRAREACT_APP_REALANALYTICS_KEY

Public key safety

Registered pk_live_ and pk_test_ keys are meant for client-side use. Keep sk_live_ keys server-side only; a pk_test_ browser key still needs an isolated test or staging ingest endpoint.

Next steps