To integrate your RB2B tracking script into every page of your Next.js application, ensuring it loads as users navigate through your site, you can use the _app.js file for a broad application, or the next/head component for injecting it into the <head> section of your HTML document. We'll show you how to do this using both methods, so you can choose the best fit for your needs.
Using _app.js for Site-wide Script Execution
You can include the script directly within the _app.js file using the useEffect hook to ensure it executes once when the app component mounts. This method is suitable for scripts that don't need to manipulate the DOM immediately or rely on being present in the <head>.
// pages/_app.js
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
useEffect(() => {
// Directly adding your script content here
!function () {
var reb2b = window.reb2b = window.reb2b || [];
if (reb2b.invoked) return;
reb2b.invoked = true;
reb2b.methods = ["identify", "collect"];
reb2b.factory = function (method) {
return function () {
var args = Array.prototype.slice.call(arguments);
args.unshift(method);reb2b.push(args);
return reb2b;
};
};
for (var i = 0; i < reb2b.methods.length; i++) {
var key = reb2b.methods[i];
reb2b[key] = reb2b.factory(key);
}
reb2b.load = function (key) {
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "https://s3-us-west-2.amazonaws.com/b2bjsstore/b/" + key + "/reb2b.js.gz";
var first = document.getElementsByTagName("script")[0];
first.parentNode.insertBefore(script, first);
};
reb2b.SNIPPET_VERSION = "1.0.1";
reb2b.load("YOUR-UNIQUE-ID");
}();
}, []);
return <Component {...pageProps} />;
}
export default MyApp;
Using next/head for <head> Injection
If, for any reason, you decide this script must be part of the document <head>, or if you need the script to be executed as part of the HTML rendering process, you can inject it using next/head. This method is useful for scripts that affect the initial rendering or need to be indexed by search engines.
// pages/_app.js
import Head from 'next/head';
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<script dangerouslySetInnerHTML={{
__html: `
!function () {
var reb2b = window.reb2b = window.reb2b || [];
if (reb2b.invoked) return;
reb2b.invoked = true;
reb2b.methods = ["identify", "collect"];
reb2b.factory = function (method) {
return function () {
var args = Array.prototype.slice.call(arguments);
args.unshift(method);reb2b.push(args);
return reb2b;
};
};
for (var i = 0; i < reb2b.methods.length; i++) {
var key = reb2b.methods[i];
reb2b[key] = reb2b.factory(key);
}
reb2b.load = function (key) {
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "https://s3-us-west-2.amazonaws.com/b2bjsstore/b/" + key + "/reb2b.js.gz";
var first = document.getElementsByTagName("script")[0];
first.parentNode.insertBefore(script, first);
};
reb2b.SNIPPET_VERSION = "1.0.1";
reb2b.load("YOUR-UNIQUE-ID");
}();
`,
}} />
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
Notes
Replace
"YOUR-UNIQUE-ID"with your actual unique ID provided by the service.The
useEffecthook in the first method ensures that the script runs once on the client side, which is typically what you want for scripts like these.The
dangerouslySetInnerHTMLattribute is necessary to insert raw HTML inside the<script>tag usingnext/head. It's called "dangerous" because it can expose your site to cross-site scripting (XSS)