Make Google Ads conversions work

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",

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

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 (
     <MixpanelProvider token={token} config={{ api_host: host, record_sessions_percent: 5 }}>
       <HubspotProvider>{children}</HubspotProvider>
+      <GoogleAnalytics gaId="AW-16577398140" />
     </MixpanelProvider>
   );
 }

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
         });
       }
     };