Next.js

Install the Ours Privacy Web SDK in your Next.js application, track page views, and log custom events, with analytics built for HIPAA-regulated workflows.

Integration Options

The integration guide below covers using the Ours Privacy Web SDK.

For a no-code approach, we recommend the Ours Privacy Tag Manager, which provides visual tag management built for HIPAA-regulated sites.

Choose the approach that best suits your workflow.

View example repo

Installation Methods

There are two ways to install and initialize Ours Privacy in your Next.js application:

Method 1: NPM Package Installation (Recommended)

This method provides better TypeScript support, more control over the initialization process, and is the recommended approach for most Next.js applications.

For complete implementation details and code examples, see the Next.js integration example repository.

Key steps:

1. Install the Ours Privacy SDK: npm install @oursprivacy/cdp-sdk
2. Create an Analytics Provider component
3. Add the provider to your layout
4. Add custom event tracking

Example implementation:

// components/providers/analytics-provider.tsx
'use client';
import { useEffect } from 'react';
import ours from '@oursprivacy/cdp-sdk';

export function AnalyticsProvider() {
  useEffect(() => {
    ours.init('YOUR_SITE_ID', { track_web_events: true });
  }, []);

  return null;
}

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

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

Method 2: Script Tag Installation (Alternative for simple setups)

This method is suitable for straightforward integrations where you want minimal setup.

For implementation details, see the Next.js integration example repository.

Key steps:

1. Get your snippet from the Ours Privacy dashboard
2. Add the script tag to your layout (App Router or Pages Router)
3. Add custom event tracking

Tracking Events

To track custom events such as button clicks or form submissions, use the ours('track', ...) function within your React components.

Using NPM Package Method

// components/track-button.tsx
'use client';
import ours from '@oursprivacy/cdp-sdk';

export function TrackButton() {
  const handleClick = () => {
    ours.track('ButtonClicked', {
      button_name: 'sign_up',
      page: 'homepage',
    });
  };

  return <button onClick={handleClick}>Sign Up</button>;
}

Using Script Tag Method

// components/track-button.tsx
'use client';

export function TrackButton() {
  const handleClick = () => {
    if (typeof window !== 'undefined' && window.ours) {
      window.ours('track', 'ButtonClicked', {
        button_name: 'sign_up',
        page: 'homepage',
      });
    }
  };

  return <button onClick={handleClick}>Sign Up</button>;
}

Server-Side Tracking

For tracking events from server actions, API routes, or other server-side code, use an Ours Privacy Ingest SDK. This allows you to track events directly from your backend without requiring client-side JavaScript.

Visit the Track Events API reference for complete server-side integration details, including:

• API endpoint: POST https://api.oursprivacy.com/api/v1/track
• Required parameters: Include at least one of userId, externalId, or email
• Supported languages: Node.js, Ruby, PHP, Python, and Shell examples
• Authentication and configuration options

Example: Server Action Tracking

See the Next.js integration example repository for complete implementation details.

Key Points for Tracking

• Client Components Only: All tracking calls must be made from components marked with "use client"
• Import the SDK: Import ours from "@oursprivacy/cdp-sdk" in any component that needs to track events
• Event Names: Use descriptive event names like 'button_click', 'form_submit', 'page_view', etc.
• Properties: Include relevant properties to provide context for your events

If you need further assistance, contact us at support@oursprivacy.com.