next-google-adsense-app-router
v1.0.8
Published
Next.js Google AdSense for app-router
Downloads
10
Maintainers
Readme
NEXT-GOOGLE-ADSENSE-FOR-APP-ROUTER
Add Google AdSense to your Next.js app.
This package is deeply inspired by nextjs-google-adsense.
Why I don't use nextjs-google-adsense directly? Because it only support Auto Ads and Responsive Display Ad. I want to use In-article Ads. So I decided to create a new package. (read 👾 Why next-google-adsense? for more details)
Give me a ⭐ if you like it.
🗝️ Features
- Support SSR (Server-Side Rendering), SSG (Static Site Generation) and CSR (Client-Side Rendering)
- Support TypeScript
- Zero Dependencies
- Theoretically support all AdSense AD types (see 🎨 Create a custom layout for more details)
- Create
ads.txt
automatically (see Initialization / Verification for more details)
📑 Table of Contents
- 👾 Why next-google-adsense?
- 📦 Requirements
- 🚀 Getting Started
- 📖 API Reference
- 🎨 Create a custom layout
- 🐛 Known Issues
- ⭐ TODO
- 🤝 Contributing
- 📝 License
- ☕ Donation
👾 Why next-google-adsense?
| | next-google-adsense (this) | nextjs-google-adsense |
| -------------------------- | -------------------------- | ---------------------------------------------------------------------- |
| TypeScript | ✅ | ✅ |
| Support Auto Ads | ✅ | ✅ |
| Support Display Ad | ✅ | ✅ |
| Support In-feed Ad | ✅ | ❌ |
| Support In-article Ad | ✅ | ❌ |
| Support Matched Content Ad | ✅ | ❌ |
| Dynamic ads.txt
| ✅ | ❌ |
| Multiple ADs on one page | ✅ | ⚠️*1 |
*1: According to the their documentation seems it is ok to use multiple ADs on one page. But I found that it will cause an error.
📦 Requirements
- Next.js 11.0.0 or higher.
- React 17.0.0 or higher.
🚀 Getting Started
Installation
npm install next-google-adsense
Visit the npm page.
Initialization / Verification 🍀
There are two ways to verify your site (of course you can implement both):
AdSense code snippet
// app/layout.tsx // import the module import { GoogleAdSense } from "next-google-adsense"; export default function RootLayout({children}: Readonly<{children: React.ReactNode,}>) { return <html> <body> <GoogleAdSense publisherId="pub-XXXXXXXXXXXXXXXX"/> {children} </body> </html> }
You can also add the
publisherId
as environment variable asNEXT_PUBLIC_ADSENSE_PUBLISHER_ID
. The environment variable will override the prop if both are set.Ads.txt snippet
// package.json // ... "scripts": { "build": "next build && create-ads-txt", // 👈 if you want to create ads.txt automatically, recommended "create-ads-txt": "create-ads-txt" // 👈 if you want to create ads.txt manually }, // ...
⚠️ Your old
ads.txt
will be overwritten during the generation process.You must set
NEXT_PUBLIC_ADSENSE_PUBLISHER_ID
as environment variable. The environment variable will be used to generate theads.txt
.
Usage 🎉
Auto Ads
If you decide to use Auto Ads, you are good to go. The ads will be automatically displayed on your page. (Setup Auto Ads)
Manual Ads
import { AdUnit } from "next-google-adsense";
const Page = () => {
return (
<>
<AdUnit
publisherId="pub-XXXXXXXXXXXXXXXX" {/* 👈 16 digits */}
slotId="XXXXXXXXXX" {/* 👈 10 digits */}
layout="display" {/* See the API Reference for more options */}
/>
{/* or */}
<AdUnit {/* if NEXT_PUBLIC_ADSENSE_PUBLISHER_ID is set */}
slotId="XXXXXXXXXX"
layout="display"
/>
<YourContent />
</>
);
};
export default Page;
📖 API Reference
Components
Initializes the Google AdSense.
<GoogleAdSense publisherId={string}>
| Parameter | Optional | Type | Default | Description |
| ----------- | -------- | ------ | ------- | --------------------------------------------------------------------------------------------------- |
| publisherId | Yes | string | n/a | You can skip this parameter if you set the environment variable NEXT_PUBLIC_ADSENSE_PUBLISHER_ID
. |
Manual AD.
<AdUnit publisherId={string} slotId={string} layout={"display" | "in-article" | "custom"} customLayout={JSX.Element}>
| Parameter | Optional | Type | Default | Description |
| ------------ | -------- | ------------------------------------- | --------- | --------------------------------------------------------------------------------------------------- |
| publisherId | Yes | string | n/a | You can skip this parameter if you set the environment variable NEXT_PUBLIC_ADSENSE_PUBLISHER_ID
. |
| slotId | No | string | n/a | Google AdSense Slot ID. |
| layout | Yes | "display" | "in-article" | "custom" | "display" | The layout of the AD. |
| customLayout | Yes | JSX.Element | n/a | The custom layout of the AD. This parameter is required if layout
is set to "custom". |
🎨 Create a custom layout
No layout fits your needs? Let's create a custom layout.
Sample custom layout:
export const InFeedAd = () => {
return (
<ins
className="adsbygoogle"
style={{ display: "block" }}
data-ad-format="fluid"
data-ad-layout-key="<AD_LAYOUT_KEY>"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
/>
);
};
How to convert the given html to a custom layout?
Example (provided by Google AdSense):
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
crossorigin="anonymous"
></script>
<ins
class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="<AD_LAYOUT_KEY>"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Remove all the
<script>
tags.You will get the following html:
<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="<AD_LAYOUT_KEY>" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX" > </ins>
Convert the html to JSX:
export const InFeedAd = () => { return ( <ins className="adsbygoogle" style={{ display: "block" }} data-ad-format="fluid" data-ad-layout-key="<AD_LAYOUT_KEY>" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX" /> ); };
Done! You can now use the custom layout in your app.
<AdUnit publisherId="<your-publisher-id>" slotId="<your-slot-id>" layout="custom" customLayout={InFeedAd}>
Full Code:
import { AdUnit } from "next-google-adsense";
export const InFeedAd = () => {
return (
<ins
className="adsbygoogle"
style={{ display: "block" }}
data-ad-format="fluid"
data-ad-layout-key="<AD_LAYOUT_KEY>"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
/>
);
};
const Page = () => {
return (
<>
<AdUnit
publisherId="pub-XXXXXXXXXXXXXXXX" {/* 👈 16 digits */}
slotId="XXXXXXXXXX" {/* 👈 10 digits */}
layout="custom"
customLayout={InFeedAd}
/>
<YourContent />
</>
);
};
🐛 Known Issues
- Waiting for your report.
⭐ TODO
- Add custom layout validation.
🤝 Contributing
Contributions are welcome! If you find a bug or have a feature request, please open an issue. If you want to contribute code, please fork the repository and submit a pull request.
Before you open a pull request, please make sure that you run npm run dev:test
to make sure the code run as expected.
📝 License
This project is licensed under the MIT License - see the LICENSE file for details
☕ Donation
Love it? Consider a donation to support my work.