📊 google analytics with next.js

@bradgarropy/next-google-analytics
github.com/bra...
Blog Post
bradgarropy.co...
Google Analytics
analytics.goog...
------------------------------------------------------------------
🏠 bradgarropy.com
👕 bradgarropy.co...
💜 bradgarropy.co...
💬 bradgarropy.co...
💻 github.com/bra...
🐦 / bradgarropy
📷 / bradgarropy
📧 [e-mail]

[@jonathanjohnson2785]

THANKS so much Brad. Really cleared up a lot of confusion regarding adding analytics to single page applications. Clear and to the point. One more subscriber 👍

[@internetdrew]

Good lookin out on this. This is exactly what I was looking for.

[@thenetknight]

Huge thanks Brad!

[@uswanadeem5628]

Thank you so much. I'm watching your video and I complete my task.

[@mehdijafarzade2381]

Awesome bro

[@igboanugwocollins4452]

Comprehensive video... your package is awesome as well

[@thecodingcanuck]

Thanks for the video bud, it worked great!

[@arturor.cabrera4848]

Great video, exactly what I needed to implement!

[@james-perkins]

Nice video Brad, one piece of advice zoom in a bit when on browsing the web, Watched this on my phone and it’s hard to see

[@bradgarropy]

Did not think about the mobile viewing experience, great feedback man! Thanks!

[@james-perkins]

​ @null space calling me lazy? Someone who also produces tutorial content for KZbin. Who knows Brad outside of KZbin. Knowing that a large percent of users will code along using a phone or tablet or watch on mobile devices. In fact, currently 3/5 people watch KZbin on a phone.I imagine that stat is important to content creators. I'm neither lazy nor a passive learner... but you know best.

[@bradgarropy]

@null space I wasn't just being nice, anything I can do to increase accessibility and reach of my videos, without negatively affecting current viewers is welcomed advice!

[@appstuff6565]

Hi again Brad, we had a chat about 2 months ago, thanks for that, and again back to this video, thanks for this video. --- 1. Advanced: I am stuck in a dilemma, perhaps a basic guidance or suggestion from an expert such as you might help. My Tech Stack: NextJS 13.5 with Supabase. I have a link aggregation clone like linktree, since its a learning hobbyist project, where each user has its unique user profile and multiple links. Similar to linktree style. Everything works as is. The next stage of my project is Analytics: 1. I need to show the logged in user how many page visits his page has 2. how many times a link/button was clicked on his page. For this, i planned to do diy, but in case if there are heavy requests I fear my db wont be able to handle so I plan to use something like Google Analytics. Now, Im familiar with the basic integration for my project/web-app and to see how many visitors visited my project/web-app. What I want to undertand is to show my logged in users the data about ONLY their profile page without making them go through any hassle and just show them in my webapp dashboard, is it possible to do so? Each user can see their analytics through google analytics in my web app itself. How do i tackle this? Is it a viable method with GA or should I DIY? Thanks for your time. --- 2. Simple: Another thing is would you be anytime in the near future, be doing a follow up video to do GTMs with GA along with consent cookie as within the new NextJS app router approach as well?

[@cesarcoloradocaceres842]

So good! Thanks so much. From Perú

[@rkcoder]

Awesome, earned yourself a new subscriber!

[@grizzlyabe]

wow the best video, straight to the point! kudos!!

[@talalmughal3472]

Thanks bro, you saved my day. And it is as you said, some of them are incorrect out there, even still.

[@amirghafoor5305]

Thank you, man. amazing video 🥰🥰

[@tonyjaradev]

Thanks Brad!

[@suresranathunga]

Thank u

[@jasonzamora3618]

Thank you, Brad

[@VineetDev]

Thank you

[@shivanibansal5657]

Hi, thanks for the video. I followed step by step but I do not see the history change event. How can I resolve that?

[@bradgarropy]

Do you have an example repository or live website where I can poke around?

[@eab4984]

I am using Next's new app router. Do I add the scripts to Layout.tsx in the root /app directory? I did this but window.dataLayer doesn't change, i.e. the history change doesn't get added to window.dataLayer when I change pages. How can this be solved?

[@dem0680]

thnx. amazing video

[@minc33]

this worked thanks so much!

[@esakib]

Great explaination sir

[@domy667]

thanks mate!

[@uswanadeem5628]

