Skip to main content

Next.js SDK

The @signalsparrow/next package is a wrapper around the Web SDK, tuned for Next.js. It handles client-side setup for you and automatically tracks navigation between pages.

Setup​

Install the package:

npm install @signalsparrow/next

Wrap your app with the provider in your root layout, using the Public API key from Settings → Tracking:

// app/layout.tsx
import { RevenuePixelProvider } from '@signalsparrow/next';

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body>
                <RevenuePixelProvider publicKey="pk_live_YOUR_PUBLIC_KEY">
                    {children}
                </RevenuePixelProvider>
            </body>
        </html>
    );
}

That's all that's needed for tracking to start — including page views as visitors move around your app.

Provider options​

RevenuePixelProvider accepts the same settings as the Web SDK, passed as props:

<RevenuePixelProvider
    publicKey="pk_live_YOUR_PUBLIC_KEY"
    host="https://track.yourdomain.com"
    consentMode="anonymous"
>
    {children}
</RevenuePixelProvider>

See Configuration options for what each one does.

Identifying users​

Use the useIdentify hook inside a client component and call it when a user signs up or logs in:

'use client';

import { useIdentify } from '@signalsparrow/next';

export function SignupForm() {
    const identify = useIdentify();

    const onSubmit = async (email: string) => {
        // ...create the account
        identify(email);
    };

    return <form>{/* ... */}</form>;
}

This one call is what connects an anonymous visit to a real customer — see Identifying Users.

Custom events​

Need to record an extra front-end action? Use the useTrack hook:

'use client';

import { useTrack } from '@signalsparrow/next';

export function DemoButton() {
    const track = useTrack();

    return (
        <button onClick={() => track('Demo Requested')}>Request a demo</button>
    );
}
Revenue events are automatic

Subscriptions, upgrades, trial conversions and the like come from Stripe, so you don't need to fire those yourself.

Next​