Nextjs
Published in

Nextjs

Nextjs + Adsense

How to add Google AdSense in your Nextjs?

The integration of Adsense in nextjs is a straightforward process. I guide you, beginner, to pro-level.

You are a blogger, and you need integration of Adsense in the nextjs base website. For example, AdSense help to earn money, and you try to add with your nextjs app. you are at the right place; I give you a base with nextjs and AdSense. So you can easily add Adsense to your website.

How to add Google AdSense in your Nextjs By Rajdeep Singh
How to add Google AdSense in your Nextjs?

For starting with Adsense and next js, you need an AdSense to verify the account. I take Adsense articles very seriously. For that reason, everything I write there with comprehensive research.

  1. Auto ads
  2. Ads unit
  3. Amp ads

Auto Ads

For integration, you need only three things.

  1. Adsense code
  2. Script component
  3. Custom app

Auto Ads

Adsense code

You need an Adsense code applied on the nextjs app in the first step.

AdSense code

Get auto AdSense code on the Adsense website.

<script data-ad-client="ca-pub-************" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Script component

For script, nextjs provide a Script component. Script components help add third-party scripts and optimize your website.

Now we convert javascript script to nextjs script component. I was hoping you could read my full article related to the Script component.

https://medium.com/nextjs/the-script-component-in-next-js-ee6ee6cd705a

Old code

<script data-ad-client="ca-pub-************" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Change old code to Script component ( Adsense + Nextjs)

Make sure to read a full article related to nextjs script component docs. https://nextjs.org/docs/api-reference/next/script

<Script   id="Adsense-id"   data-ad-client="ca-pub-987************676"   async="true"   strategy="beforeInteractive"    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>

Points

  1. strategy attribute change based on your requirement.
  2. async or async="true" both attributes treat equally in the browser.

Custom app

If your app custom _app.js the file inside pages root folder. Otherwise, create a file in the page's root folder with _app.js the name and paste the following code.

import Script from "next/script";export default function MyApp({ Component, pageProps }) {return (<><Script id="Adsense-id" data-ad-client="ca-pub-987************676"  async strategy="afterInteractive"
onError={ (e) => { console.error('Script failed to load', e) }}
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/><Component {...pageProps} /></>);}

Note

  1. auto ads take time to show your website.
  2. Always check the console and pass onError function in the script component.
  3. After 3 to 4 days, you check your website with Ad Settings Preview in google Adsense. This tool shows you ad previews.

Ads unit

The process is the same as I previously told you in the auto ads section. However, you split code into two-part in this section and then use it in nextjs.

  1. Adsense code
  2. Convert two-part
  3. Convert first part of code
  4. Custom app
  5. Apply ads unit

Your ads unit code

Get a copy of your ads unit code on google Adsense.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-987************676"
crossorigin="anonymous"></script>

<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-987************676"
data-ad-slot="776****95"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Convert two-part

Convert your ads unit code into two separate parts.

  • First part
  • Second part

First part

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-987************676"
crossorigin="anonymous"></script>

Second part

<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-987************676"
data-ad-slot="776****95"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Convert first part of code

In this step, you only convert the first part of the code in the nextjs script component.

<Script  
id="Adsense-id" async
onError={(e) => { console.error("Script failed to load", e); }}strategy="afterInteractive"
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-987************676"
crossorigin="anonymous"/>

Custom app

Copy your convert code perilously step and paste it into a custom app. If the custom app is not present, create and paste code inside the app.

import Script from "next/script";export default function MyApp({ Component, pageProps }) {return (<>  <Script id="Adsense-id" async    onError={(e) => { console.error("Script failed to load", e);}}    strategy="afterInteractive"src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-987************676"    crossorigin="anonymous"  />  <Component {...pageProps} /></>);}

Apply ads unit

After you add, convert code (Adsense + Nextjs) paste in custom app.js. Now you add an ads unit in your nextjs.

<div className="col-md-8">    <h3 className="pb-4 mb-4 fst-italic border-bottom">       Adsense ads    </h3>   <ins       class="adsbygoogle"       style={{ display: "block" }}       data-ad-client="ca-pub-987************676"       data-ad-slot="776****95"       data-ad-format="auto"        data-full-width-responsive="true"    > </ins>      <script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Simple paste ads unit code in nextjs. You do not need a javascript warp {} for the ads unit.

Amp ads

  1. Add script
  2. Add ads unit

Add script

On the amp page, adding Adsense with Nextjs is very easy. In the first step, you add an amp script to the amp head tag.

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Note

You can also add a script to _app.js a custom app with validation. For validation, useuseAmp hook in nextjs.

Add ads unit

In the second step, you also add or paste ads unit in nextjs without warper {}.

<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-987************676"
data-ad-slot="776****95"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>

Testing

For testing, suggest three methods to detect ads that appear on your website or not. For example, in auto ads, ads unit and amp ads take time to start showing on your website. Therefore, auto ads might take more time compared to others.

After adding ads newly website, you make sure. You do not receive any error related to Google Adsense if the show starts solving it.

  1. Ad Settings Preview
  2. Chrome extensions
  3. Manual check
  4. Ultimate testing

Ad Settings Preview

Google Adsense auto preview also helps to detect ads on a website. It also shows how to look like a website with ads and secondly tells you how many ads show on your page.

Chrome extensions

There are many extensions on chrome store that help detect ads on websites. You can also use another tool to detect ads on your website, i.e., adDector and AdSense Active View Monitor.

I'm not sure whether the chrome extension plugin is working correctly with nextjs.

Manual check

For manual checking, you use the chrome dev tool for that. You check all proper code places and debug errors.

Suppose an error occurs related to Adsense. You can check inside the dev tool.

400 error in google adsense
400 error in google Adsense.

I show a 400 error in AdSense because my data-ad-client id is wrong. You correct your id, and everything is fine.

Ultimate testing

You wait 2 to 3 days. Then, if you do not show ads, ask for help from the nextjs community and AdSense community. The nextjs and Adsense community also give you better advice and solution.

FAQ

How to apply ads on a single page on nextjs?

You do not paste code into the custom _app.js file. If you apply Adsense + nextjs code on a specific page, i.e., Blog home page, Blog reading page, etc. You can also do that with the script component.

How to apply Auto ads and ads unit both in nextjs?

Yes, you add auto ads code inside _app.js the file in the first step. Then you use the ads unit on a specific page and place. It depends on you.

I use the head component to add google AdSense script?

Yes, you also do that, but the script component also helps optimize the website.

I use the HTML script tag in nextjs whats happened?

First, noting wrong, but your website is not optimized, and secondly, if your config EsLint. Then esLint gives you an error or warning for that.

Conclusion

In a website is the essential part of a blogging website is Adsense. In my opinion, there are very few people who use AdSense on websites. There are no data for that.

Suppose you use AdSense with nextjs on blogging sites. You use both methods, auto ads, and unit ads.

Suggestions

This article is based on my working experience and research. But I'm not tested any were. So if you read my article, make sure you try on the new website.

If you add Adsense to an old blog, make sure ads place on the website correctly and do not face any error related to AdSense in your console if you have then solved it.

400 error in google adsense
400 error in google Adsense.

If you have any queries or need my help, don't hesitate to contact me at officialrajdeepsingh[@]gmail.com. Are you migrating React to Next.js? You can also contact me and follow the Next.js publication.

Feel free to like and share my article with others if you like my writing. You also tag on Twitter official_R_deep.

https://officialrajdeepsingh.dev/

Read More content at Nextjs. Sign up for a free newsletter and join the nextjs community on medium.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store