Install on a framework

This page shows where to put the Clear Saga tag in an app built with a web framework. Find your framework below, follow its steps and deploy. Most samples carry the placeholder YOUR_SITE_KEY: replace it with the key of your site, which you find under Settings, Installation. Where a sample reads the key from a setting of the framework instead, its steps say where to put the key, and Settings, Installation shows the key on a line of its own.

There is no package to install for any of them. The tag is the same script on every framework, and only the file it goes in and the way it is written differ. The script notices on its own when your app moves to another page, so none of these frameworks needs extra code for its router.

Next.js #

1. Open your root layout, app/layout.tsx.
2. Add the Script component inside <body>, before {children}.
3. Deploy. Moving between routes is recorded without any extra code.

import Script from 'next/script'

<Script
  id="clearsaga-tracker"
  strategy="afterInteractive"
  data-site-key="YOUR_SITE_KEY"
  src="https://clearsaga.com/js/script.js"
/>

React Router #

1. Framework mode: add the tag to the <head> your root layout renders in app/root.tsx.
2. Without server rendering: paste the plain HTML tag into the <head> of index.html instead.

<script
  defer
  data-site-key="YOUR_SITE_KEY"
  src="https://clearsaga.com/js/script.js"
/>

TanStack Start #

1. Add the tag to the <head> of the document your root route renders, after <HeadContent />.
2. TanStack Router without Start: paste the plain HTML tag into the <head> of index.html instead.

<script
  defer
  data-site-key="YOUR_SITE_KEY"
  src="https://clearsaga.com/js/script.js"
/>

Astro #

1. Open the layout your pages share, for example src/layouts/Layout.astro.
2. Add the tag inside <head>. The is:inline directive tells Astro to output it exactly as written.

<script
  is:inline
  defer
  data-site-key="YOUR_SITE_KEY"
  src="https://clearsaga.com/js/script.js"
></script>

Vue #

1. Vite: paste the tag into the root index.html, before </head>.
2. Vue CLI: the file is public/index.html.

<script
  defer
  data-site-key="YOUR_SITE_KEY"
  src="https://clearsaga.com/js/script.js"
></script>

Nuxt #

1. Add the script to app.head in nuxt.config.ts, so every page includes it.
2. Restart the dev server, or deploy.

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          defer: true,
          'data-site-key': 'YOUR_SITE_KEY',
          src: 'https://clearsaga.com/js/script.js',
        },
      ],
    },
  },
})

Laravel #

1. Add CLEARSAGA_SITE_KEY to .env, with your site key as its value.
2. In config/services.php add: 'clearsaga' => ['site_key' => env('CLEARSAGA_SITE_KEY')],
3. Paste the tag into the <head> of the Blade layout every page uses.

<script
  defer
  data-site-key="{{ config('services.clearsaga.site_key') }}"
  src="https://clearsaga.com/js/script.js"
></script>

Django #

1. Add CLEARSAGA_SITE_KEY to settings.py, with your site key as its value.
2. Write a context processor that returns {"CLEARSAGA_SITE_KEY": settings.CLEARSAGA_SITE_KEY} and list it under TEMPLATES, OPTIONS, context_processors.
3. Paste the tag into the <head> of your base template.

<script
  defer
  data-site-key="{{ CLEARSAGA_SITE_KEY }}"
  src="https://clearsaga.com/js/script.js"
></script>

After you deploy #

Open your site in a normal browser window and then the dashboard. The first visit shows up within a few seconds. Visits from your own machine count too, because there is no switch for local development. If you do not want them in your numbers, use a separate site for testing or leave your own visits out.

If nothing arrives, troubleshooting lists what to check.

Next: Script options, Custom events, Troubleshooting