fix(nx-dev): only track analytics in prod envs (#31367)
Refactors the tracking scripts on the nx website and only runs them in prod environments
This commit is contained in:
parent
9ab5d820ab
commit
4fb362a5ac
@ -1,8 +1,16 @@
|
|||||||
import Script from 'next/script';
|
import Script from 'next/script';
|
||||||
|
|
||||||
export default function GlobalScripts({ gaMeasurementId }) {
|
export default function GlobalScripts({ gaMeasurementId, gtmMeasurementId }) {
|
||||||
|
// Don't load analytics scripts in development
|
||||||
|
const isProduction = process.env.NODE_ENV === 'production';
|
||||||
|
|
||||||
|
if (!isProduction) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{/* Google Analytics (gtag) */}
|
||||||
<Script
|
<Script
|
||||||
id="gtag-script-dependency"
|
id="gtag-script-dependency"
|
||||||
strategy="afterInteractive"
|
strategy="afterInteractive"
|
||||||
@ -22,6 +30,35 @@ export default function GlobalScripts({ gaMeasurementId }) {
|
|||||||
`,
|
`,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Google Tag Manager */}
|
||||||
|
{gtmMeasurementId && (
|
||||||
|
<>
|
||||||
|
<Script
|
||||||
|
id="gtm-script"
|
||||||
|
strategy="afterInteractive"
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: `
|
||||||
|
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||||
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||||
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||||
|
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||||
|
})(window,document,'script','dataLayer','${gtmMeasurementId}');
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Google Tag Manager - NoScript */}
|
||||||
|
<noscript>
|
||||||
|
<iframe
|
||||||
|
src={`https://www.googletagmanager.com/ns.html?id=${gtmMeasurementId}`}
|
||||||
|
height="0"
|
||||||
|
width="0"
|
||||||
|
style={{ display: 'none', visibility: 'hidden' }}
|
||||||
|
/>
|
||||||
|
</noscript>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Apollo.io Embed Code */}
|
{/* Apollo.io Embed Code */}
|
||||||
<Script
|
<Script
|
||||||
type="text/javascript"
|
type="text/javascript"
|
||||||
|
|||||||
@ -52,6 +52,7 @@ export const viewport: Viewport = {
|
|||||||
|
|
||||||
export default function RootLayout({ children }: { children: ReactNode }) {
|
export default function RootLayout({ children }: { children: ReactNode }) {
|
||||||
const gaMeasurementId = 'UA-88380372-10';
|
const gaMeasurementId = 'UA-88380372-10';
|
||||||
|
const gtmMeasurementId = 'GTM-KW8423B6';
|
||||||
return (
|
return (
|
||||||
<html lang="en" className="h-full scroll-smooth" suppressHydrationWarning>
|
<html lang="en" className="h-full scroll-smooth" suppressHydrationWarning>
|
||||||
<AppRouterAnalytics gaMeasurementId={gaMeasurementId} />
|
<AppRouterAnalytics gaMeasurementId={gaMeasurementId} />
|
||||||
@ -80,7 +81,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
|
|||||||
{children}
|
{children}
|
||||||
{/* <LiveStreamNotifier /> */}
|
{/* <LiveStreamNotifier /> */}
|
||||||
<FrontendObservability />
|
<FrontendObservability />
|
||||||
<GlobalScripts gaMeasurementId={gaMeasurementId} />
|
<GlobalScripts
|
||||||
|
gaMeasurementId={gaMeasurementId}
|
||||||
|
gtmMeasurementId={gtmMeasurementId}
|
||||||
|
/>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -9,6 +9,7 @@ import '../styles/main.css';
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { WebinarNotifier } from '@nx/nx-dev/ui-common';
|
import { WebinarNotifier } from '@nx/nx-dev/ui-common';
|
||||||
import { FrontendObservability } from '../lib/components/frontend-observability';
|
import { FrontendObservability } from '../lib/components/frontend-observability';
|
||||||
|
import GlobalScripts from '../app/global-scripts';
|
||||||
|
|
||||||
export default function CustomApp({
|
export default function CustomApp({
|
||||||
Component,
|
Component,
|
||||||
@ -88,98 +89,10 @@ export default function CustomApp({
|
|||||||
{/* <LiveStreamNotifier /> */}
|
{/* <LiveStreamNotifier /> */}
|
||||||
<WebinarNotifier />
|
<WebinarNotifier />
|
||||||
|
|
||||||
{/* Global Site Tag (gtag.js) - Google Analytics */}
|
{/* All tracking scripts consolidated in GlobalScripts component */}
|
||||||
<Script
|
<GlobalScripts
|
||||||
id="gtag-script-dependency"
|
gaMeasurementId={gaMeasurementId}
|
||||||
strategy="afterInteractive"
|
gtmMeasurementId={gtmMeasurementId}
|
||||||
src={`https://www.googletagmanager.com/gtag/js?id=${gaMeasurementId}`}
|
|
||||||
/>
|
|
||||||
<Script
|
|
||||||
id="gtag-script-loader"
|
|
||||||
strategy="afterInteractive"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: `
|
|
||||||
window.dataLayer = window.dataLayer || [];
|
|
||||||
function gtag(){ dataLayer.push(arguments); }
|
|
||||||
gtag('js', new Date());
|
|
||||||
gtag('config', '${gaMeasurementId}', {
|
|
||||||
page_path: window.location.pathname,
|
|
||||||
});
|
|
||||||
`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Script
|
|
||||||
id="gtm-script"
|
|
||||||
strategy="afterInteractive"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: `
|
|
||||||
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
||||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
||||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
||||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
||||||
})(window,document,'script','dataLayer','${gtmMeasurementId}');
|
|
||||||
`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* Google Tag Manager - NoScript */}
|
|
||||||
<noscript>
|
|
||||||
<iframe
|
|
||||||
src={`https://www.googletagmanager.com/ns.html?id=${gtmMeasurementId}`}
|
|
||||||
height="0"
|
|
||||||
width="0"
|
|
||||||
style={{ display: 'none', visibility: 'hidden' }}
|
|
||||||
/>
|
|
||||||
</noscript>
|
|
||||||
|
|
||||||
{/* Apollo.io Embed Code */}
|
|
||||||
<Script
|
|
||||||
type="text/javascript"
|
|
||||||
id="apollo-script-loader"
|
|
||||||
strategy="afterInteractive"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: `function initApollo(){var n=Math.random().toString(36).substring(7),o=document.createElement("script"); o.src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache="+n,o.async=!0,o.defer=!0,o.onload=function(){window.trackingFunctions.onLoad({appId:"65e1db2f1976f30300fd8b26"})},document.head.appendChild(o)}initApollo();`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* HubSpot Analytics */}
|
|
||||||
<Script
|
|
||||||
id="hs-script-loader"
|
|
||||||
strategy="afterInteractive"
|
|
||||||
src="https://js.hs-scripts.com/2757427.js"
|
|
||||||
/>
|
|
||||||
{/* HubSpot FORMS Embed Code */}
|
|
||||||
<Script
|
|
||||||
type="text/javascript"
|
|
||||||
id="hs-forms-script-loader"
|
|
||||||
strategy="afterInteractive"
|
|
||||||
src="//js.hsforms.net/forms/v2.js"
|
|
||||||
/>
|
|
||||||
{/* Hotjar Analytics */}
|
|
||||||
<Script
|
|
||||||
id="hotjar-script-loader"
|
|
||||||
strategy="afterInteractive"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: `
|
|
||||||
(function(h,o,t,j,a,r){
|
|
||||||
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
|
|
||||||
h._hjSettings={hjid:2774127,hjsv:6};
|
|
||||||
a=o.getElementsByTagName('head')[0];
|
|
||||||
r=o.createElement('script');r.async=1;
|
|
||||||
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
|
|
||||||
a.appendChild(r);
|
|
||||||
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Script
|
|
||||||
id="twitter-campain-pixelcode"
|
|
||||||
strategy="afterInteractive"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: `
|
|
||||||
!function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
|
|
||||||
},s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='https://static.ads-twitter.com/uwt.js',
|
|
||||||
a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
|
|
||||||
twq('config','obtp4');
|
|
||||||
`,
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user