> ## Documentation Index > Fetch the complete documentation index at: https://docs.lumenstat.com/llms.txt > Use this file to discover all available pages before exploring further. # Framework recipes > The pinned tracker tag for plain HTML, Next.js, React with Vite, Astro, SvelteKit and Nuxt, with preview deploys kept out of your numbers. Every recipe below renders the same tag: the release URL, its integrity hash, `crossorigin="anonymous"` and your website id. Put it in the one place your framework renders on every page, and render it once. Each recipe also sets `data-domains`, so preview builds and local development send nothing. Replace `YOUR-WEBSITE-ID` with the id from your project's **Setup** page, and `example.org,www.example.org` with the exact hostnames you serve in production. ## Keep previews and local development out The tracker reads `data-domains` as a comma-separated list of hostnames. When it is set, the tracker sends nothing unless `location.hostname` is exactly one of them. Without it, two things go wrong: * **Previews on a subdomain are counted.** The collect endpoint accepts events from your website's domain and every subdomain of it, so a preview at `preview.example.org` passes the origin check and adds to your production numbers. * **Previews on another domain and `localhost` are flagged.** They fail the origin check as `origin_mismatch`. They are never counted, but they fill your **Flagged, not counted** card with your own traffic. The match is exact, not by suffix. List `www.example.org` and `example.org` separately if both serve pages. > [tab] HTML > > Paste the tag into the `` of every page, or of the shared template your pages are built from. > > ```html index.html theme={null} > > > > > Example > > > > ... > > > ``` > [tab] Next.js > > For the App Router, render `next/script` from the root layout. `strategy="afterInteractive"` loads the tracker after hydration. `next/script` passes `integrity`, `crossOrigin` and the `data-*` props through to the ` > > >
> > > > ``` > > Route changes made with React Router, or any router that calls `history.pushState`, are counted as page views. Do not also render the tag from a React component. > [tab] Astro > > Add the tag to the layout every page uses. `is:inline` tells Astro to render the tag exactly as written instead of processing and bundling it. > > ```astro src/layouts/Layout.astro theme={null} > --- > const { title } = Astro.props; > --- > > > > > {title} > > > > > > > ``` > > If some pages use a different layout, add the tag there too, or move it into a shared head component. One copy per page. > [tab] SvelteKit > > `src/app.html` is the page template for every route. Put the tag in its ``, before `%sveltekit.head%`. > > ```html src/app.html theme={null} > > > > > > > %sveltekit.head% > > >
%sveltekit.body%
> > > ``` > > If you set a Content Security Policy in `svelte.config.js` under `kit.csp`, add `https://t.lumenstat.com` to `script-src` and `connect-src`. > [tab] Nuxt > > Use one of the two options, not both. `app.head` in `nuxt.config.ts` adds the tag to every page. `useHead` in `app.vue` does the same from the root component. > > ```ts nuxt.config.ts theme={null} > export default defineNuxtConfig({ > app: { > head: { > script: [ > { > src: 'https://t.lumenstat.com/v/1.0.0/l.js', > defer: true, > integrity: 'sha384-cBzCCJcHCWSGbuy/f+zavGm/HjUWv77eni4DyLfq+FfKigpin1mul1ekLXILze/3', > crossorigin: 'anonymous', > 'data-website-id': 'YOUR-WEBSITE-ID', > 'data-domains': 'example.org,www.example.org', > }, > ], > }, > }, > }); > ``` > > ```vue app.vue theme={null} > > > > ``` ## Check the result Load a production page, open the developer tools and confirm two things: the rendered `