Ours Integration with Vite and React Router
Learn how to integrate Ours with your Vite and React Router application for tracking page views and custom events seamlessly.
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.
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 to
index.html
:- In your Vite project, open
index.html
- Paste the script into the
<head>
section:
- In your Vite project, open
<!-- 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!
Updated 7 days ago