google-adsense
Version:
Add Google AdSense to your React project instantly. This simple component handles both auto and manual ad setup.
132 lines (92 loc) • 6.48 kB
Markdown
# Google AdSense
[](./LICENSE) [](https://www.npmjs.com/package/google-adsense) [](./CONTRIBUTING.md)
Add Google AdSense to your React project instantly. This simple component handles both auto and manual ad setup.
```jsx
import AdSense from "google-adsense";
export const HomePage = () => (
<>
<AdSense client="ca-1234567890123456" /> {/* Auto Ad */}
{/* Manual Ad */}
<AdSense client="ca-1234567890123456" slot="1234567890" />
</>
);
```
## ✨ Features
| | Feature | Description |
| --- | ------------------------------- | ----------------------------------------------------------------------------- |
| ✅ | **Easy AdSense Integration** | Seamlessly integrate Google AdSense into your React applications. |
| ✅ | **Manual/Auto Ads Support** | Use specific ad slots or let AdSense automatically place ads. |
| ✅ | **Responsive Ad Customization** | Control ad layouts, layout keys, and densities for optimal responsiveness. |
| ✅ | **Flexible Styling** | Customize ad container and `ins` tag with class names and inline styles. |
| ✅ | **Error Handling** | Detects and handles unfilled ads, preventing layout issues. |
| ✅ | **Dynamic Script Loading** | Efficiently loads the AdSense script only when needed, preventing duplicates. |
| ✅ | **TypeScript Support** | Fully typed for a smooth development experience. |
| ✅ | **No Configs required** | Simple and intuitive API, reducing setup time. |
## 🚀 Getting Started
### Installation
```bash
npm i google-adsense
```
or
```bash
yarn add google-adsense
```
### Usage
#### Auto Ads
Let Google's Auto Ads intelligently place ads on your page. This is the easiest way to get started.
```jsx
import React from "react";
import AdSense from "google-adsense";
const App = () => {
return (
<div>
<AdSense client="ca-pub-1234567890123456" />
</div>
);
};
export default App;
```
#### Manual Ad Placement
For more control, you can specify the exact placement of your ads using ad slots.
```jsx
import React from "react";
import AdSense from "google-adsense";
const App = () => {
return (
<div>
<AdSense client="ca-pub-1234567890123456" slot="YOUR_AD_SLOT_ID" />
</div>
);
};
export default App;
```
**Important:** Replace `ca-pub-1234567890123456` and `YOUR_AD_SLOT_ID` with your actual AdSense Publisher and Slot IDs found in your AdSense account.
#### Simplified AdSense Integration
This AdSense component provides a straightforward way to integrate Google AdSense into your web applications. It supports both automatic and manual ad placements. For automatic ads, provide your AdSense Publisher ID, and the component will leverage Google's Auto Ads. For manual placement, you can specify an ad slot ID and _optionally_ customize ad format, layout, and styling.
#### Robust and Efficient
The component dynamically loads the AdSense script to ensure optimal performance and prevent redundant inclusions. It also includes error handling with `MutationObserver` to detect and address unfilled ad slots, preventing layout issues. Responsive design is supported through options for controlling ad layouts, densities, and full-width responsiveness.
#### Enhanced Developer Experience
Built with TypeScript, this component provides type safety and clear interfaces. The intuitive API minimizes configuration overhead, allowing for quick AdSense integration. By encapsulating the complexities of AdSense, this component enables developers to focus on building their applications while seamlessly monetizing their content.
### Props
| Prop | Type | Description | Required |
| --------------------- | ------- | ----------------------------------------------------------------------------------------- | -------- |
| `client` | string | Your Google AdSense Publisher ID (e.g., "ca-pub-1234567890123456"). | Yes |
| `slot` | string | The Ad Slot ID (e.g., "1234567890"). Required for manual ad placement. Omit for Auto Ads. | No |
| `format` | string | The ad format (e.g., "horizontal", "vertical", "square", "auto"). Defaults to "auto". | No |
| `className` | string | Custom class name for the ad element <ins> tags. | No |
| `containerClass` | string | Custom container class name for the ad container. | No |
| `style` | object | Inline styles for the ad container element. Defaults to `{ display: 'block' }`. | No |
| `layout` | string | Ad layout. For responsive ads. Consult AdSense documentation for valid values. | No |
| `layoutKey` | string | Ad layout key. For responsive ads. Consult AdSense documentation for valid values. | No |
| `layoutDensity` | string | Ad layout density. For responsive ads. Consult AdSense documentation for valid values. | No |
| `fullWidthResponsive` | boolean | Enables full-width responsive ads. Defaults to `false`. | No |
| `width` | string | Width of the ad container. Defaults to `100%`. | No |
| `height` | string | Height of the ad container. Defaults to `auto`. | No |
## 🤝 Contributing
Contributions are welcome! Kindly see the [Contributing Guide](./CONTRIBUTING.md) for details on how to contribute to this project.
## 📝 License
[MIT](./LICENSE)
## 📚 Related
- [Google AdSense Documentation](https://support.google.com/adsense?sjid=12746306205683557304-EU#topic=3373519)
## 🐛 Issues
Kindly report any bugs or issues on the [Issues page](https://github.com/ranajahanzaib/google-adsense/issues).