Lesson 7 - Google Analytics
Create an App's Backend with AI📅 2024-12-24
Transcript
[00:00] let me show you how to connect Google analytics 4 to any type of web application or software you're developing connecting analytics to your application is extremely valuable so let's learn how we do it welcome back y'all in this video we're going over to one of our last blocks in this entire playlist here if this is the first video You're clicking on then you found yourself in one of the most In-Depth series on YouTube on how to build out an actual application with a real backend so no this isn't going to be a 10-minute video showing you how to create some pseudo application let me show you how to actually do it in the previous video I showed you how to upload files to your
[00:30] application so we're done with files you can say bye-bye files this was leveraging firebases storage feature in today's video we're going to be looking at analytics and more specifically ga4 and we're going to set up a couple things first off we're just going to connect it so we can actually see it working following this we're going to set up very specific events such as sign up and purchase so we can add this for later tutorials here which I'm going to show you how to integrate stripe purchases and then go as far as even showing you how to track conversions in a custom app like this so yes as the title of this entire series shows you
[01:00] let me show you how to build out a real back end so coming over to the application we've been developing here together this is going to be a pretty fast tutorial so don't worry it's not really that crazy what we have to do first off I got to point out some things to make sure that you just have the building block set up so you don't run into any errors so first major thing I got to make sure that you have is make sure to go to your project overiew here hit this little gear icon hit project settings in the Integrations tab make sure you have Google analytics enabled once you have that enabled you'll be good to go coming over to our fire base.js which we already set up in our previous tutorial here here the relevant
[01:31] variable that's going to allow you to connect the Google analytics 4 to your app is going to be measurement ID we've already set this up together we've already done this therefore if you don't have measurement ID there so maybe you have API key all the way down app ID but you don't see measurement ID here's a situation when you were creating your Firebase project you didn't enable Google analytics 4 so now you're in a situation now where you have to enable it a little later on which as I showed you is simply in your settings project settings Integrations so therefore if you are late to the party and now you're just enabl Google analytics in the
[02:01] latter half here don't worry once you enable it to find your measurement ID come down to the settings here click admin in admin here hit data streams click your application name and then it's going to be found right here in the top right it's blurred out obviously but you can see measurement ID you're going to copy this once you have that copied simply add the line measurement ID semicolon and then add process. EMV reacta Firebase measurement ID and place your actual measurement ID in your EMV which I've showed in previous tutorials with that all set up and you're good to go and some of y'all right now are like
[02:31] I already have measuring ID all right chill coming down here make sure you have the lines of const analytics get analytics app with that done the next line is very simple come over to your app.js go to your top of your file type in import we/ we're looking to import Firebase not that incorrect cursor AI like that import. slf Firebase good to go we're going to go ahead and push this to our production environment because right now in our Local Host this is isn't really relevant Google analytics should only be
[03:02] communicating when we are in actual prod environment when I say prod I'm referencing an actual live website link anyone can access make sure you have these commands in your cheat sheet which you probably already do but remember it's mpm run build and then it's Firebase deploy and actually before I do that I got to make sure I cross my eyes or dot my eyes and cross my te's Firebase log out Firebase login let's first make sure that we're in the right project we're deploying to the right project and that we are off Firebase log out then we'll do Firebase login hit Y make sure to choose a specific account associated with your Firebase account
[03:32] like the email and then once you see that message we are successfully logged in that right there should be part of your workflow anytime you decide to start working your application you know it's a nice 10:00 a.m. you're drinking some coffee Firebase log out Firebase log in proceed now to find out where your project is what you probably already know you can use this command as well we can do Firebase projects list I believe there's an S here I always get this command a little off okay I got it right that time so for me it's actual backend app and sometimes what you need to do is basically do Firebase U use actual backend app good to go
[04:03] everything's looking good now let's run those command lines npm run build entire front end fire dis deploy entire back end enter let's get some Google analytics Google I love Google y'all don't realize if I say I love Google like five times in a video YouTube's algorithm picks up on it they're like hold up we got to push this video farther so two things just happened here that I want to point out first thing is that when you get little like warnings like package.json indicates an outdated version of Firebase functions don't worry it's like not necessary for you to always update to the most recent version
[04:33] as you saw in previous tutorials and then this second area here is typically solved by just installing the dependencies again to that specific function folder so this has to do with my python functions let's go on and try that Firebase in it functions so it's going to ask me whether to initialize or overwrite we're simply overwriting we're going to choose our python functions folder we're going to choose obviously Python and we're going to say no to everything except the last question here which GNA be do you want to install dependencies now why not why is in why why is in yes with that done let's retry
[05:03] our commands here and then if you're wondering like how are they showing up like that just use your arrow keys on your keyboard npm run build Firebase deploy perfect once you see that message there deploy complete we're good to go let's jump over to our live website and see if we show up in Google analytics one thing I want to point out though before we do that is that if you deploy and you see a white screen that can be very annoying this is how you solve go to firebase.com where it says public and if it says public right there change that to build once you do that run the exact
[05:35] same command again and your website should deploy perfectly fine obviously if you run into issues open up a cursor chat here using command l or control L simply put in hey when I deployed a local host 3000 I see my react app when I deploy to an actual live website link it's a blank white screen if you're still running into issues coming over here though you can see we're currently at the live website I can go and scroll through AI automation Cod generation R Tech stack and everything above the board and there we go you can see we're in an actual backend app and we got two active users to prepare us for the next
[06:06] tutorial here let's set up some key events I'm going to go to admin again in admin scroll all the way down and go to events the events page are either native events that are just seen in any type of website or alternatively our custom events will create and send to ga4 to do whatever so what you see right here at first view page view session start this is just standard stuff this is data that we just collect in the long term but the important thing here for you to understand is right here Mark as key event if I turn this on and I come over to key events here you will see the
[06:36] default event of purchase right here which I think we would assume is a key event and then we'll also see the other one of first view which is marked as a key event here's why that's important and here's what you can take away from this key events is where we're going to put in other types of conversion events so obviously first of view that's not really a key event we could care less if someone just goes to the website and then leaves what we'll put here is things like add to car sign up etc for now though you've successfully connected Google analytics to your web application so you're good to go the next two lessons here will be payment with stripe
[07:07] and how we track that with conversion code with ga4 these two lessons will be found exclusively on my school Community here so that'll be in the description down below so you can check them out they're going to be full-blown in depth same style same way of teaching same everything I have no clue what that price is going to say when you watch this video but all I can guarantee is that whatever you see is going to be the lowest it ever is as this is going to increase over time time if you felt like you learned something in today's video make sure you leave a like it's completely free and I'll see you in the next video ga4 has been connected Google
[07:38] two random videos that's my face I'll see you in the next video