Introduction In this blog post, we'll go through how to set up Next.JS with Google Analytics using the latest versions (Next.JS 11 and Google Analytics 4). As part of Next.JS 11, the new Script Component was added, to automatically prioritize loadin...

Markdown supported · ⌘↵ to post
For some reason I got the following error :
Unhandled Runtime Error SyntaxError: Invalid or unexpected token
I had to change the code to :
<Script strategy="lazyOnload">{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config','${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}');
`}
</Script>
to fix the error. I could have said that your code has an issue but then your video did not show any issues.
Hey Jarrod Wattsthanks very much for this. A question, is this the same as setting up google tag manager or that is a different thing?
Nice article Jarrod Watts, thanks. Quick Note: I think the XXXXXXXXXX in the gtag('config', ... line also needs to be prefixed with G- making it G-XXXXXXXXXX. Thanks.
Great article you reminded me that I have not checked the analytics for my website in a very long time. I imagine I have a lot more traffic now that I am more active in the community.
offline
Hey, I was getting a compilation error with this because
Scriptrequires an id. So after giving it an id, everything worked. Putting this here, if that helps anyone.But even doing so, I get undefined when typing
dataLayerin Dev tools. So I'm kinda stuck ATM.edit: FIXED the issue. If anyone is having similar issues, follow these instructions:
Scriptany id string value.afterInteractiveinstead oflazyOnLoad