Skip to main content

Install on Web and React

Use the Web and React SDKs when events are created in a browser. If you have not created a property yet, start with Create your first property.

Browser JavaScript​

Install the package:

npm install @nexly/web

Initialize the client once when your app starts:

import { Nexly } from '@nexly/web'

const nexly = Nexly.init({
  appId: 'your-app-id',
  key: 'your-ingest-key',
})

nexly.pageview()

React​

Install the React package:

npm install @nexly/react-web

Wrap your app in the provider:

import { NexlyProvider } from '@nexly/react-web'

export function App() {
  return (
    <NexlyProvider appId="your-app-id" ingestKey="your-ingest-key">
      <YourRoutes />
    </NexlyProvider>
  )
}

Send custom events from components:

import { useNexlyClient } from '@nexly/react-web'

export function SignupButton() {
  const client = useNexlyClient()

  return (
    <button
      data-nexly-ignore
      onClick={() => client.customEvent('signup_clicked', { placement: 'hero' })}
    >
      Sign up
    </button>
  )
}

Automatic tracking​

The browser client can track pageviews and engagement such as clicks, scroll depth, visibility, and active time. Add data-nexly-ignore to elements where you send a more specific custom event and do not want the automatic click event as well.

Privacy mode​

Initialize with privacyMode: true (or pass the privacyMode prop to NexlyProvider) and the SDK never reads or writes localStorage for its visitor and session identifiers:

const nexly = Nexly.init({
  appId: 'your-app-id',
  key: 'your-ingest-key',
  privacyMode: true,
})

Events then carry no client-side identifiers. Nexly derives a pseudonymous visit fingerprint server-side from the request IP address and User-Agent; it rotates every 24 hours, and neither input is stored. Visitors, visits, bounce rate, and pageviews keep working within a day — cross-day returning-visitor metrics are not available in this mode.

If your application has its own stable identity (for example a signed-in user), supply it explicitly with setVisitorId() and setSessionId() from @nexly/web; manual identifiers always take precedence. Whether privacy mode changes your notice or consent obligations depends on the laws that apply to your visitors.

Verify the install​

Open your site, navigate a page, and check the property setup page or the events feed. If no event arrives, confirm the allowed origin, credentials, and whether ingestion is paused.