Install the SDK

Drop the script or use a framework wrapper. Replace `your-website-id` with the trackerId from `hellyeah tracker create`.

Install the package:

npm i @hellyeah/x-ray

Pick the snippet that matches your stack. Replace your-website-id with the trackerId returned by hellyeah tracker create (or visible via hellyeah tracker list).

Vanilla script tag

Drop this in your <head>.

<script
  async
  defer
  src="https://xray.hellyeahai.com/script.js"
  data-website-id="your-website-id"
></script>

Autocapture for pageviews, clicks, form submits, and outbound links starts immediately.

React / Next.js

import { Analytics } from "@hellyeah/x-ray/next";

export default function Layout({ children }) {
  return (
    <>
      <Analytics websiteId="your-website-id" />
      {children}
    </>
  );
}

Use this in your root layout (App Router) or _app.tsx (Pages Router).

Remix

import { Analytics } from "@hellyeah/x-ray/remix";

export default function App() {
  return (
    <html>
      <body>
        <Analytics websiteId="your-website-id" />
        <Outlet />
      </body>
    </html>
  );
}

Vue / Nuxt

// Nuxt: plugins/x-ray.client.ts
import { injectAnalytics } from "@hellyeah/x-ray/nuxt";

export default defineNuxtPlugin(() => {
  injectAnalytics({ websiteId: "your-website-id" });
});

<!-- Vue: src/App.vue -->
<script setup lang="ts">
import { Analytics } from "@hellyeah/x-ray/vue";
</script>

<template>
  <Analytics website-id="your-website-id" />
  <!-- the rest of your app -->
</template>

Svelte / SvelteKit

<script lang="ts">
  import { injectAnalytics } from "@hellyeah/x-ray/svelte";
  import { onMount } from "svelte";

  onMount(() => {
    injectAnalytics({ websiteId: "your-website-id" });
  });
</script>

Astro

---
// src/layouts/Base.astro
---
<html>
  <head>
    <script>
      import { inject } from "@hellyeah/x-ray/astro";
      inject({ websiteId: "your-website-id" });
    </script>
  </head>
  <body><slot /></body>
</html>

Node / Bun server

For server-side events (webhooks, background jobs, API routes), use the batching client:

import { XRay } from "@hellyeah/x-ray/server";

const xray = new XRay("your-website-id", {
  host: "https://xray.hellyeahai.com",
  flushAt: 20, // batch size before auto-flush
  flushInterval: 10_000, // ms between auto-flushes
});

xray.track("purchase", {
  revenue: 49.99,
  currency: "USD",
  distinctId: "user-123",
});

// Serverless: bypass queue, send immediately
await xray.trackImmediate("purchase", { revenue: 49.99 });

// On shutdown: flush remaining events
await xray.shutdown();

Quick-start tracking

Once installed, use track() and identify() from anywhere:

import { track, identify } from "@hellyeah/x-ray";

track("signup_click", { plan: "pro" });
identify("user-123", { email: "user@example.com" });

You can also use declarative tracking: any element with data-hy-event="signup_click" fires the event on click, with optional data-hy-prop-* attributes for properties.

Track events: custom and conversion events
Identify users: hashed-PII identity

Install the SDK

On this page