diff --git a/website/package.json b/website/package.json index 2bcfac10e..6f457b9d1 100644 --- a/website/package.json +++ b/website/package.json @@ -15,6 +15,7 @@ "@mdx-js/loader": "^3.0.1", "@mdx-js/react": "^3.0.1", "@next/mdx": "~14.2.3", + "@next/third-parties": "^14.2.3", "@types/mdx": "^2.0.11", "@types/mixpanel-browser": "^2.49.0", "@types/node": "20.12.7", @@ -27,6 +28,7 @@ "flowbite": "^2.3.0", "flowbite-react": "^0.9.0", "framer-motion": "^11.2.4", + "google": "link:@next/third-parties/google", "highlight.js": "^11.9.0", "md5": "^2.3.0", "mixpanel-browser": "^2.50.0", diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml index ca1d96343..d5c587ac8 100644 --- a/website/pnpm-lock.yaml +++ b/website/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@next/mdx': specifier: ~14.2.3 version: 14.2.3(@mdx-js/loader@3.0.1(webpack@5.90.3))(@mdx-js/react@3.0.1(@types/react@18.2.73)(react@18.2.0)) + '@next/third-parties': + specifier: ^14.2.3 + version: 14.2.3(next@14.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0) '@types/mdx': specifier: ^2.0.11 version: 2.0.11 @@ -56,6 +59,9 @@ importers: framer-motion: specifier: ^11.2.4 version: 11.2.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + google: + specifier: link:@next/third-parties/google + version: link:@next/third-parties/google highlight.js: specifier: ^11.9.0 version: 11.9.0 @@ -356,6 +362,12 @@ packages: cpu: [x64] os: [win32] + '@next/third-parties@14.2.3': + resolution: {integrity: sha512-j4E2xBSsEZq4VX2pVm3LpGltSwCxETic6glJWfHyYQvpoMdplCAYrQKpF+E9Gg3jfsrfmRAIdTE11m+biBCx1Q==} + peerDependencies: + next: ^13.0.0 || ^14.0.0 + react: ^18.2.0 + '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -1724,6 +1736,9 @@ packages: thenify@3.3.1: resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} + third-party-capital@1.0.20: + resolution: {integrity: sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==} + to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -2094,6 +2109,12 @@ snapshots: '@next/swc-win32-x64-msvc@14.1.3': optional: true + '@next/third-parties@14.2.3(next@14.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)': + dependencies: + next: 14.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + react: 18.2.0 + third-party-capital: 1.0.20 + '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -3875,6 +3896,8 @@ snapshots: dependencies: any-promise: 1.3.0 + third-party-capital@1.0.20: {} + to-regex-range@5.0.1: dependencies: is-number: 7.0.0 diff --git a/website/src/components/Providers/index.jsx b/website/src/components/Providers/index.jsx index 9231d5b65..67d0605e1 100644 --- a/website/src/components/Providers/index.jsx +++ b/website/src/components/Providers/index.jsx @@ -1,6 +1,7 @@ "use client"; import { MixpanelProvider } from "react-mixpanel-browser"; import { HubspotProvider } from "next-hubspot"; +import { GoogleAnalytics } from '@next/third-parties/google'; export default function Provider({ children }) { const token = process.env.NODE_ENV == "development" ? "313bdddc66b911f4afeb2c3242a78113" : "b0ab1d66424a27555ed45a27a4fd0cd2"; @@ -9,6 +10,7 @@ export default function Provider({ children }) { return ( {children} + ); } diff --git a/website/src/components/RootLayout/index.tsx b/website/src/components/RootLayout/index.tsx index 7d9410624..36baee742 100644 --- a/website/src/components/RootLayout/index.tsx +++ b/website/src/components/RootLayout/index.tsx @@ -88,27 +88,6 @@ function GoogleAds() { const trackingId = process.env.NODE_ENV == "development" ? null : "AW-16577398140"; useEffect(() => { - (window as any).dataLayer = (window as any).dataLayer || []; - const gtag: (...args: any[]) => void = (...args) => { - (window as any).dataLayer.push(args); - }; - - const addGoogleScript = () => { - if (!trackingId) return; - - const scriptTag = document.createElement('script'); - scriptTag.src = `https://www.googletagmanager.com/gtag/js?id=${trackingId}`; - scriptTag.async = true; - document.head.appendChild(scriptTag); - - scriptTag.onload = () => { - gtag('js', new Date()); - gtag('config', trackingId); - }; - }; - - addGoogleScript(); - const handleMessage = (event: MessageEvent) => { if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') { const formData: HubSpotSubmittedFormData = event.data.data; @@ -117,10 +96,15 @@ function GoogleAds() { return; } - gtag('event', 'conversion', { + const callback = function () { + return; + }; + + (window as any).gtag('event', 'conversion', { 'send_to': 'AW-16577398140/1wX_CNmzg7MZEPyK3OA9', 'value': Number(formData.submissionValues['0-2/numberofemployees']) * 5, 'currency': 'USD', + 'event_callback': callback }); } };