𧩠React Google Ads Advanced
A lightweight, customizable React component for embedding and managing Google AdSense ads with automatic detection of unfilled ads and smart hiding logic. Includes a built-in observer that monitors ad status dynamically and hides failed or unfilled ad slots automatically. Equally useable for React, React 19, Next.js Pages Router and Next.js App Router.
[](https://www.jsdelivr.com/package/npm/react-google-ads-advanced)
[](https://standardjs.com)
[](https://npmjs.org/package/react-google-ads-advanced)
---
## π¦ Installation
```bash
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`:
```tsx
// 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 (
{/* Place observer once globally */}
);
}
```
### **Vite + React**
For **Vite**, you can use it the same way:
```tsx
// 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 (
<>
);
}
export default Main;
```
### **Next.js Pages Router**
If your app uses **pages/** (classic router):
```tsx
// 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 */}
);
}
export default MyApp;
```
### **Next.js (App Router)**
If your app uses the new **app/** directory:
```tsx
// 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 (
{children}
);
}
```
---
> NOTE: After all the initial setup according to your framework, now you can place the ad anywhere in you app:
```tsx
```
---
## βοΈ 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 `` element |
---
## Components Overview
### πͺ `GoogleAds`
Renders a Google AdSense `` tag and automatically pushes it to the `adsbygoogle` queue.
```tsx
```
### `GoogleAdsObserver`
Watches for dynamically loaded ads and hides empty or unfilled ad blocks automatically.
- Uses a `MutationObserver` to track attribute changes on all `` 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**:
```tsx
```
---
## π‘ Notes
- Must include Google AdSense script in your app according to your framework guideline:
```html
```
- 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**](https://www.farasat.me)
- Website: [www.farasat.me](https://www.farasat.me)
- LinkedIn: [linkedin.com/in/faraasat](https://linkedin.com/in/faraasat)
- GitHub: [github.com/faraasat](https://github.com/faraasat)