Remix

Name: Rybbit
Author: Rybbit

This guide explains how to integrate Rybbit with your Remix application for analytics tracking. Remix is a full-stack web framework that leverages React for building user interfaces.

How to Add Rybbit to Your Remix App

The recommended way to add a script that should appear on every page in a Remix application is by including it in your root layout file, typically app/root.tsx (or app/root.jsx).

1. Retrieve Your Tracking Script

Navigate to your Rybbit dashboard to obtain your code snippet. It will look like this:


<script
  src="https://app.rybbit.io/api/script.js"
  data-site-id="YOUR_SITE_ID"
  async
></script>

Remember to replace YOUR_SITE_ID with your actual Site ID.

2. Add the Snippet to `app/root.tsx`

Open your app/root.tsx (or app/root.jsx) file. This file defines the root HTML structure for your application. Add the Rybbit tracking snippet within the <head> section of the returned JSX.

app/root.tsx


import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
 
export default function App() {
  const rybbitSiteId = "YOUR_SITE_ID"; // Replace with your actual Site ID
 
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
        {/* Rybbit Tracking Snippet */}
        <script
          src="https://app.rybbit.io/api/script.js"
          data-site-id={rybbitSiteId}
          async
          defer
        ></script>
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

Make sure to replace YOUR_SITE_ID with your actual Site ID. You can define it as a constant or directly in the script tag.

3. Verify Installation

After restarting your Remix development server or deploying your application, open your Rybbit dashboard to check if data is being received. You can also inspect your browser’s network tab to confirm that script.js is loaded.

SPA Page View Tracking: Rybbit’s tracking script is designed to automatically detect route changes in most modern SPAs. Remix handles client-side navigation after the initial server render. If you find that page views are not being tracked correctly after client-side navigations (which can sometimes happen depending on the specifics of the script’s SPA detection), you might need to manually trigger page views.

One way to do this in Remix is to leverage a component that re-renders on navigation, or potentially by creating a custom useLocationChange hook if more granular control is needed, though this is often more complex. A simpler approach if manual tracking is needed might involve a root-level effect that listens to location changes. However, test the default behavior first, as manual tracking might not be necessary. If manual tracking is required, you would call window.rybbit.trackPageview() after a route change.

Custom Event Tracking

Once the Rybbit script is installed and loaded, you can track custom events from any of your Remix route components or other React components within your Remix app:


// Example in a Remix route component
export default function MyFeatureRoute() {
  const handleButtonClick = () => {
    if (typeof window !== "undefined" && window.rybbit) {
      window.rybbit.trackEvent('remix_feature_click', { feature: 'Special Offer' });
    }
  };
 
  return (
    <div>
      <h1>My Awesome Feature</h1>
      <button onClick={handleButtonClick}>Claim Offer</button>
    </div>
  );
}

Always check typeof window !== "undefined" before accessing window.rybbit because Remix components can render on the server. Then, ensure window.rybbit itself is available.