How to add Google Analytics to your React/Next.js app

hi there welcome back to the channel so today I'm going to show you how to add Google analytics to your react or nexgs project the first thing you'll want to do to get to Google analytics like this dashboard so we can see here is to actually create a Google account so you'll need a Gmail account I guess and you can see I've got two and here's kind of the end result I guess so you can see we've got a home page there's reports explore advertising and you can configure these and there's also admin sort of settings as well but what's quite cool is if I go to reports um and you can see this is one that I set up yesterday and just have one um analytical event um triggered but you can see the number of users the new users um it will show countries as well as you start to get more data you can see total revenue if you're um using that with AdSense or ad revenue for example um there's a lot of information that you can gather and yeah what's quite cool is you can set different event types as well and you can see what page or screen they're on if it's a multi-page website and if I go to real time you can actually see how many visitors are on your site at the moment so you can see here we've got zero and if I just go to the website which I've got this set up on which is just my calendar site um so if you didn't already uh self-taught software developer primarily focused on the front end and what I've been doing more recently is helping out sort of Junior and aspiring developers um to get their first Dev job as I did um only sort of in 2020 and then 2021 was then I actually got my first job but yes I put together this small site so you can see it's hosted on um sort of GitHub and here we've got just a calendar link so cal.com Powers this which is really nice open source software uh open source software sorry and then you can see the times that work for me um and you can put your name address additional notes and you can send it off um and we'll both get uh sort of email confirmation but anyway so here's the site itself and now if I go back to the analytics and there we go you can see it's automatically refreshed and we can see there was one user in the last 30 minutes they're on desktop so that was obviously myself you can see where in the world they are based on I guess this is IP address um and yeah you can just start to create more information so you can see it was my first visit it was one page view there was a scrolled and a session start event as well so these are all just I think default events so you can create custom events so for example if I go back to the website um let's say they click on a button you can put um a page event on this or a button click event similar how you would in JavaScript right but instead of just doing something this will fire off the Google analytics event and you'll be able to see it on your dashboard so as I said that's kind of the the goal of obviously what you're looking for hopefully and I'm going to show you how I added this to my next little react project and it's really quite simple so what I'm going to do is go over to this new Google account sort of my old one and it should open up just go to analytics.google.com and I believe as I said you'll need a Google account to start this off um but once you've got that set up you should be able to go to this webpage here and let's just see that should load in a second and it's been a bit slow there we go so cool so we get this here um your home page might look slightly different to me um depending on sort of yeah where you are in the world or time recording but if I click Start measuring let's create this new event so we need to create a new account and I would just give this let's say your name or company name what you can do is it effectively track multiple sites under one account and I currently have two sites that I'm tracking so I'm just going to call this my name here Chris Cooper and you can see accounts can contain more than one tracking ID and the tracking idea is what you add the specific site that you want to track um so you can opt in or opt out of any of these I'm just going to leave these as defaults for now and click next and then here is the property setup so this property represents a business's web and or app data and the account can contain one or more properties so for example if I call this calendar um this will be for our calendar app that we've got under the main account and you can just put in the time zone and currency if you wish as well I'm going to click show Advanced options um and you can see here this is a universal analytics property um I it turned this off to be honest or it is off actually by default so I'm going to leave it like that for now but yeah do have a read through of all of these and then the last thing is just about the business so that helps tailor The Experience so you can select which industry you're in let's say your business size so I'm just going to put let's see computers and electronics I'll put small and what do I want to do I really just want to measure customer engagement with my site or app and you can see there's a bunch of other things um over here as well and then I guess they'll tailor the experience for that but let's click create and just need to agree to the terms and services um it's required by gdpr so you might not have this if you're in the US or elsewhere so the account and the property was created which is great and then all we really want is we want to start collecting data so I'm just going to untick all and save I don't want any emails about this yet and what you can do is probably take the tour but if you're just literally just want to get up and running quickly and you've got a next app or react app that you want to start tracking um just choose the the web platform and you can see we've got Android and iOS apps as well and then you want to put the website URL so for me this is my GitHub link so I've just hosted this on GitHub Pages um which just means you have a public repository um and the the name of it here is the repo name so for example I've got calendar and then that becomes the URL and then if I just call this calendar app like so and here we can then opt in to enhanced measurement um so I'm just going to do that and just leave it you can configure this but let's create what they call a stream so a data Stream So basically the data is going to be coming from our website here so let's do that so we're going to let that load and then here now we can see that data collection isn't active for the website because we'll need a couple of um items so actually we only need one so we just need this measurement ID here um this is the one that I'm going to use and suddenly it's bought over this so what you can do is if you've got you know Squarespace Wix or a WordPress website you can scan the um sort of well they'll scan the URL if it's live and then I guess give you the sort of the code or it might even just get you let you set up through here but I'm going to click install manually and you'll see here this is how we install the Google tag so we've got a script with Google tag manager and then there's the ID for our um our new data stream and then there's also another script which is just pushing you can see here to the data layer which is part of the window object and the configuration ID again is our our tag so I'm just going to copy that like so and that's copy to our clipboard I can close that down here and as I said all we need at the moment is measurement ID so if I go over um oops to our calendar app and this is actually already set up um so just as an example let me pull this out a little bit you'll be able to see here I've got a very simple next.js app um just using some Tailwind as well and that was what you saw at the start of the video but you can see here we've got the script with the Google tag manager and then here is the data layer that's pushing to and all I've done is just change out the hard-coded ID just to a environment variable just because I thought it was a bit nicer and we're obviously reusing the value there so yeah to do that it's a simple template literal string process.env because I've got a DOT EMV file here um and then I've called it next public Google analytics and I believe you need the next public um for next or if you're hosting on perhaps on Versa to expose that environment variable but yeah I think it's just Convention as well at that point and then that's that's all you would need so you can then post that or push it up to GitHub to the repo once that's live on your site um you'll start to see data coming through so it will then start going off and if I go back now and go to home here on this new account we should be able to see um there's obviously no data yet and that that's fine what I'm going to do is just change out the default values um oops from the live ones there we are like so so let me just copy these out oops and sorry I should have mentioned as well actually that this is all within the head document or sorry the head of the page because it's obviously script tags and for this I'm using next head um just in an index file so wherever you'd have your title or other metadata or let's say links this is where you should put the two scripts um and actually I'm going to leave this for now because it's already set up but as I said if I go over to my other platform um we'll be able to see the data coming through as we did earlier and just to confirm how it's working if I inspect this page where I've already got it set up what we should be able to see uh the the Google tag managers and the script tags here and sorry laptop's been a bit slow whilst I'm recording um and have some other stuff going on in the background but if I just control F just to search um let's do Google there we go we can see got Google tag manager the first script and then this one is the window.data layer and we're pushing to that and now actually if I go to the console um and just type in data data layer and hit enter we can see here's all of our information that we've pushed and the GTM is Google tag manager basically so you can see there's some events here already um and yeah that's basically what it's doing and it's collecting it from there as I understand things but that's basically as um I guess a simple implementation if I go back to analytics home we can see here now that if I go back to the real time there'll be one person on the site because I was just on it um so yeah it's quite cool it's quite good to um have a look if you've got live websites hosted on as I said GitHub Pages or Versa or netify or you know anywhere like that um it's cool to sort of track your audience and see where they are where they are in the world what pages they're going on and as I said you can add custom events as well which I'm not going to go into in this video but you can certainly play around with it um add those custom events and all that will be would be an additional event name so that then Google can pick that up and take that name along with the event and then yeah obviously sort of display it on the dashboard so yeah that's kind of all for today you can see it's really quite simple to set up and yeah it makes a big difference when you're trying to track your personal projects or just keep an eye on things and if you ever wonder how many people might go onto your portfolio let's say or another website it's very simple to set up and obviously completely free as well I'm not sure if they're sort of you should usage limits or anything like that but I certainly haven't come across them um but then again my projects have been quite small but anyhow so I hope that helps let me know in the comments below if you've got any questions at all I'd love to help and as I said I will leave my calendar below as well so so if you'd like to chat about front-end development or get any help with your CV portfolio or LinkedIn examples I'd love to be able to sort of help you out there and get you your first Dev job so thanks for watching and I look forward to seeing you in the next video

Channel: Chris Cooper

Views: 16,895

Keywords: learn to code, software developer, web developer, london developer, web dev, javascript, react, html, css, scss, websites, coding, programming, sass, software engineer, frontend developer, frontend engineer, freeCodeCamp, junior developer, 100daysofcode, junior web developer, learning to code

Id: 2woWjkED-vg

Length: 13min 10sec (790 seconds)

Published: Mon Feb 20 2023