Next.js

The package adds one component to your layout. It is the most accurate install, as it does not load a separate script file.

StepsCopy Anchor Link

1. In your project, install the package: npm i trckable.
2. Open app/layout.tsx (App Router).
3. Add the import and the component inside <body>, as below.
4. Deploy your app.

import { Analytics } from 'trckable/next'
<Analytics site="tkb_a1b2c3d4" host="https://stats.example.com" />

To count visitors with ad blockers too, serve events from your own domain. See the proxy and the npm package.

Check it worksCopy Anchor Link

Open your site in a private window, then open your trckable dashboard and look at Live. Your visit shows up within a minute.

If it does not showCopy Anchor Link

• Rendered in a client-only place that never mounts. Put the component in the root layout.
• Running on localhost. trckable ignores local development on purpose. Deploy, or use data-dev while testing.
• The Pages Router has no app/layout.tsx. Render the component in pages/_app.tsx instead.

Still stuck? Run npx trckable doctor against your site, or see the script tag page.