Awesome video, gave me a better understanding of Google Analytics. Looking forward for those extra material of changing consent and asking in 6 months times. Thank you for the work! Keep it up.
Hey Ryan, its recommended to use GTM these days, are you familiar with it and how can we do with that, a follow up video to this would perhaps complete the whole analytics implementation because yours is quite a well documented video compared to others on youtube. Thanks.
Very helpful tutorial. However, I'm running into the issue that localStorage updates fine if I press Decline or Accept, but Gtag doesn't refetch (i.e. I only see the initial Collect request with G1-0, when I then click accept and update localstorage it does not actually refetch to update the new consent)
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
Can anyone explain me one thing(could be a silly thing which i am not able to understand) so here: const [cookieConsent, setCookieConsent] = useState(false) we have setted cookieConsent default value to false, and here ${ cookieConsent !== null ? "hidden" : "flex" } px-3 md:px-4 py-3 justify-between items-center flex-col sm:flex-row gap-4 bg-gray-700 rounded-lg shadow`} we have put a condition that if the cookieConsent is null then only show the cookie banner but here cookie consent will never be null because the default value is false no? help me with this anyone please
hi, i found a bug on the result of static rendering, it's produce id="__next_error__" and failed to generate static page. the cause of this bug is because we use useSearchParams on this goole analytics component , from next.js docs: "If a route is statically rendered, calling useSearchParams() will cause the tree up to the closest Suspense boundary to be client-side rendered." So we need wrap component with
still getting the error after adding suspense, what should i do and what should the fallback be knowing that it will be injected in the tag and not inside the tag which is shown in the layout.tsx
hi, sorry, i think this code shoulde useState( getLocalStorage("cookie_consent", null) ) not useState(false) const [cookieConsent, setCookieConsent] = useState(false); useState(false) on this line of code means that the user already decline the cookie and make cookie banner not show useState( getLocalStorage("cookie_consent", null) ) make default value is null if user not decide decline or accept cookies cmiiw, thanks for this tutorials, it's really helpful to me
How can we detect all the cookies (not only GA) and create a consent banner to choose which ones to keep and which ones to delete. Im willing to pay for a course about this.
Hey Ryan, Thanks for this. Im using NextJS 13.5 with supabase. Im creating a hobby project to understand how things work in web dev. Right now, Im at analytics stage, I have a doubt around them. 1. Calculating the views and incoming traffic on my website and how many signed up. This one seems fairly easily and tutorials are available so I understand. However, 2. Since I have users and their profile specific dashboard, I want my users to see as well how many people or visits my users had, and since linktree style, how many times each button was click. Now I dont want just anyone to see any others, but only the user can see their analytic insight from how many profile page visits they had and the buttons/links clicked on their profile page. Do you think #2 its possible with google analytics? If so, can you briefly guide me to the right direction? Thanks!
I needed envolve Cookie Banner in body and Google Analytics in head with suspense , there is some other configuration without use searchparams ? I new in nextjs and this take some time to resolve kkkkk 😵💫
@@aristotelispallasidis I'm not actually sure but, in the beginning, I used wrapper around my . I also turned off Strictmode because it made my banner always show due to the useeffect always running twice and making the local storage set to faulty value. My URL doesn't use searchparams as well.
Thank you for your video. I have a question regarding an issue I'm experiencing. Although I have successfully added OpenGraph metadata to my website, it seems to conflict with the GoogleAnalytics component. I would like to know if you have any insights into what might be causing this problem and how to resolve it?
This is a known bug and can be resolved by wrapping your Analytics components in the root layout with a Suspense. Hopefully Next.js fix soon: github.com/vercel/next.js/issues/48442#issuecomment-1519139562
@@RyanGaudion After wrapping the Analytics component, a new error, 'TypeError: window.gtag is not a function,' occurs in the CookieBanner. This issue only arises when I use suspense. Do you have any idea why?
🔗 For more details, check out the accompanying blog post: gaudion.dev/blog/setup-google-analytics-with-gdpr-compliant-cookie-consent-in-nextjs13
Awesome video, gave me a better understanding of Google Analytics. Looking forward for those extra material of changing consent and asking in 6 months times. Thank you for the work! Keep it up.
Great video, thanks for sharing
Thanks for watching!
Thanks for watching!
I love the video, It has helped me.
If @joshtriedcoding likes it, then you've earned my subscription.❤❤
Amazing video. Clear to the point and helpful. Thank you so much!
Hands down best youtube tutorial I have experienced
thanks a lot for making this. 👍👍 looking forward to more Next13 vids.
Glad you liked it! New content coming soon 🤞
Hey Ryan, its recommended to use GTM these days, are you familiar with it and how can we do with that, a follow up video to this would perhaps complete the whole analytics implementation because yours is quite a well documented video compared to others on youtube. Thanks.
Very helpful tutorial. However, I'm running into the issue that localStorage updates fine if I press Decline or Accept, but Gtag doesn't refetch (i.e. I only see the initial Collect request with G1-0, when I then click accept and update localstorage it does not actually refetch to update the new consent)
Commenting for the algo. Helped!
Thank you! It is exactly what I was looking for!
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
Can anyone explain me one thing(could be a silly thing which i am not able to understand)
so here:
const [cookieConsent, setCookieConsent] = useState(false)
we have setted cookieConsent default value to false, and here
${
cookieConsent !== null ? "hidden" : "flex"
} px-3 md:px-4 py-3 justify-between items-center flex-col sm:flex-row gap-4
bg-gray-700 rounded-lg shadow`}
we have put a condition that if the cookieConsent is null then only show the cookie banner but here cookie consent will never be null because the default value is false no?
help me with this anyone please
Change this line your code will work fine
const [cookieConsent, setCookieConsent] = useState(getLocalStorage("cookie_consent", false));
Anyone else always getting cookie_consent false and CookieBanner not re rendering using this code ?
dude this video saved me thanks so much
hi, i found a bug on the result of static rendering, it's produce id="__next_error__" and failed to generate static page. the cause of this bug is because we use useSearchParams on this goole analytics component , from next.js docs: "If a route is statically rendered, calling useSearchParams() will cause the tree up to the closest Suspense boundary to be client-side rendered." So we need wrap component with
still getting the error after adding suspense, what should i do and what should the fallback be knowing that it will be injected in the tag and not inside the tag which is shown in the layout.tsx
@@abed.shaaban what kind of error, is it __next-error__ like above?
@@basith237 warn Entire page /.../[slug] deopted into client-side rendering.
Excellent tutorial. Thank you so much.
Thank you for sharing, helped me huge!
thanks for an amazing blog on remote mdx in next js 😘
hi, sorry, i think this code shoulde useState(
getLocalStorage("cookie_consent", null)
) not useState(false)
const [cookieConsent, setCookieConsent] = useState(false);
useState(false) on this line of code means that the user already decline the cookie and make cookie banner not show
useState(
getLocalStorage("cookie_consent", null)
) make default value is null if user not decide decline or accept cookies
cmiiw, thanks for this tutorials, it's really helpful to me
sure, I will try this in my implementation, lets see
doing so will cause an error on the server.
if you initiate with false, it's not work in development mode but it will work well in production
Hi, I don't know if you could help me, when I build the application the SSR is lost due to the GA integration. Could you help me?
Hey Omar, check out the pinned comment - this is a known bug in Next.js but can be fixed with a Suspense boundary
Saved my day thank you for the video, helped alot 🙂
How can we detect all the cookies (not only GA) and create a consent banner to choose which ones to keep and which ones to delete. Im willing to pay for a course about this.
Yes! I want to know it too!
Hey Ryan, Thanks for this. Im using NextJS 13.5 with supabase. Im creating a hobby project to understand how things work in web dev. Right now, Im at analytics stage, I have a doubt around them.
1. Calculating the views and incoming traffic on my website and how many signed up. This one seems fairly easily and tutorials are available so I understand. However,
2. Since I have users and their profile specific dashboard, I want my users to see as well how many people or visits my users had, and since linktree style, how many times each button was click. Now I dont want just anyone to see any others, but only the user can see their analytic insight from how many profile page visits they had and the buttons/links clicked on their profile page.
Do you think #2 its possible with google analytics? If so, can you briefly guide me to the right direction? Thanks!
I needed envolve Cookie Banner in body and Google Analytics in head with suspense , there is some other configuration without use searchparams ? I new in nextjs and this take some time to resolve kkkkk 😵💫
How to get the _ga client id from the cookie in NextJS 13?
where the null come from
I receive url is not defined error message
My program fails due to it says that window.gtag is not a function. do you hava a solution for this? Im using next14.0.3
Managed to fix it.
@@LukasWeijl How?
@@aristotelispallasidis I'm not actually sure but, in the beginning, I used wrapper around my . I also turned off Strictmode because it made my banner always show due to the useeffect always running twice and making the local storage set to faulty value. My URL doesn't use searchparams as well.
Check these things otherwise, it might be something else as well. Check your Node version to see if that is your fault.
Well done! Fantastic tutorial. I'm curious what percentage of users deny cookies...
great job, thanks for the vid!
Thank you for your video. I have a question regarding an issue I'm experiencing. Although I have successfully added OpenGraph metadata to my website, it seems to conflict with the GoogleAnalytics component. I would like to know if you have any insights into what might be causing this problem and how to resolve it?
This is a known bug and can be resolved by wrapping your Analytics components in the root layout with a Suspense. Hopefully Next.js fix soon: github.com/vercel/next.js/issues/48442#issuecomment-1519139562
@@RyanGaudion Thank you! It was a straightforward fix. I appreciate your help.
@@RyanGaudion After wrapping the Analytics component, a new error, 'TypeError: window.gtag is not a function,' occurs in the CookieBanner. This issue only arises when I use suspense. Do you have any idea why?
I cant see collect message in network tab
Same
@@nerd_abroad ad blocker in your browser
@@djelasrca8091 Thanks! Also my pageviews are being double counted. Any idea why?
No clue.
@@nerd_abroad useeffect runs twice because of in dev env. It does not happen in the production build
Thanks 🎉
Really helpful 🙌
thanks!
Super helpful!
Awesome bro
More cookie please