Script Implementation

If you are not using npm or a frontend framework and want to track custom events on 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/custom/script?projectKey=PROJECT_KEY&userId=USER_ID"
></script>

This will automatically:

Enable custom event tracking via the global window.nanoCustom.track function.
Collect custom metadata and securely send it to the NanoCustom API.

How It Works

The script is generated on-demand for your projectKey and userId. It allows you to:

Track custom events by name, e.g. "SignUp", "ButtonClick".
Pass any arbitrary metadata object when tracking events (see example below).
Predefined fields (category, label, value) are extracted for dashboard analytics.

Example Usage

<button onclick="window.nanoCustom.track('SignUp')">
  Sign Up
</button>
 
<script>
  // Track with metadata
  window.nanoCustom.track('ButtonClick', {
    category: 'CTA',
    label: 'Homepage Hero',
    value: 1,
    custom_field: 'custom value'
  });
</script>

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)
Event name and event data (including custom metadata)
Category, label, value (for analytics, if present)
Full URL, page title, page path
Referrer
User agent/device info
Timestamp

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 custom event data is processed securely.