Ours Integration with Next.js

This guide will walk you through integrating Ours with your Next.js application. You’ll learn how to install the Ours 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

Install

To integrate Ours with your Next.js application:

Go to the Install Ours page in your Ours account.
Copy the script provided on that page.
Add the script to your pages/_document.js (or _document.tsx for TypeScript) file:
- If you are using the App Router, add the script to the layout file.

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
                 PASTE YOUR INSTALL SCRIPT HERE
               `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Save the file. The script will now be loaded across all pages of your Next.js application.

Tracking Page Views on Route Changes

For single-page applications (SPAs), like those built with Next.js, you should track page views on route changes. Add the following:

import { useRouter } from 'next/router';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = () => {
      ours('track', 'PageView');
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}

export default MyApp;

Track Events

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

Example: Tracking Button Clicks

function HomePage() {
  const handleButtonClick = () => {
    ours('track', 'ButtonClicked');
  };

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

export default HomePage;

Example: Tracking Form Submissions

function ContactForm() {
  const handleFormSubmit = (e) => {
    e.preventDefault();
    ours('track', 'FormSubmit');
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input type="text" name="name" placeholder="Your Name" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default ContactForm;

Why Use Ours for Next.js?

Ours is a great choice for integrating HIPAA-compliant analytics into your Next.js application. It helps you track user interactions while maintaining privacy and security.

Key Benefits:

HIPAA Compliance: Designed for privacy-conscious applications in healthcare and beyond.
Custom Event Flexibility: Easily track specific interactions like form submissions or button clicks.
No IP Exposure: Ours proxies events to ensure user privacy.

If you need further assistance, contact us at [email protected].