#NextJS Google Analytics

40 messages · Page 1 of 1 (latest)

woven torrent
#

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?

image.png
Mohammad Faisal's Blog
Add Google Analytics with NextJS | Mohammad Faisal

How we can integrate google analytics into a NextJS application easily. Google analytics in NextJS will help us to track the growth of our website.

React Class component rendered in a Server Component
sleek mangoBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

stiff jay
woven torrent
#

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

stiff jay
#

what version of next are you using?

woven torrent
#

my repo is forked from here

stiff jay
#

maybe this is the reason GoogleAnalytics is not available

image.png
stiff jay
woven torrent
#

yea it does

stiff jay
#

cool you can try it

woven torrent
#

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

stiff jay
woven torrent
#

Cannot find module '@next/third-parties/google' or its corresponding type declarations.ts(2307)

#

is this fixable?

#

oh i think i got it

#

thanks!

#

i added this as a path in my tsconfig

stiff jay
#

@split shuttle You could enable partytown by putting this to next.config.js

 experimental: {
    nextScriptWorkers: true,
 }
split shuttle
#

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

stiff jay
split shuttle
#

never worked with GTMEvents before