Ours Privacy Integration with Next.js

This guide will walk you through integrating Ours Privacy with your Next.js application. You'll learn how to install the Ours Privacy tracking script, track page views, and log custom events—all while ensuring HIPAA-compliant analytics for privacy-conscious applications.

Integration Options

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

If you want to use Google Tag Manager instead, you can ignore the code examples and use traditional Google Tag Manager Triggers to fire your events.

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:

Install the Ours Privacy SDK: npm install ours-web-sdk
Create an Analytics Provider component
Add the provider to your layout
Implement page view tracking
Add custom event tracking

Example implementation:

// components/providers/analytics-provider.tsx
"use client";
import { useEffect } from "react";
import ours from "ours-web-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:

Get your snippet from the Ours Privacy Admin Portal
Add the script tag to your layout (App Router or Pages Router)
Implement page view tracking
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 "ours-web-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 the Ours Privacy Server SDK. This allows you to track events directly from your backend without requiring client-side JavaScript.

Visit the Ours Privacy Track Events API documentation 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 "ours-web-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 [email protected].