Lesson 5 - How to Monetize Your App

Create a Software with AI📅 2025-06-29

Watch on YouTube ↗

Transcript

[00:00] Monetizing our app is actually a lot simpler than you would think it would be for our software in this entire series. So, in this video, I want to go over three major things we're going to do to monetize our app. First one is we're going to set up our custom domain so we can actually point the ads to the correct domain. Second one is we're going to set up Google Analytics so we can see traffic coming into our software. And the third one, most importantly, we're going to add actual ads to our website. Sound good? Let's jump in. Welcome back, y'all, to the major series here. We're jumping over everything we need to know from building

[00:30] a absolute monster of a software from complete scratch as if we've never coded before and letting AI do everything. In this video, we are scrolling up to monetization. So, here are the three major things we're going to go over today. The custom domain, G4 connected, and Google AdSense. What I realized in the process of adding ads to my website was how simple Google has made ads. Now, to give context of the kind of ads we're going to create today, it's going to be what you see here on Stock Twits. We're over here. You see an ad right now. And then these little blocks right here,

[01:00] this is typically where ad placement is done. So, we're going to do the same thing for our site. And Google just makes it extremely easy with their auto ads feature. Before we do that, we're going to go ahead and make sure we merge our branch from the last tutorial here, which is our back-end branch, and something funny happened where the PR actually went away. So, I'm actually going to show you how to restart a PR if this happens to you. So, to restart a PR, assuming that you come to pull request, you're like, Corbin, I still have that second branch. I still haven't merged it. No problem. Come up here to new pull request. Then what you'll notice is that we're going to have the branch that you named it right here. So

[01:31] for me, I named it back in. So I'm going to click it and then I'm going to say create pull request. Going to give it a name here. So we said added timestamp functionality function and hit create pull request. So now that we've done that, we're going to go ahead and just merge this back. So as you already know the steps here, we're going to merge pull request. Confirm merge. I'm going to delete this branch. Clack over here to our repository. You'll notice that it is merged right here. And then all we have to do is simply do get branch. We're going to do get checkout main and then get pull origin main. And this is

[02:01] going to be our most up-to-date code that is now in our main branch. So what you noticed is I actually got an error here. And this can sometimes happen when you have multiple SSH keys on your computer for different git profiles. You'll notice that repository not found, could not read remote repository, and you just don't have access rights. So to solve this, you just need to do two lines. The first line you'll do is that in the bottom left and simply ask cursor a chatbt, hey, how do I list out all my SSH keys on my local computer? And you'll get the same command line. So do this first line right here. Hit enter. This will list out all your keys. And

[02:33] the next line you're going to do here is right here. SSH add squiggly line SSH and then the ID name. This is going to be the name of the key itself that you'll be able to find with that first command. If you don't know which one to choose, simply copy the output, put it into an AI chat and say which one is my key to do this command with. Once you do this, we're adding the rights and our ability to access a repo again, which then allows me to do the command of get pull origin main. And as you can see, we got all of our updated code now. So that's a nice little troubleshoot there if you ever run into that error, which can be frustrating because you're like,

[03:04] Corbin, I set up the SSH key. Why is it not working? Now it's working. All right, I've main merged. Let's go ahead and just clean up our local branch to get branch again. We're do get branch capital D and then we're going to delete the local code of backend because we've already merged it. Boom. Now let's add our new branch here. And our new branch here, we're going to do get checkout dashb. We'll call it money as this is purely for the monetization tutorial. There we go. Get branch. Confirm we're in it and we're good to go. So the first thing I want to do is let's make sure we connect this application to a custom

[03:36] domain. So go to your hosting here and what you're going to do is simply hit add custom domain. When prompted with the domain, obviously go purchase a domain, find your provider. I use Squarespace domains. I'm going to do tubestamp.com. And then we're going to hit continue. Once you hit continue, you're going to get this request to add this to the DNS provider to verify you even own tubstamp.com. So, how do we do that? Simply go to your provider, whether that is Squarespace domains, GoDaddy domains, wherever it may be. You're going to go here and you're going to go where it says DNS. Once you're here, go where it says custom records and hit add record.

[04:07] This is where we're going to put this information in. So the first one is a record type of a and then we got our value right here but it's going to be an IP address and your record type is a. So copy the IP address host we're going to do as at this is going to just be the URL2stamp.com itself. The type is going to be a as identified before and then the IP address is what we just got from Firebase. So paste that here. So with that saved and pasted, we need one more record. This is going to be a text record and we're going to copy the value right here. So host at again type is text and then the text will be what was

