Google AdSense

Add Google AdSense to your React project instantly. This simple component handles both auto and manual ad setup.

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

npm i google-adsense

or

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.

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.

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 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 for details on how to contribute to this project.

📝 License

MIT

📚 Related

• Google AdSense Documentation

🐛 Issues

Kindly report any bugs or issues on the Issues page.