How to implement Adsense in a React NextJs App?

I’m running Adsense on a few of my React websites, and they’re server side rendered with Next.js.

Getting approved

1. SSR your app

You’ll have issues with getting approved by Adsense team if you’re not server side rendering the app.

I applied a few years ago, so I’m not sure if something is changed since then.

What was actual in 2020 was that Adsense crawlers did not execute javascript for new applications.

https://support.google.com/adsense/thread/46648657/does-the-adsense-crawler-execute-javascript?hl=en

That was bad news for single page apps.

2. Traffic

You’ll have to have some traffic, but not that much. I think I got maybe 100 visitors per day when I got approved.

Add Google Adsense to your Next.js app

Optional step, include ads.txt

Include ads.txt in public directory. That step is optional, but it allows you to control over who’s allowed to sell ads on your site. It looks something like this:

www.yourwebsite.com/ads.txt

google.com, pub-<your_publisher_id>, DIRECT, certification_authority_id

https://support.google.com/adsense/answer/7532444?hl=en

Ads.txt is formatted as

• domain name of advertising system – google.com
• your publisher id
• type of account – usually DIRECT, but can be RESELLER if you’ve been authorized by another adsense publisher
• certification authority id – unique id of advertising system

Include adsense script and use autoads

If you don’t want to spend time manually configuring ad units, then use autoads.

Google will evaluate your content and place ads for you.

To include adsense code, you can just include my react component https://www.amarjanica.com/projects/react-components/next-google-adsense, and you’re ready to go.

Just put <Adsense client_id={process.env.ADSENSE_PUB_ID}/> somewhere on your page, but not in Head. I tested it with new Next.js 13 server components, and works good.

Ad Units

If you want to specify ad units on the site, you can reuse my component <AdUnit/>, and it should work out of the box.

Take this for example:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1111"
     crossorigin="anonymous"></script>
<!-- premium adsense ad desktop -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1111"
     data-ad-slot="123123"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

In your nextjs page it would look like this:

import {AdUnit} from "@eisberg-labs/next-google-adsense";

export default function Page() {
  return (
    <>
      <Adsense client_id={process.env.NEXT_PUBLIC_ADSENSE_ID}/>
      <AdUnit className="adsbygoogle"
                  style={{"display":"block"}}
                  data-ad-client={process.env.NEXT_PUBLIC_ADSENSE_ID}
                  data-ad-slot="123123"
                  data-ad-format="auto"
                  data-full-width-responsive="true"/>
    </>);
}