diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 7bee6c352..75f03f241 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -2,6 +2,7 @@ import { Lato, Noto_Serif_JP } from 'next/font/google';
 import localFont from 'next/font/local';
 import { ReactNode, Suspense } from 'react';
 
+import { GoogleProvider } from 'app/context/google-provider';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
 import { NextIntlClientProvider } from 'next-intl';
 import { notFound } from 'next/navigation';
@@ -87,6 +88,8 @@ export default async function RootLayout({
     notFound();
   }
 
+  const shouldTrack = process.env.NODE_ENV === 'production';
+
   return (
     <html
       lang={params.locale}
@@ -94,9 +97,11 @@ export default async function RootLayout({
     >
       <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
         <NextIntlClientProvider locale={params?.locale} messages={messages}>
-          <Suspense>
-            <main>{children}</main>
-          </Suspense>
+          <GoogleProvider isShowing={shouldTrack}>
+            <Suspense>
+              <main>{children}</main>
+            </Suspense>
+          </GoogleProvider>
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/app/context/google-provider.tsx b/app/context/google-provider.tsx
index da0947417..4b2c5c77a 100644
--- a/app/context/google-provider.tsx
+++ b/app/context/google-provider.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import { FunctionComponent, useEffect } from 'react';
 
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import ReactGA from 'react-ga';
 import TagManager from 'react-gtm-module';
 