Sir can you please make videos on ,, user click on a button or filled a form in next J's

[@anuroopmallick9784]

Thnkyou you so much.

[@eu.danilogomes]

Thanks, you solved my problem.

[@karimelnemr8610]

Still that is very helpful, thank you so much for making it easy :)

[@sudoSayak]

Tried to implement this. google analytics debugger extension shows the data, unable to see this in google analytics dashboard

[@bradgarropy]

I've never used that extension. Check your network tab, are there events being sent successfully? Sometimes it takes the dashboard a minute to refresh.

[@ayodejiatanda6197]

Thank you!

[@lifeiscrazy2146]

Hi Brad !! Can you tell me how to add Google Tag Manager script in react js website

[@wayneswildworld]

You should do a video on adding button tracking goals via google anaytics with nextJS

[@bradgarropy]

I'd have to figure out how to do this, never done it before!

[@wayneswildworld]

@@bradgarropy the way it works on a regular site is you reach out to ads team and the give you a code snippet to add right before the ending body tag.

[@bradgarropy]

😂 Well on this channel I try to teach developers how to do that kind of stuff!

[@sosooficial244]

TOP DUDE, YPU GOT A NEW FOLOWER FROM BRAZUIL

[@jla3445]

my google analytics tag is not being loaded under my head tag, but it is being loaded within the body tag. Is that a problem?

[@bradgarropy]

It's not necessarily a problem, however the higher up in your HTML you put the tag, the more reliable your analytics will be. For example, what if some of the linked JavaScript pulled in from your tag failed to parse? The page would error and you may miss your analytics. Google still officially recommends placing it at the top, or close to the top, of the tag.

[@pixelbakery]

What about page-specific data layers / variables?

[@bradgarropy]

Great question! I've never tracked to that level of specificity, I'd have to do some research.

[@dixztube]

I just stick with vercel mine just cut off out of the blue. No metrics but the tag and data layer events are still there

[@bradgarropy]

You might have implemented Google Analytics v3. They discontinued that, and are now on v4.

[@samc8623]

I did this using your component and initially it worked and I could see it was connected on Google Analytics, but then went back an hour later and it was not receiving data anymore and I checked the network tab and it now says js?id=undefined instead of the management id it previously showed. I never changed anything, so it is a really strange error.

[@bradgarropy]

How are you passing in the MEASUREMENT ID? Are you using an environment variable, or hard coding it? If you're using an environment variable, make sure that it's actually reading it properly. One important thing to note, Next.js requires that you restart the dev server in order to pick up environment changes, so give that a shot!

[@samc8623]

@@bradgarropy Thanks for responding with your help :) I used an environment variable and I don't remember what I did but it seems to work now

[@JaykrushnaDas-v9q]

Hi , I'm trying to install typescript version but not installing. do we have any dependency on typescript ?

[@bradgarropy]

What error are you getting exactly? Check your `package.json` file. Is TypeScript listed as a dependency?

[@iDian23]

Thanks! Very helpful. It was confusing because even in the official example they added a separate function to post a page_view event on route change, but it seems to work just fine with just these 2 scripts. I have a problem with filtering events that come from development though. I created a developer filter and added 'debug_mode': 1 to the config but events still appear in realtime view, even though they appear in debug view too. Any ideas?

[@bradgarropy]

That's precisely why I made this video! The official example is still using Universal Analytics (the old version). There's no need for the route change handlers now! In regards to filtering out localhost, I found this video on how to define "Internal Traffic" for your site. I think it's what you're looking for. kzbin.info/www/bejne/b3SklZmen6psnKM

[@musshare]

How then do you handle this " Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ..... [url from script] ". Because i checked in dev tools and i see that error!

[@bradgarropy]

Would you mind joining my Discord to get more help? I'll need some more information to help understand the issue. bradgarropy.com/discord

[@wayneswildworld]

A slightly (better in my case because I had a context provider messing things up) way to do this is using the next _document.js

[@bradgarropy]

Good callout, my particular example didn't have that dependency.

[@saplearners5575]

Do we need to add history event trigger in GA?

[@bradgarropy]

Based on what I saw, there is no longer a need for that with Next.js v12 and Google Analytics 4. If you happen to be using older versions, then that may be required.

[@skverskk]

