How to add Google Adsense to NextJs

October 3, 2022 (1y ago)

Google Adsense with NextJs
💡

This post has been updated for the Next.js 13 app directory.

If you're looking for a way to add Google Adsense to your NextJs blog, you may be having trouble getting it to work. I've encountered many problems myself, and sometimes even when you follow all the rules, your application can be rejected because Google didn't notice you had added the Adsense script to your website.

💡

Today I’m going to explain how to Add Google Adsense to your nextjs blog. Not just explaining, I’ll show you the method I’ve used on my blog focused on Performance and smoothness. So that your website wouldn’t be slow, laggy, or annoying (for better user experience).

First things first, Now I’ll show you how to add Adsense to your NextJs blog, & then I want to share some of my thoughts about Adsense. These might be helpful for you.

How to add Google Adsense to NextJs applications

I'll cover two steps. Both are required. or If you don't make any mistakes, you could still be rejected.

How to add Google Adsense to NextJs before getting Approval

To add Adsense script tag to your _document.tsx or _app.tsx page, first add the environment variable NEXT_PUBLIC_GOOGLE_ADSENSE=ca-pub-************ for Adsense ads which defines your AdSense id or Adsense code, then add the script. You can skip this step if you've already been approved for Adsense.

pages/_document.tsx
<script
  async
  src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE}`}
  crossOrigin="anonymous"
/>

and keep waiting until you get an e-mail from Google. It might take up to 3 weeks.

Don’t use any script components here. Because I even got rejected many times for this.

& Remember, If you get rejected, It'll not be for the script. You'll get rejected for reasons related to your blog or content. You'll get an email like this

Google Adsense Rejected

& you'll get an email like this if you get approval

Google Adsense Approved

How to add Google Adsense to NextJs after getting Approval

In my opinion, this is the best method, Because we all focus on user experience. I'll also mention two methods for this.

  1. Auto ads (Follow this method if you want to use auto ads)
  2. Custom ads (Follow this method if you want to use custom ads for Better Performance)

NextJs Adsense method for auto ads

add this script to your _document.tsx page:

pages/_document.tsx
import Document, { Head, Html, Main, NextScript } from 'next/document'
import Script from "next/script";
 
export default class MyDocument extends Document {
  render() {
    return (
      <Html lang='en'>
        <Head>
          <Script
            async
            src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE}`}
            strategy="lazyOnload"
            crossOrigin="anonymous"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

That's enough. You can also use other script components. I've suggested lazyOnload because Vercel also suggested this one. And It's a really good choice for performance.

NextJs Adsense method for custom ads

This is what I use on my blog. Auto ads can be annoying. I used to use Auto ads before.

add this simple script to your _document.tsx page:

pages/_document.tsx
import Document, { Head, Html, Main, NextScript } from 'next/document'
import Script from "next/script";
 
export default class MyDocument extends Document {
  render() {
    return (
      <Html lang='en'>
        <Head>
          <Script
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
            strategy="afterInteractive"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

You can also use other script components, But I this if we're not using auto ads, afterInteractive component would be the best choice.

Now you're wondering how can you show ads, right? Because I didn’t include the AdSense client id in the script. Don't worry. Follow these steps:

Google Adsense Dashboard
  • Go to the Google Adsense dashboard
  • Go to Ads
  • Select by ad unit
  • Now create an ad unit. whichever you like. I use in-article ads. So I chose it.
  • Copy the slot id and you can save it somewhere, You'll have to use it.
  • add this package into your 'package.json'
  • Add this script wherever you want to show ads.
import React from 'react';
import {Adsense} from '@ctrl/react-adsense';
 
// ads with no set-up
<Adsense
  client="ca-pub-**********"
  slot="use-your-slot-id-here"
/>
 
// ads with custom format
<Adsense
  client="ca-pub-************"
  slot="use-your-slot-id-here"
  style={{ width: 500, height: 300 }}
  format=""
/>
 
// responsive and native ads
<Adsense
  client="ca-pub-************"
  slot="use-your-slot-id-here"
  style={{ display: 'block' }}
  layout="in-article"
  format="fluid"
/>

If you're using mdx, then add this this code to MDXComponents. Or you can also use the component I've shown below And always remember, You can define your ad size.

How do I setup Adsense If I'm using NextJs App directory?

Yeah, I've been moved to NextJs 13 app router long ago. and I really loved this new router. So If you're also using App router, You can easily migrate your Adsense as well.

It's super easy. Just add the script I've mentioned here to app/layout.tsx. and Add this component to your wherever you want to show Ads,

for example, MDXComponent.

app/components/adsense.tsx
'use client';
 
import { Adsense } from '@ctrl/react-adsense';
 
export default function ShowAd() {
  return (
    <Adsense
      client="ca-pub-1234567891011"
      slot="123456789"
      style={{ display: 'block' }}
      layout="in-article"
      format="fluid"
    />
);
}
💡

if you're using Auto ads, You don't need this. Just adding this code to your app/layout.tsx is enough.

Now I'll talk about my experience of getting Adsense approval.

How to get Google Adsense Approval?

Make sure you’re writing unique content. Don’t ever copy-paste other’ writing until you’re smart enough. And also these include pages for a better chance:

  • Copyright page (A page that contains information about copyright)
  • Privacy and Policy (You can write about what kind of information you collect or if you don’t collect also mention it. And also you can write about privacy information)
  • Disclaimer (Write only if you know, and if you think your blog should have it. I didn’t need it)

Remember that, If your contents are not unique or you just copied others, There is a high chance of getting rejected.

I think that's enough for this blog. Feel free to contact me if you need any help.

Best Practices for NextJS AdSense Integration

Here are some best practices to follow when integrating AdSense with Next.js:

  • Use responsive Ad
  • Use responsive Ad Units that adjust to different screen sizes and devices to provide the best user experience.
  • Place the ads in visible and relevant areas of your website, such as above the fold, within content, or in the sidebar.
  • Avoid placing too many ads on your website, as this can negatively affect the user experience and decrease engagement.
  • Monitor your ad performance regularly and adjust your ad strategy accordingly to improve revenue and user experience.

Conclusion

Integrating AdSense with Next.js can be challenging, but it is a worthwhile investment for website owners looking to monetize their website and generate revenue. By following the steps outlined in this article and implementing best practices for AdSense integration, you can easily display ads on your Next.js website and generate significant revenue.

FAQs

  1. Is AdSense the best ad network for my Next.js website?
  • AdSense is a popular and reliable ad network, but you should also consider other ad networks that may better fit your website's niche or audience.
  1. Can I use AdSense with a static site generated by Next.js?
  • Yes, you can use AdSense with a static site generated by Next.js by following the same steps outlined in this article.
  1. How many Ad Units can I place on my website?
  • Google has specific policies regarding the number of Ad Units you can place on your website. It is recommended to follow their guidelines to avoid any penalties.
  1. Can I customize the design and placement of my Ad Units?
  • Yes, you can customize the design and placement of your Ad Units to match your website's look and feel and maximize revenue and user experience.
  1. How long does it take for AdSense to approve my website?
  • AdSense approval can take anywhere from a few days to several weeks, depending on the complexity of your website and the content. It is important to follow Google's guidelines and policies to avoid any delays in the approval process.