[04:39] requested by Firebase. So paste that there. There will be one last record we're going to add here which is going to be a record that allows it to run on www.tubame.com. So do www came and this alias data. Let's find it. This is going to be this data right here. This link. Hit save. What's very important about this link right here is don't add the https. Just simply do it as it is shown right here. So once you do that, hit verify and then you should get a message like this. Now, one big disclaimer here. This can take some time. I've seen it take 30 minutes

[05:10] to an hour. But anything over 2 or 3 hours, that means you did something wrong and you should retry this logic again. For now though, the custom domain has been set up successfully and it's minting certificate. Sooner or later, we're going to be able to click this and see our live website. Pretty cool stuff. What's really cool is that sometimes it works instantly. Click it and boom, tubsam.com is a live website, custom domain of our app. So we've successfully connected tubes.com to our application. Now let's add some analytics so we can see the traffic that is going to this

[05:41] website. To add analytics, it's actually pretty simple due to the fact of what we did originally when we were creating the Firebase project. We have a measurement ID already created and associated with it. But let's just say and let's just assume you didn't enable that checkbox. So, assuming you didn't enable it on creation, come up here to settings, project settings. Go to the tab that says integrations and make sure this is enabled. Once you see it as enabled, that means we've successfully connected a Google Analytics account to your Firebase project. But you're going to need the measurement ID. So, let me show you how to get that. We're going to go to our analytics dashboard, say view

[06:13] more in Analytics or Google Analytics. You're going to come down here to this gear icon and hit admin. In admin, go to data streams. Once you're here, click the relevant site and it's right there. Measurement ID. I know you can't see it, but it's my measurement ID. You're going to simply hit copy here and let's put it in the code. We can also enable cool things like enhance measurements by hitting this little boolean switch here. So, that's turned on. So, coming back to the code, you simply add measurement ID here and then react at measurement ID. And then, as we've done in earlier tutorials, we go to our env file and then set the variable there, the real variable. It should start with a g-

[06:44] something. Another important thing to ensure that it works is importing git analytics here, firebase analytics, and then doing this line of const analytics git analytics app. So far so good. You'll also notice we are exporting analytics so it can be used. Next, how do we make sure it's actually running and operating? Sometimes this step is not necessary, but I've noticed it's helped people out when there's issues where it's not persisting. So, we're going to do import. And we're going to just import Firebase. And there we go. Import Firebase. That's it. I've seen situations where it works without doing

[07:15] this line. This is just to help you troubleshoot if you're running into situations still. Now, with all that done, let's go and deploy this fully to our live environment. Remember, standard practice, Firebase logout and Firebase login. Make sure you're logged into the correct email associated with your Firebase project. Once you do that, you're going to be able to run these commands with no errors. We're do npm run build firebase deploy. Hit enter. We may get an error here when it comes to the functions. We need to reinstall some dependencies here, but we might not. So, let's just see if this works. So, once we're successfully deployed, you'll get

[07:46] deploy complete with that nice little check mark. Two things, this deployment might take a little bit of time, especially for me, it took me around 10 minutes because the fact that I was initiating with new functions as well. On top of that, if you find that it's just sitting there for way too long, hit control C, exit out, and then just rerun the commands. I went ahead and did that. It was stuck at one part for a little too long. For now, though, this is fully deployed. Coming over to tubestamp.com, straight above, we have a live application that actually works and users can start using. Let's see if

[08:17] we're connected to analytics as well. And there we go. We are connected to analytics. As you see, there is one live user. And that is correct. I am currently in Indonesia. So this is perfect. Our analytics is now connected to our software. So that's successfully connected here. Before we do this commit, this very first one saying that we've successfully connected a custom domain and also Google Analytics. I want to add some code here in our public folder and build folder that's going to help you out when we have all these different types of Firebase domains. Specifically, when we come to hosting,

[08:48] what you'll notice is that we have other domains we can access the website from. But in reality, when serving this website, we only want to serve it from tubestamp.com. So, how do we do that? Go ahead and open up your public folder and your build folder here. We're going to go to the index.html and we're going to add this script. The code we're going to add at the bottom of this index html file, which is script right here, script right here, and the last part will be HTML, is going to have it so that we redirect from the Firebase URLs always to the tube stamp URL. Now to do this

[09:19] with cursor AI, you would simply command a all of this, you would ask in the chat here to do simple logic here in the sense of if what's seen in the current domain name is either these URLs as referenced right here with these URLs, we're going to change the location to tubest.com. And if you just want to copy this code directly, I'll have the entire repository on GitHub for free, all the source code. So you would just jump through the git repo, go to index.html, and just copy from here. I'm going to add this to the build folder as well. And then I'm going to show functionally what this means. My build folder is a

