Script Implementation

If you are not using npm or a frontend framework and want to add analytics to a plain HTML website, you can use a simple script tag instead of importing the package.

Quick Start

Add the following script tag to your HTML (e.g., in the <head> or before </body>):

<script
  src="https://www.nanosights.dev/api/tags/analytics/script?projectKey=PROJECT_KEY&userId=USER_ID"
></script>

This will automatically:

  • Track page views and user navigation.
  • Collect the same secure, privacy-focused analytics data as the npm package.
  • Support custom events and user identification (see below).

How It Works

The script is generated on-demand for your projectKey and userId. It loads UAParser.js via CDN to collect device and browser info. It tracks:

  • Page views
  • Referrer
  • User/session info
  • Device/browser details

All data is sent securely to the NanoAnalytics API.

What is Sent

The payload matches the Technical Overview:

  • projectKey and userId (from the script URL or set via JS)
  • Session ID (persistent via localStorage)
  • Page title, path, full URL
  • Referrer
  • Device/browser info (parsed using UAParser.js)
  • Timestamp
  • Custom data (for events)

Notes

  • You must provide both projectKey and userId as query parameters in the script URL.
  • Works in all modern browsers. No npm, no build steps required.

See the Technical Overview for details on what is tracked and how your data is processed securely.

Edit on GitHub

Last updated on

On this page