npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

next-google-adsense-app-router

v1.0.8

Published

Next.js Google AdSense for app-router

Downloads

10

Readme

NEXT-GOOGLE-ADSENSE-FOR-APP-ROUTER

Weekly Download Tests MIT License   Donation

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?

| | 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):

  1. 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 as NEXT_PUBLIC_ADSENSE_PUBLISHER_ID. The environment variable will override the prop if both are set.

  2. 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 the ads.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>
  1. Remove all the <script> tags.

  2. 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>
  3. 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"
        />
      );
    };
  4. 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.

"Donation" <- click me~