[09:51] little weird. So I'm going just go right here, paste it, and this should be good. Let's go ahead and redeploy this. And then I'll show you what this logic does. npm run build firebase deploy. One big thing I want to point out in this deployment is notice how when functions don't have any code change, it's just going to skip it and then keep going. This is going to allow for faster deployment for functions longterm that you don't change any of the code with. Deployment's complete. And watch this. Traditionally, if I were to open up this URL, this would lead me to the web.app.

[10:22] But now, when I put this URL in my browser, it's going to redirect to tubestamp.com. So, boom. I put it in my browser. I hit search. It says tubestamp.com. Pretty nice. So, all these dots connected. Now, let's do our get ad. Get add dot get commit. And then we shall do money, money, money, money. Now, let's jump to the tutorial where I show you how to put ads on your site. I originally thought this part was going to be very lengthy, but man, has Google gone the extra mile now to make monetizing websites extremely easy. So,

[10:53] let's do it. To monetize your website, simply go to Google AdSense. Click this. I've already created my account, but the first thing it's going to prompt you with is signing up and creating account. And then you'll see something like this. When I first created my account, I simply said I don't have a site yet. So, I'm going to show you how to add your site after you create your account. But simply checkbox all this different information and say start using AdSense. So once you come to your account, you're going to see the homepage like this. We're going to hit add site. And the site we're going to add is Tube Stamp. So I do this tube stamp. Save. Next, we're going to hit explore. And watch

[11:24] this. This is amazing. So back in the old days, we used to have to do custom code for all the ads, but now we can leverage Google's auto ads. I'm going to turn this on and apply to site. So once I hit save, let's go and preview it. So I'm going hit edit again. And here we go. This is going to grab the actual website. This is super cool stuff, y'all. And you're going to be able to see it in mobile and desktop. And it's going to show you where the ads would possibly show up. I mean, look at this. This is actually amazing. So, what I'm going to do is we're going to set it up like this. And then in theory, I'm

[11:54] probably going to create another video on the topic of creating custom manual versions of these ads. Eg. user puts in a YouTube link. There's a popup ad. Press in 5 seconds to skip that situation. For now though, I mean, look how cool this is. It actually knows where to place the underlying ads. So, here's what we can do. We can actually tell it where not to put the ads if we're just like, "Hold up, this is going to be a bad user experience." To do that, we can simply click this. So, this is an excluded area on our website. We can even add areas or remove areas. So,

[12:26] is this an excluded area? Is this an excluded area? So, for maybe I don't want it here, I would click here and keep going with the areas I don't want ads to show up. And we can even view in mobile as well. So let's kind of click through this. Let's see where it'd be like. Okay, definitely don't add a ad here. This would not be a good area. This is area is fine. Maybe don't want double ads here. Scrolling down. Maybe don't add an ad under the footer here. Keep going here. Maybe don't add an ad within the footer. This seems fine. I'm going to remove it here. I kind of like

[12:58] having ads kind of below elements. So, you know, one ad right here is fine. And this should be good. here. We'll have an ad above here. We have an ad right here. And I've excluded everywhere else where I feel like it would be too redundant or just too much. With that done, I can say apply to site, which I'll jump over here real quick. Scroll up a little. And we'll hit apply to site. Save. And that's it, y'all. That is how simple it is to add ads to a website. I was flabbergasted when I figured this out. I was like, hold up. Okay, this video is

[13:28] going to be a lot shorter than I was expecting. For now, though, we're going to connect your site to AdSense. So, we're going to say let's go. So, we're going to go ahead and add this code right here, which I know you can't see for security reasons, but you're going to hit copy here, AdSense code snippet. And specifically, what it's looking for is in the head. So, the first thing we're going to do is we're going to create a helmet in our React application in our app.js. What a helmet is is this is code where we can put little like tracking code like this in, but also we can set titles and subtitles to web pages as well. And what I mean by that

[13:59] is that look at your browser right now. You see YouTube tab that is open. Hover your mouse over where it says like YouTube and whatever the name is. We can actually adjust that depending on the page using this helmet logic. I'm going to see if cursor AI is smart enough to know from this limit amount of context what to do. It might not be. So I might have to adjust the code. And to be honest with you, it actually looks like it was smart enough. So we are going to run this first command here which is actually installing react helmet. It's smart that it actually gave me that as well. While cursor AI has improved tremendously. We're going to run this so

