react-google-ads-advanced

v1.0.5

Published

4 months ago

A React component for integrating Google Ads with capability to suppress ads which are unfilled or not loaded, enhancing user experience by avoiding empty ad spaces.

Downloads

0High
0Medium
0Low

faraasat

react nextjs next.js adsense google adsense google ads ads react adsense next adsense advanced ads

npm version package size minified

total downloads total downloads per year total downloads per week total downloads per month download-image

📦 Installation

npm i react-google-ads-advanced

# or
yarn add react-google-ads-advanced

# or
pnpm i react-google-ads-advanced

# or
bun add react-google-ads-advanced

🚀 Features

Easy to use React component
Automatically loads Google AdSense ads
Observes ad fill status and hides unfilled ads
Fully customizable with className and style props
Lightweight and zero dependencies
Supports responsive ads out of the box

🧠 Usage

Before doing any of this, you must make sure Adsense Ads Script is in your project according to the framework guidelines.

React (CRA)

If you’re using Create React App or a plain React setup, first import the global observer in the App.tsx or App.jsx:

// src/App.tsx|jsx
import React from "react";

import { GoogleAdsObserver } from "react-google-ads-advanced";

// VERY IMPORTANT
import "react-google-ads-advanced/dist/index.css";

function App() {
  return (
    <div className="App">
      {/* Place observer once globally */}
      <GoogleAdsObserver />
    </div>
  );
}

Vite + React

For Vite, you can use it the same way:

// src/main.tsx|jsx
import React from "react";

import { GoogleAdsObserver } from "react-google-ads-advanced";

// VERY IMPORTANT
import "react-google-ads-advanced/dist/index.css";

function Main() {
  return (
    <>
      <GoogleAdsObserver />
    </>
  );
}

export default Main;

Next.js Pages Router

If your app uses pages/ (classic router):

// pages/_app.tsx|jsx
import type { AppProps } from "next/app";

import { GoogleAdsObserver } from "react-google-ads-advanced";

// VERY IMPORTANT
import "react-google-ads-advanced/dist/index.css";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      {/* Global ad observer */}
      <GoogleAdsObserver />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Next.js (App Router)

If your app uses the new app/ directory:

// app/layout.tsx|jsx
import "./globals.css";

import { GoogleAdsObserver } from "react-google-ads-advanced";

// VERY IMPORTANT
import "react-google-ads-advanced/dist/index.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <GoogleAdsObserver />
        {children}
      </body>
    </html>
  );
}

NOTE: After all the initial setup according to your framework, now you can place the ad anywhere in you app:

<GoogleAd
    clientId="<your-client-id>"
    slot="<your-slot-id>"
    {/* OTHER PROPS */}
/>

⚙️ Props

| Prop | Type | Default | Description | | ----------------------- | --------------------- | ------------ | ----------------------------------------------------- | | clientId | string | Required | Your Google AdSense client ID (ca-pub-XXXXXXXXXXXX) | | slot | string | Required | Ad slot ID from AdSense | | adFormat | string | "auto" | Format of the ad (auto, rectangle, etc.) | | adFullWidthResponsive | string | "true" | Enables full-width responsive ads | | className | string | "" | Additional custom CSS classes | | style | React.CSSProperties | {} | Inline styles for the ad block | | ...rest | any | — | Other props passed to the <ins> element |

Components Overview

🪄 `GoogleAds`

Renders a Google AdSense <ins> tag and automatically pushes it to the adsbygoogle queue.

<GoogleAds clientId="<your-client-id>" slot="<your-slot-id>" adFormat="auto" />

`GoogleAdsObserver`

Watches for dynamically loaded ads and hides empty or unfilled ad blocks automatically.

Uses a MutationObserver to track attribute changes on all <ins> tags.
If the ad is marked as "done" but "unfilled" or has no children (iframe missing), it hides the element.

You only need one instance globally:

<GoogleAdsObserver />

💡 Notes

Must include Google AdSense script in your app according to your framework guideline:

<script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  crossorigin="anonymous"
></script>

Make sure your AdSense account and slots are approved before testing.
Ads do not work in the development mode.

🧑‍💻 Author

Built and maintained by Farasat Ali

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme