How to Add Google Analytics 4 (GA4) in Next.js 14 (GDPR opt-in Cookie Banner)

[@codewithmoses]

Honestly I was looking for this so long. Thanks for sharing.

[@mafterr11]

First to make a tutorial about this properly..finally

[@MaxRohowsky]

haha yes, this was also my thought

[@mafterr11]

@@MaxRohowsky was struggling with the cookie banner, not gonna lie... and nothing online.

[@talakolavijaykumarreddy1843]

Not first actually the same video as made by @Ryan Gaudion way earlier

[@brazilian_orthodox]

Thank you! Finally a good tutorial on the subject. Earned a sub.

[@MaxRohowsky]

haha I share the frustration. There really wasnt any good video out there. :D

[@mzafarr]

Amazing video, just wanted to confirm does the GoogleAnalytics component provided in next/thirdparties not doing everything? are somethings missing?

[@BhargPatel-z9c]

But script is not updating from "denied" to "granted". did you checked it?

[@romanm9638]

Like, subscribe!

[@MaxRohowsky]

Thanks for the sub!

[@hotelcolonialfoz]

How to do it with GTM?

[@sergiigulaga1486]

I am not sure is good idea to embedded code without @next/third-parties/google . Your perfomance page can be low down.

[@MaxRohowsky]

Interesting... didn't think that would be an issue...

[@awais_ansarii]

❤

[@KaiWollherr]

Hi there, is there anyone who had the same issue? I cant set my buttons to true or false with this approach. setCookieConsent(false)}> Ablehnen setCookieConsent(true)}> Erlauben Initially its set to null like in the tutorial. Now it tells me that its not possible to set it to true or false. Argument of type 'false' is not assignable to parameter of type 'SetStateAction'.ts(2345)

[@MaxRohowsky]

Hi Kai, this typescript error happens when you try to set a boolean value to something that only accepts null. Change the code to useState(null).