I’m encountering issues with setting up Google Analytics in my React/Next.js application. I’ve created a GoogleAnalytics
component as follows:
// GoogleAnalytics.tsx
import Script from "next/script";
const GoogleAnalytics = () => {
return (
<>
<Script
src={`https://www.googletagmanager.com/gtag/js?id=G-SMWF3K8CDQ`}
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SMWF3K8CDQ');
`}
</Script>
</>
);
};
export default GoogleAnalytics;
This component is imported and used in my layout.tsx
file like this:
// layout.tsx
import React from "react";
import Head from "next/head";
import "./css/style.css";
import Analytics from "@/components/Analytics";
import { Inter } from "next/font/google";
import Header from "@/components/ui/header";
import Banner from "@/components/banner";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
display: "swap",
});
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<Head>
<Analytics /> {/* Use the Analytics component inside the Head component */}
</Head>
<body
className={`${inter.variable} font-inter antialiased bg-white text-gray-900 tracking-tight`}
>
<div className="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
<Header />
{children}
<Banner />
</div>
</body>
</html>
);
}
When I use the Google Tag Assistant to check for the tag while running the app in development mode on localhost, it doesn’t detect anything.
Questions:
- Have I configured the Google Analytics script integration correctly in a React/Next.js environment?
- Is there a specific setup or modification required for Google Analytics to work correctly on localhost or in development mode?
- Are there known issues or additional steps I should be aware of for integrating Google Analytics with Next.js?
I appreciate any insights or suggestions to resolve this issue.