Nextjs + Adsense
How to add Google AdSense to your Nextjs?
The integration of Adsense in nextjs is a straightforward process. I guide you from beginner to pro-level.
You are a blogger, and you need integration of Adsense in the nextjs base website. For example, AdSense helps to earn money, and if 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.
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.
- Auto ads
- Ads unit
- Amp ads
Auto Ads
For integration, you need only three things.
- Adsense code
- Script component
- Custom app
Auto Ads
Adsense code
You need an Adsense code applied on the nextjs app in the first step.
AdSense code
Get an 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 the javascript script to the 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
strategyattribute change based on your requirement.asyncorasync="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
- auto ads take time to show your website.
- Always check the console and pass the onError function in the script component.
- 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 the code into two-part in this section and then use it in nextjs.
- Adsense code
- Convert two-part
- Convert the first part of the code
- Custom app
- 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 the 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
- Add script
- 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.
- Ad Settings Preview
- Chrome extensions
- Manual check
- 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.
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 do that with the script component.
How to apply Auto ads and ads unit both in nextjs?
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 the google AdSense script.
You also do that, but the script component helps optimize the website.
I use the HTML script tag in nextjs. What 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.
References
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.
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.
