Skip to main content

Remix Integration

Add Ovyxa analytics to your Remix application. The script is loaded once in the root layout and tracks all page navigations automatically.

Add the Script to Your Root Layout​

Open app/root.tsx and add the tracking script inside the <head> section:

// app/root.tsx
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from '@remix-run/react'

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
        <script
          defer
          data-domain="yourdomain.com"
          src="https://ovyxa.com/js/script.js"
        />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

Only Track in Production​

Use a loader to pass the environment and conditionally render the script:

// app/root.tsx
import { json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'

export const loader = () => {
  return json({ isProd: process.env.NODE_ENV === 'production' })
}

export default function App() {
  const { isProd } = useLoaderData<typeof loader>()

  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
        {isProd && (
          <script
            defer
            data-domain="yourdomain.com"
            src="https://ovyxa.com/js/script.js"
          />
        )}
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

Tracking Custom Events​

Call the global ovyxa function from any component or event handler:

function PricingButton() {
  const handleClick = () => {
    window.ovyxa('event', 'UpgradeClick', { props: { plan: 'growth' } })
  }

  return <button onClick={handleClick}>Upgrade Now</button>
}

Cookieless Mode​

Add data-cookieless to skip cookie consent requirements:

<script
  defer
  data-domain="yourdomain.com"
  data-cookieless
  src="https://ovyxa.com/js/script.js"
/>

Verify Installation​

  1. Deploy your Remix app or run remix build && remix-serve build
  2. Check the browser Network tab for the script request
  3. Confirm pageviews appear on your Ovyxa dashboard

Next Steps​