TagsInsights

Script Implementation

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

This will automatically:

  • Track core web performance metrics (LCP, FCP, CLS, TTFB, and more).
  • Collect secure, privacy-focused performance data just like the npm package.

How It Works

The script is generated on-demand for your projectKey and userId. It collects performance metrics directly in the browser, including:

  • Largest Contentful Paint (LCP)
  • First Contentful Paint (FCP)
  • Cumulative Layout Shift (CLS)
  • Time to First Byte (TTFB)
  • Navigation timing details (DNS lookup, server response, etc.)

All data is sent securely to the NanoInsights 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, must be a valid UUID)
  • Metric type, name, value, and unit
  • Full URL and referrer
  • User agent/device info
  • Timestamp
  • Navigation timing data
  • Custom context fields (for additional info)

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

Edit on GitHub

Last updated on

Previous

Insights

Next

Technical Overview

On this page