Ours Privacy Integration with Vite + React Router

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.

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 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 ours-web-sdk
Create an Analytics Provider component
Add the provider to your app
Implement page view tracking
Add custom event tracking

Example implementation:

// src/providers/analytics-provider.tsx
import { useEffect } from "react";
import ours from "ours-web-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
Implement page view tracking
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

For single-page applications (SPAs) like Vite + React Router, you need to track page views on route changes.

Using NPM Package Method

// src/components/page-view-tracker.tsx
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import ours from "ours-web-sdk";

export function PageViewTracker() {
  const location = useLocation();

  useEffect(() => {
    // Track page view on route change
    ours.track("PageView", {
      path: location.pathname,
      search: location.search,
    });
  }, [location.pathname, location.search]);

  return null;
}

Add this to your App component:

// src/App.tsx
import { PageViewTracker } from "./components/page-view-tracker";

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

Using Script Tag Method

// src/components/page-view-tracker.tsx
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export function PageViewTracker() {
  const location = useLocation();

  useEffect(() => {
    // Track page view on route change
    if (typeof window !== "undefined" && window.ours) {
      window.ours("track", "PageView", {
        path: location.pathname,
        search: location.search,
      });
    }
  }, [location.pathname, location.search]);

  return null;
}

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 "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

// 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 "ours-web-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 [email protected].