Integration Guides
Script tag (add to <head>)
The universal way to install Otus — paste the snippet into your site's head.
Adding the script tag directly to your HTML is the most reliable way to install Otus. It works on every platform that lets you edit the page <head>.
Steps
- In the Otus dashboard, open Site settings → Tracking snippet and copy your snippet.
- Paste it just before the closing
</head>tag on every page of your site. - Deploy your site.
- Verify the installation.
index.html
<head>
<!-- ... -->
<script defer
id="otus-script"
data-site-id="123"
data-endpoint="https://ingest.otusanalytics.com/e"
src="https://cdn.otusanalytics.com/otus.js"></script>
</head>
Use a shared layout/template so the snippet appears on every page automatically, rather than pasting it page by page.
Where to put it in popular frameworks
Next.js (App Router)
Add the script in app/layout.tsx using next/script:
app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<Script
id="otus-script"
src="https://cdn.otusanalytics.com/otus.js"
data-site-id="123"
data-endpoint="https://ingest.otusanalytics.com/e"
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
)
}
Nuxt
Add it in nuxt.config.ts so it renders into the head on every page:
nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{
id: 'otus-script',
src: 'https://cdn.otusanalytics.com/otus.js',
defer: true,
'data-site-id': '123',
'data-endpoint': 'https://ingest.otusanalytics.com/e'
}
]
}
}
})
Plain HTML / static sites
Paste the snippet into the shared <head> of your template or include file. If you use a static site generator (Hugo, Eleventy, Astro, Jekyll), add it to the base layout.
Single-page apps
No extra setup is needed. Otus automatically tracks pageviews on initial load and on every client-side route change. See Install the tracking script.
Next step
Verify your installation, then explore your reports.