← All platforms

    Installation Guide · Next.js

    How to Add Agent Analytics to Your Website

    One script captures what visitors browse. That becomes memory your analytics can understand. And agents like Jack turn it into actions — recovery emails, demand segments, conversion insights.

    Install on Next.js

    ⚡

    Next.js

    Next.js has a built-in Script component that handles loading optimization. This is the recommended way to add third-party scripts.

    Easy·1 min·2 methods

    Using next/script (Recommended)

    Use the built-in Script component for automatic loading optimization and better performance.

    Prerequisites

    • •Next.js 11+
    1
    Open your app/layout.tsx (App Router) or pages/_document.tsx (Pages Router)

    For App Router (Next.js 13+), edit the root layout. For Pages Router, edit _document.tsx.

    Tip: Not sure which router? Check if you have an 'app' folder — that's App Router.

    2
    Import the Script component at the top of the file

    Add this import alongside your other imports.

    Paste this
    import Script from 'next/script';
    3
    Add the Script component with strategy="afterInteractive"

    Place it inside the <body> tag (App Router) or inside the <Head> component (Pages Router).

    Paste this
    <Script
  src="https://analytics.tradly.dev/tracker.js"
  data-server="https://analytics.tradly.dev"
  data-project="marketplace"
  strategy="afterInteractive"
/>
    4
    Save and run your dev server to verify

    Run npm run dev and check the browser console to confirm the script loads.

    Troubleshooting (3 common issues)
    • →If you see 'next/script' not found, make sure you're using Next.js 11 or later
    • →The 'afterInteractive' strategy loads the script after the page becomes interactive — ideal for analytics
    • →Don't put the Script component inside <head> — Next.js will warn you. Put it inside <body>

    Using <script> tag directly

    If you prefer, you can use a raw script tag. Less optimal but works fine.

    1
    Open your root layout or _document file

    Same files as above: layout.tsx (App Router) or _document.tsx (Pages Router).

    2
    Add the script tag inside the element

    Make sure to add the async attribute so it doesn't block page rendering.

    Paste this
    <script async src="https://analytics.tradly.dev/tracker.js" data-server="https://analytics.tradly.dev" data-project="marketplace"></script>
    3
    Save and restart your dev server

    Run npm run dev to test locally.

    The next/script approach is preferred for better loading performance.

    Need help? Contact support@tradly.dev or check our FAQ.

    Last updated: January 2025