NextJS

Overview

Alytica is a lightweight, privacy-conscious web analytics tool perfectly suited for Next.js applications. Offering comprehensive tracking capabilities with minimal performance impact, Alytica helps you understand user interactions across server-side and client-side rendered pages.

Key Features

Automatic page view tracking
Server-side and client-side compatibility
Custom event tracking
Performance-optimized tracking script
Seamless Next.js integration

Integration Steps

1. Create a Project

First create a project from your Alytica dashboard by clicking the button "New Website"

2. Static Script Injection

For Next.js, you have multiple integration approaches:

Option 1: _document.js (Recommended)

import Document, { Html, Head, Main, NextScript } from 'next/document';
 
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script 
            src="https://alytica.tech/js/tracker.js"
            data-website-id="YOUR_WEBSITE_ID"
            data-domain="yourdomain.com"
            strategy="afterInteractive"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
 
export default MyDocument;

Option 2: Dynamic Script Injection (App Router)

'use client';
 
import { useEffect } from 'react';
 
export function AlyticaTracker() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://alytica.tech/js/tracker.js';
    script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID');
    script.setAttribute('data-domain', 'yourdomain.com');
    document.body.appendChild(script);
 
    return () => {
      document.body.removeChild(script);
    };
  }, []);
 
  return null;
}

3. Custom Event Tracking

Use the global window.alytica() function across your Next.js application:

// In any client component
function SignupButton() {
  const handleSignup = () => {
    // Signup logic
    window?.alytica('signup', { 
      email: 'user@email.com'
    });
  };
 
  return <button onClick={handleSignup}>Sign Up</button>;
}

If you want to use our revenue attribution features you will have to set up payment events on your payment confirmation page like this:

// In any client component
function ConfirmationPage() {
  const handlePaymentTracking = () => {
    // Signup logic
    window?.alytica('payment', { 
      email: 'customer@email.com',
      amount: 69.99
    });
  };
 
  return( <div>
    Confirm Payment
    <button onClick={handlePaymentTracking}>Confirm</button></div>);
}

You can use the global window.alytica() function to track not only signups and payments, but also any event with any custom data

function AddToCartButton({ product }) {
  const handleAddToCart = () => {
    // Add to cart logic
    window?.alytica('add_to_cart', { 
      productId: product.id,
      productName: product.name,
      price: product.price,
      quantity: 1,
    });
  };
 
  return <button onClick={handleAddToCart}>Add to Cart</button>;
}

4. Server-Side Considerations

For server-side events or tracking, you'll need client-side execution:

'use client';
 
import { useEffect } from 'react';
 
export function PaymentTracker({  email }) {
  useEffect(() => {
    window?.alytica('signup', {  email });
  }, [ product]);
 
  return null;
}

Best Practices

Use strategy="afterInteractive" in _document.js
Implement tracking only on the client-side
Avoid multiple script injections
Keep tracking lightweight

Testing Your Integration

Click the Verify Script button in the setup form. This will automatically check if the script is correctly installed and configured on your website.
- If successful, you'll see a "Verification Successful" message.
- If it fails, review the script placement and domain settings, then try again.
Check Network tab for https://alytica.tech/api/track-visit calls
Verify custom events are being sent
Use Alytica's dashboard for comprehensive insights

Conclusion

Alytica offers a straightforward, performant analytics solution for Next.js applications. By following these steps, you'll gain deep insights into user behavior with minimal configuration overhead.

NextJS

On this page