TheLazy.Dev
Portfolio GitHub

Blog

adsense |ads |webdev |nextjs

How to integrate Google AdSense in NextJS

ericus123

AMANI Eric

Posted on January 10, 2023

How to integrate Google AdSense in NextJS

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.

Image description

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.

Image description

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Image description

let's try with Display ads .

click on display ads card

Image description

Choose your ad layout (depends on the place you want to place it)

Image description

Copy these codes (Ignore the rest. we already have them defined in our banner component) and click done 

Image description

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"
        />
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
ericus123
AMANI Eric

Posted on January 10, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to integrate Google AdSense in NextJS
adsense How to integrate Google AdSense in NextJS

January 10, 2023