[14:30] we can actually install the ability to use the helmet command within React. What you'll notice is when using React, we can use different functionalities that are out of the box that are really cool. One being helmet. There's another one called links which allows us to jump to different pages in a more effective manner than reloading a page depending on what you're on. This will make more sense as you dive more into development. I'm going to hit accept here. Hit save. And this looks good so far. And this is what I was talking about with the title. So, we got tube stamp, the easiest way to create YouTube timestamps. But what I'm going to do because of the fact that

[15:02] I want to use the title that we set in our index.html, which if you go to public index.html, I'm going to have it fall back to this title. So, what is happening here is that for the files in app.js or even if you go to like a separate page like a contact page, you don't set the title in the helmet like this like we saw before. You don't set it here. What the application is always going to do is it's always going to fall back on the title you set on index.html. So right now anywhere you click within the app

[15:32] even though there's one page in theory if there was multiple it would always fall back to tube stamp AI powered YouTube timestamps. For now though this is good and we're going to put something else in this helmet right now. Remember the AdSense code. I know you can't see it but it's right there. Copy. So all we simply need to do is go to our app.js JS I'm going say okay in this helmet please put my AdSense code here this is where you paste your code I know right now it just says code in quotation marks that's because I'm going to paste it after I explain it but then we're going to say also make the high-risk variable in EV

[16:04] react app AdSense. So paste your code right here that you got from AdSense and then hit enter. So with that done we're going to hit accept. I'm going to say no to that. Try to add the title again. I don't want that. And here we go. Here is our AdSense code. We got our script. We have the entire URL that you'll see and then the high-risk variable is right here that we need to set in our EMV right now. Simply grab this, copy and then paste to your EMV that is right above me. So this code added now and I put it in my EMV. Remember anytime we

[16:36] are referencing secret variables like this, we need to rerun our emulator. So do another npm start to see if it works or alternatively redeploy to our Firebase application. So, knowing that, we're going to make some spaces here. We're going to do npm run build firebase deploy. Enter. Successful deployment. Let's see if it worked. So, coming back over here, I'm going to say I've placed the code. Verify. And sometimes you're going to get this. So, I got it working. But actually, we need to place this code somewhere else. So, to be honest with

[17:07] you'all, when I do these tutorials, I'm doing it live. So, I'm just doing it based off my experience. I'm going at it. I leave stuff like I'm about to show you in the video cuz this helps you troubleshoot. For context, this script doesn't need to be in the app.js. In reality, the React app AdSense, this isn't even a private variable. We can actually have this public facing. We don't need to put the script in our app.js. The only reason that I'm going to leave this in the video though, as well, as this will be useful for you to know, is that if you ever do Google Tag Manager, which allows you to track very specific actions, eg someone signing up,

[17:39] someone doing a purchase on your website, this is where you're going to put that in the helmet code. I've done a separate video on that which I'll link in the description down below as well that shows you how to track events like signups and purchases within your application. This is where we leverage that in the helmet code. Where we put this Google AdSense script though is in the index.html. Simply go to index.html here, paste over that code that we got from Google AdSense and just say, "Hey, add this to my index.html." And then it should add it like this. This looks good. Paste it

[18:11] into your index.html HTML in your public and in your build. Then run Firebase deploy again and everything should be connected. I guess you just got a nice little lesson on helmet react part of this video as well. So make sure you leave a like. It's free. With that done, the site is verified. Now we're going to request review. Next, it'll prompt us to give a consent message for EU, UK, Switzerland. We can do that another video. For now, I'm g say remind me later. So once that's done, you'll notice that the review process itself will either take a few days or up to two to four weeks. So, what I'm going to do is I'm going to check out the website later today, see if the ads are running,

[18:42] and if they are, we'll do a continuation of this video and you'll be able to see the ads live. But that concludes this video on how to add monetization to your application. And real quickly, if you don't want to mitigate your earnings when it came to the consent screen where there was implications around Switzerland EU, choose one of those options that you saw down there and then hit submit. So, now that it's done, in the next episode here, we're going over launch. I'm going to polish up the car a little bit, make the UI look better, make sure everything's connected, make sure everything's secure. So, make sure to check out that lesson so you get a full grasp of how to fully launch a

[19:14] software from scratch. And then I got a very special lesson which you can check out my builder consoles log community in the description down below, which I go over pitfalls and things not to do in software, things that made me lose months when developing software. So, without further ado, those are two random videos. That is my face. I'll see you in the next