Ours Privacy Integration 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.
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.
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.
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
- Implement page view tracking
- 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 - 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 "@oursprivacy/cdp-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 "@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.
How is this guide?