Integrate Ours Privacy with Vite + React Router

Step-by-step guide to integrate Ours Privacy with Vite + React Router for tracking page views and custom events while maintaining privacy and HIPAA compliance.

This guide will walk you through integrating Ours Privacy with your Vite + React Router 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.

For a no-code approach, we recommend the Ours Privacy Tag Manager, which provides visual tag management with HIPAA-compliant analytics built in.

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 Vite + React Router 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 Vite + React Router applications.

Key steps:

Install the Ours Privacy SDK: npm install @oursprivacy/cdp-sdk
Create an Analytics Provider component
Add the provider to your app
Add custom event tracking

Example implementation:

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

export function AnalyticsProvider() {
  useEffect(() => {
    // Initialize Ours Privacy on app load
    ours.init('YOUR_SITE_ID', { track_web_events: true });
  }, []);

  return null;
}

// src/App.tsx
import { AnalyticsProvider } from './providers/analytics-provider';

export const App = () => {
  return (
    <>
      <AnalyticsProvider />
      <RouterProvider router={router} />
    </>
  );
};

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

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

Key steps:

Get your snippet from the Ours Privacy Admin Portal
Add the script tag to your index.html
Add custom event tracking

Example implementation:

<!-- index.html -->
<head>
  <!-- Ours Pixel Code -->
  <script>
    // Paste your Ours Privacy initialization snippet here
    // Example:
    // window.ours = window.ours || function(){(window.ours.q=window.ours.q||[]).push(arguments)};
    // ours('init', 'YOUR_SITE_ID', {track_web_events: true});
  </script>
  <!-- End Ours Pixel Code -->
</head>

Tracking Page Views

Route changes are tracked for you. The Web SDK watches history.pushState and the browser's popstate event, so it records a page_view on the initial load and on every client-side route change. You do not need a router listener or a useEffect.

Note: Do not add your own PageView call on route change. It creates a second, redundant event alongside the automatic page_view, which splits your page view reporting across two event names.

Initialize the SDK once when your app starts, then let React Router navigate. For the full picture, including the one routing style that does need extra handling, see Tracking page views in single-page apps.

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

// src/components/track-button.tsx
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

// src/components/track-button.tsx
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>;
}

Example: Tracking Form Submissions

// src/components/contact-form.tsx
import ours from '@oursprivacy/cdp-sdk';

export function ContactForm() {
  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    ours.track('FormSubmit', {
      form_name: 'contact_form',
      form_type: 'contact',
    });

    // Your form submission logic here
  };

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

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

Vite + React Router