This guide explains how to install the RB2B tracking script into your Next.js application. RB2B supports both the Pages Router (Next.js 12 and below) and the App Router (Next.js 13+).
Prerequisites
Before you begin, you'll need:
Your RB2B Tracking Script ID – this is provided during onboarding.
Access to your Next.js project codebase.
Basic familiarity with how routing works in your app (Pages Router vs App Router).
Get Your Tracking Script ID
On the Script Setup page of the RB2B dashboard, you will find your RB2B tracking snippet which is normally used to install RB2B on your website. To execute Step 2 below, we only need to obtain your account's unique tracking script ID.
On the last line of the HTML snippet you'll see the following code:
reb2b.SNIPPET_VERSION = "1.0.1";reb2b.load("XXXXXXXXXXX");}();XXXXXXXXXXX represents your unique tracking script ID. Copy your ID to your clipboard for later use.
Required: Load Script on Every Navigation
If you're using client-side routing and need to reload the script on each page change, create a client component:
'use client';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';
export default function RB2BLoader() {
const pathname = usePathname();
useEffect(() => {
const existing = document.getElementById('rb2b-script');
if (existing) existing.remove();
const script = document.createElement('script');
script.id = 'rb2b-script';
script.src = `https://ddwl4m2hdecbv.cloudfront.net/b/${process.env.NEXT_PUBLIC_RB2B_ID}/${process.env.NEXT_PUBLIC_RB2B_ID}.js.gz`;
script.async = true;
document.body.appendChild(script);
}, [pathname]);
return null;
}
Then include <RB2BLoader /> in your layout or root page component.
Option 1: Next.js 12 or Pages Router
If your project uses the pages/ directory and has a file called _app.js or _app.tsx, you're using the Pages Router.
1. Add the Script Loader to _app.js
Open your pages/_app.js (or _app.tsx) and add the following code:
import { useEffect } from 'react';
import { useRouter } from 'next/router';
function MyApp({ Component, pageProps }) {
const router = useRouter();
useEffect(() => {
const handleRouteChange = () => {
const existing = document.getElementById('rb2b-script');
if (existing) existing.remove();
const script = document.createElement('script');
script.id = 'rb2b-script';
script.src = `https://ddwl4m2hdecbv.cloudfront.net/b/${process.env.NEXT_PUBLIC_RB2B_ID}/${process.env.NEXT_PUBLIC_RB2B_ID}.js.gz`;
script.async = true;
document.body.appendChild(script);
};
router.events.on('routeChangeComplete', handleRouteChange);
// Run once on load
handleRouteChange();
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [router.events]);
return <Component {...pageProps} />;
}
export default MyApp;
2. Set Your Environment Variable
In your .env.local file, add:
NEXT_PUBLIC_RB2B_ID=your-rb2b-script-id
Replace your-rb2b-script-id with your actual RB2B Tracking Script ID.
Option 2: Next.js 13+ or App Router
If your project uses the app/ directory and has a layout.js or layout.tsx, you're using the App Router.
1. Add the Script Using Next.js' <Script> Component
Open your app/layout.js or app/layout.tsx and import the <Script> component:
'use client';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';
export default function RB2BLoader() {
const pathname = usePathname();
useEffect(() => {
const existing = document.getElementById('rb2b-script');
if (existing) existing.remove();
const script = document.createElement('script');
script.id = 'rb2b-script';
script.src = `https://ddwl4m2hdecbv.cloudfront.net/b/${process.env.NEXT_PUBLIC_RB2B_ID}/${process.env.NEXT_PUBLIC_RB2B_ID}.js.gz`;
script.async = true;
document.body.appendChild(script);
}, [pathname]);
return null;
}
This method ensures the RB2B script is loaded once on initial page load.
2. Set Your Environment Variable
In your .env.local file, add:
NEXT_PUBLIC_RB2B_ID=your-rb2b-script-id
Replace your-rb2b-script-id with your actual RB2B Tracking Script ID.
Final Steps
Deploy your changes.
Visit your site and open your browser console to confirm that the RB2B script loads successfully.
If you encounter issues (such as the script being blocked), check your Content Security Policy (CSP) settings. You can ask our AI Support Agent for help with CSP exceptions.