Package Exports
- @monetumo/react-ad-component
- @monetumo/react-ad-component/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@monetumo/react-ad-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Monetumo React Ad Component
A simplified React component for displaying ads with Google Publisher Tags (GPT) and Prebid.js integration.
Installation
npm install @monetumo/react-ad-component
# or
yarn add @monetumo/react-ad-componentFeatures
- Lazy loading ads with Intersection Observer
- Responsive ad sizes based on viewport
- Auto-refresh capability
- Integration with Google Publisher Tags and Prebid.js
- TypeScript support
Usage
import { MonetumoAdSlot, loadMonetumoWithFallback } from '@monetumo/react-ad-component';
// Initialize ad scripts with fallback
loadMonetumoWithFallback(500);
function MyComponent() {
return (
<MonetumoAdSlot
prefix="23169492389/DK"
adUnit="mpu_atf_listings"
label="Advertisement"
sizes={[[300, 250]]}
sizesLg={[[300, 600]]}
refreshInterval={30000}
onLoad={() => console.log('Ad loaded')}
onError={(error) => console.error(error)}
/>
);
}Configuration Options
| Property | Type | Description |
|---|---|---|
| prefix | string | Required. The prefix for your ad unit path (e.g., "23169492389/DK") |
| adUnit | string | Required. The ad unit ID |
| sizes | [number, number][] | Optional. Default ad sizes (e.g., [[300, 250]]) |
| sizesXs | [number, number][] | Optional. Ad sizes for extra small screens |
| sizesSm | [number, number][] | Optional. Ad sizes for small screens |
| sizesMd | [number, number][] | Optional. Ad sizes for medium screens |
| sizesLg | [number, number][] | Optional. Ad sizes for large screens |
| sizesXl | [number, number][] | Optional. Ad sizes for extra large screens |
| sizesXxl | [number, number][] | Optional. Ad sizes for extra extra large screens |
| label | string | Optional. Label to display above the ad (default: "Advertisement") |
| className | string | Optional. Additional CSS class names |
| refreshInterval | number | Optional. Interval in milliseconds for refreshing the ad (default: 30000) |
| onLoad | () => void | Optional. Callback when ad loads successfully |
| onError | (error: Error) => void | Optional. Callback when ad fails to load |
Script Loading
The component includes utilities to load GPT scripts. Note that Prebid.js should be loaded externally in the head of your document via the Monetumo script.
// Load the scripts immediately
import { loadMonetumo } from '@monetumo/react-ad-component';
loadMonetumo();
// Or with a fallback timeout (recommended)
import { loadMonetumoWithFallback } from '@monetumo/react-ad-component';
loadMonetumoWithFallback(500); // 500ms timeoutBreakpoints
The component uses the following breakpoints for responsive sizing:
- xs: < 576px
- sm: >= 576px
- md: >= 768px
- lg: >= 992px
- xl: >= 1200px
- xxl: >= 1400px
Development
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildLicense
MIT