Ours Integration with Vite + React Router

This guide walks you through integrating Ours with your Vite + React Router 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 Vite + React Router application, follow these steps:

Install the Ours Pixel:
- Go to the Install Ours page in your Ours account.
- Copy the installation script provided.
Add the Script toindex.html :
- In your Vite project, open index.html
- Paste the script into the <head> section:

<!-- Ours Pixel Code -->
<script>
  // script copied from ours here
</script>

Save the file to ensure the Ours pixel is loaded on every page.

Tracking Page Views

React Router handles client-side navigation, which means you need to manually track page views when the route changes. Add the following to your App.jsx (or App.tsx for TypeScript):

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    ours('track', 'PageView', { path: location.pathname });
  }, [location.pathname]);

  return <Routes>{/* Your routes here */}</Routes>;
}

export default App;

This ensures that every route change triggers a PageView event in Ours.

Track Events

To track custom events like button clicks or form submissions, use the ours('track', ...) function within your components.

Example: Tracking Button Clicks

function HomePage() {
  const handleButtonClick = () => {
    ours('track', 'ButtonClicked', { label: 'Sign Up Button' });
  };

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

export default HomePage;

Example: Tracking Form Submissions

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

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

export default ContactForm;

Why Use Ours with Vite + React Router?

Ours is an ideal analytics solution for Vite and React Router applications. It simplifies tracking while maintaining privacy and security.

Key Benefits:

HIPAA Compliance: Perfect for healthcare and privacy-focused industries.
Customizable Tracking: Track page views, custom events, and user interactions with ease.
Privacy-Forward Analytics: Proxies events to ensure no Google/Meta cookies or IP addresses are exposed.

Questions or Feedback?

If you have any questions or run into issues, contact us at [email protected]. For more details, visit the Ours Privacy Platform.

Start integrating Ours with your Vite + React Router application today to unlock secure, privacy-focused analytics!