Setup & Installation

Moneat Analytics offers two integration methods: a lightweight script tag for any website, and an NPM package for JavaScript frameworks.

Script tag

Add the following to your website's <head>:

HTML

<script
  defer
  data-domain="yoursite.com"
  data-key="your-service-public-key"
  src="https://your-moneat-instance.com/js/m.js"
></script>

That's it. The script automatically tracks pageviews, including client-side navigations in single-page applications.

Script attributes

Attribute	Required	Description
`data-domain`	Yes	Your website's domain (e.g., `example.com`). Must match the domain you're tracking.
`data-key`	Yes	Your Moneat service public key. Found in Service settings.
`data-api`	No	Override the API host if the analytics API runs on a different domain than the script origin.
`src`	Yes	URL to the tracking script served by your Moneat instance.

Script behavior

Deferred loading - The defer attribute ensures the script doesn't block page rendering
Automatic pageview tracking - Fires on initial load and on every History API navigation (pushState, replaceState, popstate)
Respects Do Not Track - If the browser has DNT enabled, no events are sent
No cookies - Zero cookies are set, ever
Error-resilient - If the script fails to load or the API is unreachable, your site is unaffected

NPM package

For SPAs and JavaScript frameworks (React, Vue, Next.js, Nuxt, SvelteKit, etc.):

Shell

npm install @moneat/analytics

Initialization

Initialize the tracker once, typically in your app's entry point:

TypeScript

import { init } from '@moneat/analytics'

init({
  domain: 'yoursite.com',
  apiHost: 'https://your-moneat-instance.com',
  key: 'your-service-public-key',
})

Configuration options

Option	Type	Required	Description
`domain`	`string`	Yes	Your website's domain
`apiHost`	`string`	Yes	Your Moneat instance URL
`key`	`string`	Yes	Service public key
`trackLocalhost`	`boolean`	No	Track events on `localhost` (default: `false`)
`hashMode`	`boolean`	No	Use hash-based routing instead of History API (default: `false`)

Framework examples

React (Create React App / Vite)

TSX

// src/main.tsx
import { init } from '@moneat/analytics'

init({
  domain: 'yoursite.com',
  apiHost: 'https://your-moneat-instance.com',
  key: 'your-service-public-key',
})

Next.js (App Router)

TSX

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          defer
          data-domain="yoursite.com"
          data-key="your-service-public-key"
          src="https://your-moneat-instance.com/js/m.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Vue / Nuxt

TypeScript

// plugins/analytics.ts
import { init } from '@moneat/analytics'

export default defineNuxtPlugin(() => {
  init({
    domain: 'yoursite.com',
    apiHost: 'https://your-moneat-instance.com',
    key: 'your-service-public-key',
  })
})

Finding your service key

Open the Moneat dashboard
Navigate to your service's Settings page
Copy the Public Key

This is the same service public key used by client-side service ingestion.

Verifying installation

After adding the script or initializing the NPM package:

Open your website in a browser
Navigate to the Analytics section in the Moneat dashboard
You should see your visit appear in the Realtime badge within seconds

Debugging

Open your browser's Network tab and look for requests to /api/{domain}/analytics/event?sentry_key=.... A 202 Accepted response confirms events are being received.

Location breakdowns appear when location data is available for the visitor. The tracker and ingestion endpoint are hosted by Moneat; you do not need to configure a GeoIP database.