Ours Integration with Remix

Integrating Ours with a Remix application ensures secure and efficient event tracking. This guide demonstrates how to set up the Ours tracking script, track page views, and log custom events while maintaining HIPAA compliance.

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 Remix Example Repo

Install

1. Add the Ours Privacy Web SDK

The first step is to add the Ours Web SDK to your application. You’ll do this by appending the script dynamically to avoid hydration errors.

1. Create a utility function to add the script in root.tsx:

let oursAdded = false;

function addOursScript() {
  if (oursAdded) return;
  oursAdded = true;

  // paste your script here
}

import { useEffect } from "react";

// 2. Call this function inside the `useEffect` hook of your `root.tsx` file:
export function Layout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    addOursScript();
  }, []);
}

View exact setup here: https://github.com/with-ours/ours-remix

2. Verify Installation

Navigate to your Remix application and check the browser console to verify the Ours script has loaded successfully. You should see events logged in the Recent Events section of your Ours dashboard.

Tracking Custom Events

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

Example: Button Click Tracking

function HomePage() {
  const handleButtonClick = () => {
    ours("track", "ButtonClicked", { label: "Submit Button" });
  };

  return <button onClick={handleButtonClick}>Submit</button>;
}

Why Use Ours with Remix?

• HIPAA Compliance: Ensure your analytics are privacy-first and compliant.
• Dynamic Loading: Avoid hydration errors by dynamically appending the script.
• Scalable Tracking: Track page views and custom events seamlessly.