If you are having a blog, you might want to monetize it. Adding ads to your blog is among the effective ways to monetize it.
In this article, I will show you how you can integrate Google AdSense into your NextJs app.
How do I get my site approved for google AdSense?
To have your site approved for showing Google ads, there are steps to follow carefully.
You can check these eligibility criteria here carefully to avoid being rejectedย
in the first place.
Pro Tip: Before you request Google Adsense approval, make sure your website has at least 10 dynamic articles (content should be changing regularly) and a proper domain name.ย
If your site is eligible for google AdSense, you will get a response from google onย how to get started.
It takes a few days to get approved but in some cases, it might take between 2 and 4 weeks.
If your site is approved for google AdSense, follow the following steps to integrate it into your NextJs appย
and start showing ads.
Add your client in the NextJs _document script
pages/_document.tsx ๐๐ฝ
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
export default function Document() {
return (
<Html lang="en">
<Head>
<Script
async
src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}`}
strategy="lazyOnload"
crossOrigin="anonymous"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
change NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID. to the env variable containing your ads client id (ca-pub-*********)
Create an ad banner component
components/AdBanner.tsx ๐๐ฝ
import { useEffect } from 'react';
const AdBanner = (props) => {
useEffect(() => {
try {
(window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (err) {
console.log(err);
}
}, []);
return (
<ins
className="adsbygoogle adbanner-customize"
style={{
display: 'block',
overflow: 'hidden',
}}
data-ad-client={process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}
{...props}
/>
);
};
export default AdBanner;
Get Google ads block codes from your adsense dashboard.
Notice that we are using the default code from the ad banner component above โ๐พ
adsense dashboard amanieric.com
let's try with Display ads .
click on display ads card
Choose your ad layout (depends on the place you want to place it)
Copy these codes (Ignore the rest. we already have them defined in our banner component) and click doneย
Import the ad banner component anywhere your want this kind of ad to show and ad the codes copies above as props to the ad banner.
Our ad banner component imported will look like this ๐๐ฝ
AdBanner
data-ad-slot="7434970023"
data-ad-format="auto"
data-full-width-responsive="true"
/>
Deploy the changes and on the hosted version of your app , the add banner will be showing the ad where your placed the component โจ
Feel free to drop any issue in the comments if you need help
You can also read article on my blog and feel free to drop questions or issues if you need help. ๐๐ฝ How to integrate Google AdSense in NextJS
Top comments (7)
Thanks for the article. can I resize the ad banner to whatever I want?
Yes, in the AdSense dashboard, you can set ad units to a custom fixed size. However, keep in mind that this choice may limit the number of ads displayed on your page if not many ads fit the size you've set.
In the Adsense dashboard, I see. I should read it through the document before applying the AdSense later. Thank you for the answer and the article :) ๐
I am getting this error.
TagError: adsbygoogle.push() error: All 'ins' elements in the DOM with class=adsbygoogle already have ads in them.
Hey i want to implement interstitial ads and when i am giving slot id of them. they are displaying as a normal ad
How do we test this changes in local any idea?
I don't think you can be able to test it locally
Google doesn't allow displaying ads in a development environment or non-live websites