How To Set Up Google Analytics With Next.JS (Using Next.JS Script Component)

Learn how to set up Google Analytics in Next.JS using Next.JS 11's Script Component! In this quick tutorial, we'll go through the best way to set up a Next.JS project with Google Analytics, using the new 'lazyOnLoad' flag for Next.JS Script Components.

👇 Grab the source code here 👇

Throughout this video, we'll go through how to best set up Next.JS with Google Analytics using the latest versions (Next.JS 11 and Google Analytics 4).

Check out my other socials!

[BassRadian]

I had a few issue, here is how to fix them if you have them too!

I found strategy="lazyOnLoad" was a little TOO lazy and wouldn't load at all, I changed it to strategy="afterInteractive" and It worked. Also, I'm not sure if this is just nextjs 12 but it also wanted me to add an Id so I added a unique id such as id="Analytics number 1" id="Analytics number 2" along with strategy and src to both scripts

Thank you. This tutorial is compact and awesome!

[mmlnv]

Implemented, works, and did not cause any problems with performance. Thank you

[derelicts]

Really appreciate this, quick and to the point, giving some fundamental functionality that we can build on further!

[codingwithdidem]

FINALLY A VIDEO WHICH TELLS HOW GTM REALLY WORKS

[abe]

That's pretty cool. Short and on point.

[hassaniyouness]

Rebuilding my portfolio with Nextjs and willing to integrate GA thanks man

[cag]

super helpful and to the point! thanks!

[alexhaag]

Thank you... Thank you.... Thank you ... Jarrod! Gratitude.

[MrBiixx]

Really succinct video and excellent use of ENVs to secure our application :)

[pedrodimarco]

Great video sir, just was i was looking for

[realavx]

Thank you!
How to set up GoogleAdsense code with the Next JS script component?

[ICOReviewtoken]

I want to get information from API such as page view, realtime active, what should I do? Old tutorials use Next/Route but in nextjs 13 useRouter is imported from Next/Navigation

[KrisGunnars]

I think this implementation is incomplete, it is not tracking page changes. When I navigate to another page, the title changes according to realtime analytics but the new URL is not shown.

[meldinradoncic]

Why I am getting red underline under arguments? I cannot fix that Syntaxerror. Any suggestions please?

[djelasrca]

I did the same thing and in my data layer it shows config but it doesnt show events and analytics dashboard doesnt show anything

[odev]

I'm with a problem with this method ... it dispatches pageview just once when page is loaded ... using next router when it calls pageview it dispatches "gtm.historyChange-v2" but looking to GA it is not triggering page change there. I found some discussions about including use react-ga but I would like to solve using this method here . Do you know anything about it?

[ascourter]

Do you also need to put up a privacy policy if you add GA?

[codedusting]

Google tag manager vs this approach, which is better? Also, what's the point of stream if it's working in localhost?

[louinissen-petersen]

Great video, can u show how to use events with typescript?