# Installation Add Totallytics to your application layout, single-page app, or modern frontend framework. ## Script placement Load `latest.js` once in your root document. Do not mount duplicate script tags across child views. ### Plain HTML Place the script in your shared template header or footer: ```html My App
``` ### React and Vite Add the script directly inside `index.html` at the project root: ```html Vite App
``` ### Next.js (App Router) Place a raw ` ``` ## Manual pageview tracking If you prefer manual control over pageviews, disable automatic collection with `data-auto-collect="false"`. When disabled, trigger pageviews using `window.sa_pageview(path, metadata)`. Calls recording an identical consecutive path are automatically suppressed. Verify that the script has loaded before calling `window.sa_pageview`: ```html ``` ## Script configuration options Configure behavior by setting data attributes on the ` ``` For most settings, `window.sa_settings` overrides the equivalent attribute; `data-auto-collect="false"` still disables automatic pageviews. Avoid conflicting configurations and set them before `latest.js` executes. Totallytics does not host the optional [automatic-events companion scripts](/docs/events#automated-event-scripts). ## Privacy and Do Not Track By default, `navigator.doNotTrack === "1"` stops normal collection after the script loads. Keep this default to respect the visitor’s setting. ## Content Security Policy (CSP) Totallytics uses `new Image()` for pageview beacons and `navigator.sendBeacon` for `/append` duration tracking. If your site serves a Content Security Policy header, merge `https://analytics.bitgate.dev` into your existing directives. Do not overwrite your wider security rules: ```text script-src 'self' https://analytics.bitgate.dev; img-src 'self' https://analytics.bitgate.dev; connect-src 'self' https://analytics.bitgate.dev; ``` If your policy defines `script-src-elem`, include `https://analytics.bitgate.dev` there as well. Inline settings, event queues, and `onload` examples also need your existing inline-code policy; prefer external app code or your framework’s nonce/hash mechanism rather than adding `unsafe-inline`. ## Testing on localhost By default, `latest.js` extracts `location.host` when `data-hostname` is omitted. On local development environments, this results in values like `localhost:3000`. The script can still send on localhost; it is not a reliable development-mode exclusion. An unregistered local hostname is normally ignored by the collector, while an explicit production `data-hostname` can record local test traffic against your live site. To verify integrations, test on an explicit staging or production domain that matches a registered hostname. Do not direct localhost test traffic to your production hostname. Next, explore [Custom Events](/docs/events) or review the [Troubleshooting Guide](/docs/troubleshooting).