How to Add Google Adsense in Next.js 14

welcome back today you will learn how to implement Google AdSense inside of your njs application so in order to get started what do we need we first of all need obviously an Google AdSense account we have a Google AdSense account we essentially want to go inside of the dashboard and then we want to find the publisher ID we will later use this inside of our next sharees Google AdSense component in order to make the whole thing work then inside of our nextjs 14 app make use of the script component that nextjs provides out of the box box in order to inject the official Google AdSense script so we have injected the ad script enabled allo ads inside of the AdSense dashboard should immediately work but I will also show you how you can create a manual ad component in order to place custom apps wherever you want inside of your app this is pretty much all we need in order to get started so I prepared this little example next sh as for app this is just using tailwind and it is just using some random article template I found on the internet before we start I just want to let you guys know that everything I'm going to do in this video you will also find down in the description below in case you guys want to read after you've watched this video I would say without further Ado let's just get started so first of all what we will need is the next CHS script component actually let us create a component for this in order to do this let me just quickly create a components folder and inside of here we create a component called AdSense TSX we will need the publisher ID as explained in the beginning I'm just going to call it P ID and here guys I'll be using typescript obviously you don't have to do this if you don't like typescript so let me actually create some types for this this P ID is going to be a string and all we need to do is just use this script component from nextjs the script needs to be loaded asynchronous so we add the async prop the source is going to be the following as I said guys everything will be also down in the description below this is the official Google AdSense injection script we also have to add a cross origin of anonymous and the strategy is going to be after interactive I think this is also going to be the default strategy without specifying it but let just add it either way this is basically just going to load the script early but after some hydration has already occurred on the page you actually need to understand this this is just very important in order to properly load the script so once we have done that we can actually just start by inserting the script down here what I usually do is I put this inside of a hat tag I'm not exactly sure if you have to do this um but I personally prefer to do it like this and it works pretty great so let's just insert it here and now we got to pass the PID this of course just an example p p ID if you guys want to find your P inside of Google AdSense dashboard I've actually prepared little screenshot from my own dashboard obviously I've sensored some stuff but this is essentially where you are going to find your publisher ID you just open up this little site navigation and you click on account settings account information and then at the very top you will find your publish ID just make sure to copy that and paste it inside of your AdSense component that we just created and that is pretty much it for the first part now Auto ads should automatically work that means if you have Auto ads enabled you should see stuff like viget ads in page ads anchor ads which are going to float at the very bottom or top of your screen floating side floating side panels all that sort of stuff and since I've just used some example PhD I won't obviously see anything in here but in order to double check that the ad script is successfully injected and that everything is going to work properly we can still double check by open up our developer console with F12 we need to head over to the network Tab and we need to refresh our page and let's just look for ads by Google and as you can see guys we get a 200 from the AdSense AP I which means that this script is successfully injected and if your page is verified on Google AdSense and accepted and you have Auto ads enabled you should now see them on your page but now let's say you want to place some ads in certain locations let's say you know some better locations to put your ads and that's why you want to place them manually and in order to do this let's create a brand new component and let's call this one at Banner or let's call it manual add actually I prefer add Banner so let's use that one let me create a boiler plate and then this is going to be a client component since we're going to use an use effect hook so Google AdSense usually uses these ins blocks I'm not actually sure what this tag means in HTML I would have to look that up but that is just what Google usually uses for their ad blocks ad buers whatever you want to call them so what is really important here is that it has the class name of ads by Google the style we do display block usually and here we need the data at client and now we're just going to say ca pop and this one is going going to have a unique idea as well so usually this is what it's going to look like inside of the Google AdSense dashboard you can just click on ads then you can just go to buy add unit and then you can create your custom little ad unit and usually once you've created that you will get a script snippet by Google that you can just insert into your app and that always contains this ID behind it for the sake of demonstration purposes I'm just going to insert some random data but obviously you would need to put your unique ID in here then letters add the data at client property and this is just going to once again contain your publisher ID and I will just enter some random information once again but here make sure to insert your correct publish ID then let us quickly create some DRS for this component so what we will need is a data slot which is going to be a string then we will need a data add format which is also going to be a string then we need the data f with responsive which is also going to be a string actually what I like to do is I like to turn this into a Boolean and now we need to insert these props inside of our ad block so let us grab them here and types now we can finally utilize them so let's say data at slot is going to be our data at at data at slot and we need the data at format and the data full with responsive then here we are just going to do data for with responsive. to string now it successfully inserts the ad blocks now we need to actually push these ads and in order to do this we just create a use effect hook that is going to run only once after after the component has mounted here we are going to do window ads by Google equal to window. adds by Google otherwise it's going to be an empty array and here we're going to push an object an empty object actually Ty script we actually have to do it like this to do window as any just like so and that should actually work now we got a typ save fully ready to use at funner AdSense component actually I would probably recommend you guys to put this inside of a TR catch block and you could technically console lock this um just like so and then you could put this into the try method this is how I would probably do it just like so and now it should be ready to use now let's take a look at our block article again as you can see let's say we want to maybe insert a add bner at the very top of our page just like here pretty much so this would be the location here where the image is the image placeholder in this case and now we want to insert the ad bunner above it and so for that we're just going to insert the ad rner now we need to pass all of our props of the data ad format we should always use Auto or the data for responsive we should use true that is going to make sure that audio ads are going to be fully responsive no matter of the width and height which means that Google is automatically going to load in the best ads for the respective size of the ad Banner for the data ad load you need to actually pass in the unique ID that you get whenever you create a custom ad unit inside of the AdSense dashboard this is what the dashboard looks like um when you click on this little ads tab right here inside of the site navigation you should find this tab up here which says by add unit and in here you can create stuff like a display ad this is what I usually use when I went to insert custom ad bner so I click on display ad and then I'm going just create a responsive ad once you've done that Google usually gives you a little code snippet that you can Implement immediately into your app and that code snippet is usually going to contain the exact same props that we're using here just make sure to copy the ads slot ID and paste it inside of here I'm just going to use some random number here once again but make sure to put in the correct ID now let's save once we take a look at our app we can see that the ad Banner is successfully being inserted you will usually get this error adds by Google Push error all in elements in the Dom with class ads by gole already have ads in them I am not exactly sure why this happens I do have a few apps in production that all have this error as well this is not going to break your ads or show less ads but the ads but this error is pretty much always going to be inside of your console which is a bit annoying but I haven't found a proper solution for this yet if you do know a solution it'd be nice if you could like put it down in the comments below but as I said guys is not going to be a big deal as you can see everything is going to still work fine and when we use this little inspect element tool we can see the ad Banner correctly inserted inside of our app you can just change the background real quick to see what it's going to look like let's say you don't really know exactly where the app is because your background might be white so this really hard to see you can just create a diff element and let's say you do BG black and youve wrap your add bner inside of it just like so and now as you can see you might want some distance between this you can do this by just adding a little bit of margin to the margin margin to the bottom like so and now you have that add buner properly inserted and now you could of course do the same thing for this little categories side panel right here where you maybe have like recommended posts or whatever between that you could put another ad Banner just like so pretty much and now you have an ad right there as well could put one here as well and you would probably use Mt instead of MB and now you have your ads successfully implemented obviously in development mode you will also not see your ads this will only work on your proper URL that you pretty much got verified for in the Ence dashboard inside of your production app but as you can see guys you can at least still see where you add butns are that is very very handy now that is pretty much it guys if you have any questions just make sure to ask them down in the comment section below I'll try to answer all of them and thanks for watching I'll see you guys in the next one

Channel: WebDevJan

Views: 2,675

Keywords: adsense, next.js, google adsense, how to verify id in google adsense, google analytics, how to add google analytics to next js, nextjs google analytics, how to add google adsense, next.js google analytics, google adsense nextjs, how to insert google adsense codes, google ads, how to add google adsense to my website, how to fix google adsense ads.txt error, how to get google adsense approval, how to make google adsense account, nextjs, how to create google adsense account

Id: l1fyzlAe8Cg

Length: 9min 48sec (588 seconds)

Published: Sat Mar 30 2024