Skip to content

Commit

Permalink
docs(nx-dev): load external script dynamically on route changes (#29355)
Browse files Browse the repository at this point in the history
Moved the external script loading logic to a dynamic handler triggered
on route changes using `useEffect`. This ensures the script is reloaded
with each route change and prevents duplicates by removing any
pre-existing script.
  • Loading branch information
bcabanes committed Dec 13, 2024
1 parent 311a607 commit bf4a753
Showing 1 changed file with 26 additions and 10 deletions.
36 changes: 26 additions & 10 deletions nx-dev/nx-dev/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,37 @@ export default function CustomApp({
}: AppProps): JSX.Element {
const router = useRouter();
const gaMeasurementId = 'UA-88380372-10';
// RR2B ---------
const SCRIPT_ID = 'external-js-script';
const SCRIPT_BASE_URL = 'https://s3-us-west-2.amazonaws.com/b2bjsstore/b/';
const SCRIPT_KEY = '0NW1GH7YJ4O4'; //
const SCRIPT_URL = `${SCRIPT_BASE_URL}${SCRIPT_KEY}/${SCRIPT_KEY}.js.gz`;
useEffect(() => {
const handleRouteChange = () => {
const existingScript = document.getElementById(SCRIPT_ID);
if (existingScript) {
existingScript.remove();
}
const script = document.createElement('script');
script.id = SCRIPT_ID;
script.src = SCRIPT_URL;
script.async = true;
document.body.appendChild(script);
};
router.events.on('routeChangeComplete', handleRouteChange);
handleRouteChange();
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [router.events, SCRIPT_URL]);
// ---------

useEffect(() => {
const handleRouteChange = (url: URL) =>
sendPageViewEvent({ gaId: gaMeasurementId, path: url.toString() });
router.events.on('routeChangeStart', (url) => handleRouteChange(url));
return () => router.events.off('routeChangeStart', handleRouteChange);
}, [router]);
}, [router.events, gaMeasurementId]);
return (
<>
<DefaultSeo
Expand Down Expand Up @@ -153,15 +178,6 @@ export default function CustomApp({
`,
}}
/>
<Script
id="rb2b-script-loader"
strategy="afterInteractive"
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 + "/0NW1GH7YJ4O4.js.gz";var first = document.getElementsByTagName("script")[0];first.parentNode.insertBefore(script, first);};reb2b.SNIPPET_VERSION = "1.0.1";reb2b.load("0NW1GH7YJ4O4");}();
`,
}}
/>
</>
);
}

0 comments on commit bf4a753

Please sign in to comment.