Nice tutorial. Unfortunately, the gtag script was blocked in the Network Tab. Using your component. :(

[@bradgarropy]

Do you have a link to the site or repository where this is happening? Do you have a Content Security Policy set somewhere that is blocking it?

[@skverskk]

Hmm. I just decided to run the app on Firefox and, guess what? The gtag returned a 200 return code. So, I guess it's a Chrome issue? ugh

[@appstuff6565]

Thanks for this Brad. This helped me clarify some things. I would like to know a few more things since I understand your way of teaching, whenenver you get the time to address them. So I just coded a NextJS + Supabase for tables. 1. What are my next steps to deploy it? 2.I also would like to know how you do policies if you use the RLS from Supabase. 3. Imagine I have a saas so how can I let the user see his analytics, for eg: if i create a links aggregator something like linktree, and the user uses it, he or she has a few links setup on my nextjs deployed SaaS, how can I let him see his specific analytics, from how many visits his profile/page has to which links were specifically clicked on his page? Thanks!

[@bradgarropy]

Great questions! I probably won't end up making videos on them, but I can link you to some helpful documentation. 1. If your code is hosted on GitHub, you can connect Vercel directly to your repository. (vercel.com/docs/deployments/overview) 2. I have never dove deep into Supabase RLS policies, but the docs might be helpful here. (supabase.com/docs/guides/auth/row-level-security) 3. This is definitely some advanced analytics. You'd probably have to tag each event with user information, then hit the Google Analytics API and filter by those tags later to show your users their custom analytics. I know this is very high level, but I hope it helps!

[@appstuff6565]

yes it is but i understand what you are saying. Thanks Brad!@@bradgarropy

[@DVSK1]

thank you bro, but i have one question.. how can i get the values by google analytics and use on my website to create my personal graphic visual using the data collected?

[@bradgarropy]

The easiest way would be to create a report in Data Studio, and then embed that into your website. Here are two resources on how to create that report, and then share it. support.google.com/analytics/answer/9849873?hl=en support.google.com/datastudio/answer/6287179#zippy=%2Cin-this-article Outside that of that, you'd have to use their API to pull the relevant data and then use a charting library to plot it. That method is a lot more work, but way more customizable. Let me know how it goes!

[@conor909]

I get "ReferenceError: G is not defined"

[@bradgarropy]

That probably means the Google Analytics script is not loading. Check your network tab for any errors.

[@paieu]

you should have told about npm package previously bro haha

[@kyriakosbekas]

Resolved (read below) Hello! I have completed every step and the website seems to be tracked successfully in realtime view. However, I get the following message about the stream I have created "Data collection isn’t active for your website. If you installed tags more than 48 hours ago, make sure they are set up correctly." Does anyone know if the tags need up to 48h to propagate? Because even though the realtime view seems to be showing the users from the last 30', I do not get any results in the reports. Anyhelp is appreciated, thanks in advance! Update: Apparently it is just a Google error. It needs at least 24h for the changes to propagate fully and be recognizable by Google. The next day's reports should correctly depict the "gtag installation" day's traffic

[@bradgarropy]

Did you configure a data stream coming from Web? Sounds like there's an issue with that part of the setup. Also, I would check your Measurement ID and ensure that it's the correct one associated with that stream.

[@kyriakosbekas]

@@bradgarropy Thanks for your quick response. I am positive that all of these steps have been completed correctly. As I said, I can view realtime analytics but on the report tab it shows no visitors to my web stream - so I suppose the stream is set up correctly. I want to add that i also checked the dataLayer in the console and also I hardcoded the Measurement ID (copy/paste) in my script so I imagine that this cannot be the cause I will be sure to edit my comment to give an update on the matter should 48h pass and it is resolved or should I find another solution. Thank you!

[@bradgarropy]

Yep, hang tight and see if data starts flowing soon. Let me know if you find a different solution!

[@kyriakosbekas]

Update: Apparently it is just a Google error. It needs at least 24h for the changes to propagate fully and be recognizable by Google. The next day's reports should correctly depict the "gtag installation" day's traffic

[@jeffreysbrother]

this really helped. however, I do not see any evidence in the dataLayer that it's aware of route changes.

[@bradgarropy]

What version of Next.js are you using? Are you using the app router? The video I made focuses on the old router, and should show route changes in the dataLayer.

[@jeffreysbrother]

@@bradgarropy i have "latest" specified in package.json in package-lock it appears to be 13.4.6