[Bonus Lesson] - Connect Google Analytics
Create an App's Frontend with AI📅 2024-10-12
Transcript
[00:00] in this video I'm going to show you how to connect Google analytics to any website this right here is kind of like a bonus lesson to my bigger playlist here that I showed you how to create a website from zero lines of code to however many with artificial intelligence I'll make sure to leave this video in the description down below it's over 3 hours long and I show you how to use Chad gbt cursor AI repet VSS code anything you want to use with AI if you have no experience on how to code and I show you how to code it although what I realized is that I forgot to show you in that entire course here how to connect Analytics to that website you
[00:30] create therefore let's do it to get started here make sure you have your project open and if anything seems like I jumped a step or like how the heck did you get there Corbin that's because it was all part of the 3-hour video let me show you in this video just how to connect analytics let's get going first thing let's go to Firebase here in your Firebase select the project Rec created in that course from here you're going to hit that little gear icon you're going to hit project settings scroll all the way down until you see the section that shows this now obviously mine's going to be blurred out because this is sensitive information what I want you to make sure
[01:00] you have is your API key off domain project ID storage bucket messaging sender ID app ID and measurement ID most important one being the measurement ID have this tab open we're going to use it later if you don't see this let me show you what you need to do to make sure you have integrated Google analytics in your Firebase project same situation gear icon project settings go to Integrations in Integrations you should see enabled here if you don't manage it connect it get a measurement ID if the measurement ID is is not readily available within
[01:31] Firebase what you can do is that if you know it's connected come down to this gear icon hit admin hit data streams in data streams that's it right over here obviously this is going to be wided out as well cuz it's sensitive information that's your measurement ID copy let's jump back over to our project here I believe in the course we did this in lesson two or three where we set up Firebase from here though you're going to come to Firebase .js we already set this up we structured this I just need to make sure that you structured it correctly so you get your analytics sound good therefore API key off domain project ID storage bucket messaging
[02:01] sender ID app ID measurement ID in that order top of that all this data that's associated with the API key is found in our EnV file react app API key react app Firebase app ID Etc go to your EnV this is going to be blurred out again for obvious reasons make sure to associate your react app API key with your firebase.com back to lesson two here if you want to know how to set this up initialize Etc
[02:33] from here though put these two lines const app equals initialize firebase.com fig get analytics app got them once you got them come to your app.js this was a step that I missed in that course I forgot just to import it so all you need to do is this import Firebase once you import it let's go and push we're going to come to our terminal here obviously use your cheat sheet go to your directory CD web Cafe land is mine we're going to do Firebase log out this will log you out of the relevant Firebase account that is connected to this project here so for me it's going to be contact at webcafe a.com then we're
[03:04] going to do Firebase login and as I showed you in previous tutorials here go and fill out all the relevant information here hit Y proceed we are connected with this connected here we're going to come back to a cheat sheet and we're going to run the two lines that you should have in your cheat sheet which is going to be mpm run build this is going to build out a front end or react front end and then Firebase deploy which is going to deploy to our hosting the reason we're building out both is because the fact that one we're adding that line into app.js we may have added more additional information in our EMV and fireb base.js basically just run these two lines run these two lines and then what you'll notice is this is going to push the relevant changes to get
[03:35] analytics going for your website and let's go ahead and confirm it works what's great about analytics compared to other types of connections with thirdparty users is that we can instantly tell whether it works or not so go on your Firebase project go to realtime analytics and I'm going to open up the website right now and this should prove that we're currently connected and this analytics works for our website loaded webcafe a.com I'm a new user here and it should show up in our analytics and there we go we have successfully connected analytics on our website and we're going to go as I said this is a little bit of a bonus lesson this was
[04:06] purely just to show you how to connect analytics if you want the full in-depth course here that shows you how to code of AI if you have no experience or even if you do have experience there's a new way to code check out that three-hour video description down below and I'll see you in the next video this website's free completely free I used to pay web flow $18 a month no more paying webflow those are two random videos that's my face and I'll see you in the next video