Next.js Installation

theBizness.ai Analytics

▲

Next.js Integration

Add theBizness.ai analytics to your Next.js application with optimal performance and SEO benefits.

Setup Time

2 minutes

Difficulty

Easy

Performance

Optimized

Choose Your Next.js Version

App Router Installation

For Next.js 13+ applications using the new App Router

Step 1: Add to Root Layout

Add the tracking script to your app/layout.tsx file:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script
          strategy="afterInteractive"
          data-website-id="your-website-id"
          data-domain="yourdomain.com"
          src="https://thebizness.ai/js/script.js"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Pro Tip

Using strategy="afterInteractive" ensures the script loads after the page becomes interactive, providing optimal performance.

Environment Variables (Recommended)

Store your website ID and domain securely using environment variables

Step 1: Add to .env.local

# .env.local
NEXT_PUBLIC_THEBIZNESS_WEBSITE_ID=your-website-id
NEXT_PUBLIC_THEBIZNESS_DOMAIN=yourdomain.com

Step 2: Use in Layout

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script
          strategy="afterInteractive"
          data-website-id={process.env.NEXT_PUBLIC_THEBIZNESS_WEBSITE_ID}
          data-domain={process.env.NEXT_PUBLIC_THEBIZNESS_DOMAIN}
          src="https://thebizness.ai/js/script.js"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Security Benefits

• Keep sensitive IDs out of your source code
• Easy to manage across different environments
• Follow Next.js security best practices

Advanced: Proxy Setup

Route analytics through your domain to bypass ad blockers and improve data accuracy

Benefits

• 95%+ data collection accuracy (vs 85% without proxy)
• Bypass ad blockers and privacy extensions
• First-party data collection for better privacy compliance

Step 1: Configure Rewrites

Add these rewrites to your next.config.js:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/js/script.js',
        destination: 'https://thebizness.ai/js/script.js',
      },
      {
        source: '/api/events',
        destination: 'https://thebizness.ai/api/events',
      },
      {
        source: '/api/events/event',
        destination: 'https://thebizness.ai/api/events/event',
      },
    ];
  },
};

module.exports = nextConfig;

Step 2: Update Script Source

Change the script src to use your local domain:

// With proxy configuration, use local paths
<Script
  strategy="afterInteractive"
  data-website-id="your-website-id"
  data-domain="yourdomain.com"
  src="/js/script.js"
/>

Verify Installation

Make sure everything is working correctly

✅ Quick Check

1. Deploy your changes
2. Visit your website
3. Check browser Network tab for script load
4. Navigate between pages

📊 Dashboard Check

1. Log into your theBizness.ai dashboard
2. Check for real-time visitor data
3. Verify page views are being tracked
4. Test UTM parameter tracking

Common Issues

• Make sure you're using your actual website ID, not the placeholder
• Check that your domain matches exactly (no www mismatch)
• Verify the script loads in browser DevTools Network tab

🎉 Installation Complete!

Your Next.js application is now tracking visitor analytics with theBizness.ai. Here's what to do next:

📊 Revenue Attribution

Connect Stripe to track which campaigns generate paying customers

🎯 Conversion Tracking

Set up custom events to track signups, purchases, and more

🔗 UTM Campaigns

Start using UTM parameters to track marketing campaigns