0aEjKuSHPPo
Create an App's Backend with AI
Transcript
[00:00] in today's video Let's Learn how we can start creating custom events like sign up and begin checkout then correlate that with a conversion event which then we can use in our Google ad campaigns welcome back y'all this video we are now going to advertising and conversion which will be very useful so that when you do start getting payments or signups or whatever it may be you can actually track it put money towards a paid campaign and start finding your customer acquisition cost so for now with payment since we finished it in our previous lesson byebye payment now we go to our last block here advertising for me to
[00:32] best do this tutorial I'm just going to walk you step by step of all the new code I added to a repository and tell you the logic behind it as this is going to become very clear and evident of what's even occurring step number one there is a clear differentiation between an organic user and a paid user that is the whole purpose of the GCL ID that is not a madeup variable name rather that is an actual variable that is found in the URL of your website when a user clicks a Google ad through YouTube search or whatever it may be that exists
[01:04] in your url so for example here it'd be/ GCL equals then a random string up there I'll go and zoom in or can't zoom in but you can see right there the idea is this though we need to know whether the user is paid or organic and the way we do that is with the GCL ID which is provided by Google ads let's make sure Google ads is enabled in our project go to our settings here coming over to Integrations you're going to click link manage linking Google analytics other way of finding it is an admin product links but we're going to Simply hit link choose Google ad account it actually
[01:34] looks like I need to give this email access to another Google ads account to show this so let me do that real quick so I have my little fake Google ad account created here just create a test real quick if I go back to Google analytics now I hit link it will show up right here and the reason this is test is because this current email that I use for all my tutorials is like an email that's purely for tutorials this is not my main corporate email I'm going to hit confirm once I hit confirm I'm going to hit next go ahead and check all these enabled hit next submit once you get link created we have successfully finished the first step here coming over to our Google ad account we need to make
[02:05] sure a couple settings are enabled so I'm going to go to settings and admin basically what's extremely important here is that we enable auto tagging that has to be yes that's going to ensure that we see the GCL ID show up in our URL once that's done though let's move to the next step we have successfully linked our Google ads account also for reference gclid stands for Google click identifier therefore we need to know whether or not the user that comes to our website is from a paid campaign or organic and to do so we're going to check their actual URL so using this code right here we're going to Simply
[02:36] search the URL see if GCL ID exists and if it does we're going to store that in the users local browser with local stor set item GCL ID this sets it in the users's browser for example they log in 5 days later they come back to the same website we can still grab that GCL ID this is fundamental I also put in this console log here so you can kind of kind of see what I mean so if I inspect here and I go to console you will notice if I reload that the GCL ID is empty and
[03:06] that's because in the actual URL itself there is no GCL ID although if I did come from a paid ad campaign and I had a GCL ID in my URL it would show up there and stored obviously don't keep console logs on as you don't want the user to see console logs this is purely for testing so now that we have that the next step here is how do we leverage this specific data point throughout our application therefore the first thing we need to do is add tag code now this this is very familiar if you ever done WordPress or Shopify this makes sense they usually have this code anyways this allows us to track throughout the entire
[03:37] application relevant variables that we care about and in this context is going to be Google analytics sign up check out Etc so for us all we need to do simply is in EMV provide the react app ga4 measurement ID don't worry this is the exact same thing as the measurement ID here g- whatever so add that to your EMV and then we're going to add this code right here this helmet this helmet is going to be BAS basically anywhere within this application whether you're logged in or logged out this code is running this allows us to see any of the
[04:07] users actions and we're specifically tracking for the signup action here this code right here simply put in cursor AI chat hey I need helmet code for a Google tag or alternatively just look at the source code I provide throughout this entire series Once you have that come over to your o context now remember when we set up our off context the purpose of our off context was to tell us whether a user was signed in or signed out whether they were offed as as we said previously with this right here but now during this transition phase of off and Uno we need to add the logic of identifying a fresh
[04:37] signup which we do right here and notice how we are grabbing get item the gclid to see whether this is an organic or a paid signup then layering this onto basically sending this as an event into our ga4 with send signup event which you can see right here will send the signup event with the GCL ID and the method whether that's Google or email we also identify the name of the event here with signore up there's additional logic here to make sure there is no doubling of a sign up event occurring with the last sign in time in theory if you're a fresh
[05:08] sign up and you've never signed up before of course you're not going to have a last sign up time because that would't even make any sense for now though that's the sign up event code it's found in your off context it's found in your home JS proceed make sure you add that Google tag code on the app.js at the top here this will be leveraged throughout the entire application which brings us to our backend here which is our main.py now for main.py we got to add three VAR specific variables here we got to add the measurement ID again so we know where we're grabbing this that's that g-h but we also got to add a ga4 API secret this allows Google analytics to
[05:40] know when we send a message is coming from a trusted source which is our own application so let's go ahead and set up our ga4 API secret to do this go to your admin in admin we're going to scroll down we're going to come to data streams in data streams simply click your app scroll all the way down go to measurement protocol API Secrets now I've already created one and I'm obviously going to delete this one once I'm done but we're going to go ahead create name it something that is relevant to you and you will understand to be clear when doing software development you'll have a QA environment
[06:11] and a PR environment So in theory up to this point you've probably been creating your PR environment so it' be like prod ga4 whatever you want to name it name it and then hit create once you've created it simply copy that value then in your EMV as we set up plenty times before copy that paste into your EMV and then just simply paste the relevant API secret right after it equals secret the next line here is a specific URL and our way of communicating with Google analytics through a python function which is going to be the Google analytics collect measurement ID give it
[06:42] and the secret which is going to be these variables we load in from the EnV this then gives us the ability in any logic in any context to set up custom events throughout our application regardless if it's a begin checkout or a purchase this could be anything uh one great event that we personally use at bump UPS is the ability to process a workspace that's a cust some event that we like to track coming down here though we will go ahead and set up the logic to track begin checkout EG the user hits purchase goes to stripe checkout and then we can track that as a data point to do so remember in the front end we are passing that GCL a in this purchase
[07:15] here this is what we did in the earlier tutorial here initiate purchase part of the payload is that gclid that we're grabbing from local storage so if it exist it will show up in this payload which then is grabbed here and here it sees if gclid exists if it does proed if it doesn't it's empty so it doesn't really matter and then scrolling down here we're going to send this event to ga4 with the uid gclid and plan in reality the only one that's really pertinent to us is going to be the gclid to differentiate whether this is a
[07:46] conversion through paid or organic so in order for us to do this though we need to create a whole separate Logic for just the event of sending this data so obviously if you don't have either of these variables identified in your EMV it's going to skip it so that's a nice little error code there but if you do we're good to go and we can scroll down here to where the payload is actually sent this is just metadata stuff that if you want to add you can add it so for example maybe it was USD maybe the value was 100 whatever it may be this is just metadata stuff what we really care about in order for the event to actually be
[08:16] sent will be this right here which will be the begin checkout and then we're going to be sending it with the response request post the ga4 URL that we identify up there right here here's what you need to take away from this notice we can change the naming of the event to whatever we want this could be anything this could be apples and bananas whatever it may be this gives you the ability to have some really cool custom data that you can track in your software like any type of custom event pretty cool stuff here like for some reason if you wanted to have a custom event where
[08:47] anytime the user clicks settings you can do that that's all up to discretion that's all how you want to approach your application but you know standard stuff like begin checkout will show up here with all of this done though that's it that's connect connecting the dots there what's great about Google other than the fact that it's Google is its ability to basically identify that if gclid shows up in the metric payload it identifies that it knows it's a paid traffic so what happens here essentially is if I come over here to analytics actually let's go to admin and I come down to
[09:18] events you will notice that when I do my event here it's not going to show up right away don't worry sometimes events take an entire day to show up so in this video I'm not going to be able to show you from like to end like the process in the sense of just making it a convergent event but in reality to do that all you need to do is Mark as key event so when you see sign up show up here Market is a key event then I'll show you the next step in the Google ads account for now though let me just show you it working so my ga4 is not going to be perfect in the sense of just like one sign up one begin checkout because I have been
[09:49] testing this earlier today but for now I'm simply going to say let's get started signing with Google creating a new account and then boom that should click off as one ga4 event for one sign up the next one that's going to click off an event is when the user hits purchase I hit purchase when I find myself on this page boom second one's click that's the begin checkout event that we'll see in G4 therefore there we go we get the sign up event here and You Begin checkout this will show up in your real- time overview this is live feed live data if you click that purchase button and you don't see begin check out
[10:20] there for like 10 minutes something went wrong so what is super cool is that obviously make sure you're in the right date range so today's the 16th but it says it's the 15th whatever it may be they will show up here when they finally do show up there you're going to Mark as a key event and then in our key events this leads us to our next stage here which is identifying a key event within Google ads as a conversion event that we actually care about and we can track and we can actually optimize campaigns for so in Google ads they call them goals or whatever your version of a conversion event is obviously it goes past Google
[10:51] analytics 4 like there is a ton of different ways you can get convergent events like you can create custom converion events for now though we're purely basing this off ga4 so first off let's just make sure we have this all correct go to your tools scroll down go to data manager you should see Google analytics G4 Firebase that's the first thing now before we can create a goal event with Google ads we got to make sure we give consent so you're going to go to your connected products here and hit manage a link from here hit manage so then what you'll notice here is that we need to make sure this bulling is on import app and web metrics hit on Save
[11:22] changes with that done now we should be able to create a conversion event from there once begin check out and sign up actually shows up in my Google ads account as a key event which typically takes around 24 to 48 hours I'll then be able to import that as a conversion event that I can use as a goal within my Google ads Campaign which finally leaves us with xing out the final block advertising and conversion man this is this has been a long time y'all I think in total this playlist took me around two three months to complete but
[11:52] full-blown backend a lot of very fundamental Bricklink stuff we went over in this playlist so give yourself a pad in the B I don't know how much coffee you drink through this entirety of this series I know I drink a ton I probably listen to the same Swedish House Mafia like 20 different times on repeat when I was doing this but for now you already know where this is leading to and where we're going which is going to be right down here the full build of a real software all live all done from Step Zero to step how much money we making
[12:22] what's our Mr and I want to do this right that's kind of why I built out an entire playlist for the front end and an entire playlist for the back end because in this playlist that's combining at all that's going to give proper frontend structuring for a scalable app that's going to give proper backend structuring for a scalable app some of those lessons will be found exclusively on the school community that you're currently on and then the other half will be found on just YouTube the interwebs this is going to be a fun series looking forward to this and I'm probably going to do it during a very specific time which I
[12:53] probably won't announce anywhere else so if you found yourself on this part of the video at the end of this entire series this is very Niche information about myself and that information is that pretty soon here I'm going to go full-blown digital Nomad I'm going to be traveling the world but also making these kind of videos so there's going to be other videos and other topics that aren't necessarily correlated to what you're watching right now the point being is this when I entertain this and do this I'm going to be doing it while I pursue being a digital Nomad regardless though that completes this series we've
[13:25] officially done everything we needed to do for the fundamentals of creating out a full stack AI App application does that sound good I'll see you in the next video