Next.js Discord

Discord Forum

NextJS Google Analytics

Unanswered
Varun posted this in #help-forum
Open in Discord
VarunOP
Im following the tutorial in the picture (https://www.mohammadfaisal.dev/blog/add-google-analytics-to-nextjs) to add google analytics to my proj. But when I add the above code, I get
null
Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component
My project doesn't have an app.tsx and I am putting the code snippet in my outtermost layout.tsx. Any ideas?

39 Replies

VarunOP
yea I did
Cannot find module '@next/third-parties//google' or its corresponding type declarations.ts(2307)
i found this issue and the fix was to use /dist
but GoogleAnalytics isnt part of that
@Varun but GoogleAnalytics isnt part of that
Ray
hmm let me try
what version of next are you using?
VarunOP
        "next": "^13.4.4",
my repo is forked from here
Ray
maybe this is the reason GoogleAnalytics is not available
@Varun https://github.com/cruip/open-react-template
Ray
does GoogleTagManager work for you?
VarunOP
yea it does
Ray
cool you can try it
VarunOP
when i switch the path to /dist
import './css/style.css'

import { Inter, Architects_Daughter } from 'next/font/google'
import Document, { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script'

import Header from '@/components/ui/header'
import Banner from '@/components/banner'
import { UserProvider } from './contexts/UserContext'
import { GoogleTagManager } from '@next/third-parties/dist/google'
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap'
})

const architects_daughter = Architects_Daughter({
  subsets: ['latin'],
  variable: '--font-architects-daughter',
  weight: '400',
  display: 'swap'
})

export const metadata = {
  title: 'TunedIn',
  description: 'Personalized Audio Bytes',
  icons: {
    icon: '/images/logo3.png'
  }
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (

    <html lang="en">
      
      <Head>  
        <title>Welcome!</title>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <body className={`${inter.variable} ${architects_daughter.variable} font-inter antialiased bg-gray-900 text-gray-200 tracking-tight`}>
        <div className="flex flex-col min-h-screen overflow-hidden">
          {children}
        </div>
        <GoogleTagManager gtmId="id" />

      </body>
    </html>
  )
}
oh nvm
now its the same error as b4
VarunOP
Cannot find module '@next/third-parties/google' or its corresponding type declarations.ts(2307)
is this fixable?
oh i think i got it
thanks!
      "@next/third-parties/google": [ "./node_modules/@next/third-parties/dist/google" ],
i added this as a path in my tsconfig
Ray
@Grass Carrying Wasp You could enable partytown by putting this to next.config.js
 experimental: {
    nextScriptWorkers: true,
 }
Grass Carrying Wasp
didnt realize i was in a specific topic.. i'll check it out tho
looks like google anaytics isnt there until 14.0.5-canary
@Grass Carrying Wasp looks like google anaytics isnt there until 14.0.5-canary
Ray
you could also use <GoogleTagManager />
@Ray you could also use `<GoogleTagManager />`
Grass Carrying Wasp
probably not worth switching for such a small move, is it
never worked with GTMEvents before
maybe better to just wait 1 version