Switched to use next/thirdparties for google gtag as recommended by n…

…ext (#143) * Switched to use next/thirdparties for google gtag as recommended by next * Fix link on mobile, and missing txt
Kodeworks · Aug 13, 2024 · 4ffc092 · 4ffc092
1 parent 651f373
commit 4ffc092
Show file tree

Hide file tree

Showing 9 changed files with 377 additions and 463 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@next/third-parties": "^14.2.5",
     "@portabletext/react": "^2.0.2",
     "@sanity/client": "^5.2.2",
     "@sanity/image-url": "^1.0.2",

diff --git a/web/public/index.html b/web/public/index.html
@@ -19,18 +19,6 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-FLXYDD6Z0S"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'G-FLXYDD6Z0S');
-    </script>
-
-
     <title>KodeWorks</title>
   </head>
   <body>

diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next';
+import { GoogleAnalytics } from '@next/third-parties/google'
 
 export const metadata: Metadata = {
   title: 'KodeWorks',
@@ -11,6 +12,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body>{children}</body>
+      <GoogleAnalytics gaId="G-FLXYDD6Z0S" />
     </html>
   );
 }
diff --git a/web/src/components/HomePage/Services/index.tsx b/web/src/components/HomePage/Services/index.tsx
@@ -6,9 +6,9 @@ const Services = () => {
     <div className="flex flex-col">
       <h2 className="section-title">Våre tjenester</h2>
       <div className="hidden md:flex flex-row space-x-8">
-        {serviceAlternatives.map((service) => (
+        {serviceAlternatives.map((service, index) => (
           <article
-            key={service.title}
+            key={index}
             className="flex flex-col w-1/3 items-start gap-2"
           >
             <img
@@ -33,9 +33,10 @@ const Services = () => {
       <div className="md:hidden flex items-center justify-between w-full overflow-x-scroll">
         <div className="flex gap-6">
           {serviceAlternatives.map((service, index) => (
-            <div
-              key={service.title}
-              className="snap-start flex-shrink-0 w-4/5 max-w-xs"
+            <Link
+              href={`/tjenester/${service.slug}`}
+              key={index}
+              className="snap-start flex-shrink-0 w-4/5 max-w-xs no-underline"
             >
               <img
                 className="w-full"
@@ -44,7 +45,7 @@ const Services = () => {
               />
               <h3 className="text-base">{service.title}</h3>
               <p className="text-sm">{service.text}</p>
-            </div>
+            </Link>
           ))}
         </div>
       </div>

diff --git a/web/src/components/useGtag.tsx b/web/src/components/useGtag.tsx
@@ -18,7 +18,7 @@ const useGtag = () => {
         }, 2000);
       }
     }
-  }, []);
+  });
 
   // Check if window exists, so it only runs on client side
   function gtag(...args: any[]) {

diff --git a/web/src/constants/serviceAlternatives.ts b/web/src/constants/serviceAlternatives.ts
@@ -47,7 +47,7 @@ export const serviceAlternatives = [
         ],
     },
     {
-        tititlettel: 'AI',
+        title: 'AI',
         slug: 'ai',
         text: 'KodeWorks hjelper deg med å implementere AI agenter som effektiviserer din bedrift, og gjør det lettere for deg å fokusere.',
         picture: '/static/photos/tjenester/kodeworks-tjenester2.png',

diff --git a/web/src/pages/_app.tsx b/web/src/pages/_app.tsx
@@ -13,7 +13,6 @@ import '../styles/kw.css';
 import { useTranslation } from '../utils/useTranslation';
 import Footer from '../components/Footer';
 import ContactSection from '../components/HomePage/ContactSection';
-// import useGtag from '../components/useGtag';´
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ const useGtag = () => { @@
             }, 2000);
           }
         }
-      }, []);
+      });
       // Check if window exists, so it only runs on client side
       function gtag(...args: any[]) {
@@ Expand Down @@