Install on a website

For an ordinary site: your extension's landing page, your documentation, your marketing. If you are instrumenting an extension, use the Chrome or Firefox guide instead.

1. Install the package

npm install @analyticstrend/web

2. Initialise once

import { init } from "@analyticstrend/web";

const analytics = init({ writeKey: "wk_your_key_here", pageViews: "history" });

pageViews: "history" sends a page view now and each time the path changes, so a site that routes on the client counts every page too. If you already send page_view yourself, leave it out; see single-page applications.

init registers its own handlers for pagehide and for the tab becoming hidden, so queued events are sent as someone leaves. It also sends anything left over from a previous visit as soon as it starts.

That is the whole integration. Traffic sources and page paths are recorded for you — see what is captured automatically, and init({ autoCapture: false }) if you would rather they were not. Browsers that send Global Privacy Control are not counted; see the option.

Without a build step

For WordPress, Webflow, Squarespace, or any site where you cannot run npm install, add one tag to every page, in the <head>:

<script
  src="https://cdn.jsdelivr.net/npm/@analyticstrend/web@0.7.0/dist/script.js"
  integrity="sha384-ZndJPNt1RNqW3lNGgwcK7nv85PY2g2tL0FnNS0+MUVgf2phLs6JFASujwM0iA6lH"
  crossorigin="anonymous"
  data-write-key="wk_your_key_here"
  defer
></script>

It sends a page view when the page loads and each time the path changes, single-page apps included, and gives the page window.analyticstrend to track its own events with, such as window.analyticstrend.track("signup"). The other options are data attributes, among them link clicks and downloads; see the script tag.

The version in the address is exact on purpose. A published version can never change, and the integrity value makes the browser refuse anything but this exact file. unpkg serves the same path as a fallback: https://unpkg.com/@analyticstrend/web@0.7.0/dist/script.js.

What jsDelivr sees. Loading the file from jsDelivr means each visitor's browser asks jsDelivr for it, so jsDelivr sees that request as any CDN would. If that matters for your site, host the file yourself.

Host it yourself. Download the file from the address above, serve it from your own site, change src to point at your copy, and keep the integrity value. Nothing then loads from anyone else.

Your Content Security Policy, if your site sends one, needs script-src https://cdn.jsdelivr.net (or your own origin, if you host the file) and connect-src https://analyticstrend.com.

Not for extensions. Manifest V3 forbids remote code, and a script tag is remote code. Install the package instead; see the Chrome and Firefox guides.

Single-page applications

init runs once per document load. If your site routes on the client — React Router, Vue Router, SvelteKit, anything that changes the URL without a full page load — then moving between pages fires nothing at all unless you say so, and your page-view numbers will count first loads only.

The simplest fix is init({ writeKey, pageViews: "history" }), as in step 2: the SDK then sends a page view each time the path changes. The script tag does this by default.

Or track it yourself on route change, and leave pageViews out. (With both, nothing counts twice: a page view for the page just counted is not sent again.)

// React Router
import { useLocation } from "react-router";

useEffect(() => {
  analytics.track("page_view");
}, [location.pathname]);

This is the single most common way a web integration ends up quietly wrong, because the numbers look plausible. They are simply counting something narrower than you think.

You do not need to pass the path yourself. The SDK reads it at the moment you call track, which is also what lets it record the page you came from and build the flow report.

Storage that refuses to work

Safari's private browsing, a blocked third-party frame, and a site over its storage quota all make browser storage throw. The SDK falls back to an in-memory queue rather than failing: events still send during that visit, they just do not survive a reload. Your page is never taken down by our script.

Limit which sites can send events

Once it works, you can list the domains allowed to send events to this project, so a copy of your snippet on someone else's site does not count. See Limit which sites can send events.

Verify it

Load a page, then check the Events screen in your dashboard.