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 React component for displaying ads with Google Publisher Tags (GPT) and Prebid.js integration. Designed for easy integration with remote configuration support.

Installation

npm install @monetumo/react-ad-component

Features

🚀 Lazy loading with Intersection Observer
📱 Responsive ad sizes via remote configuration
🔄 Auto-refresh capability
🎯 GPT & Prebid.js integration
⚡ TypeScript support
🌐 Remote configuration driven

Basic Usage

import { MonetumoAdSlot } from '@monetumo/react-ad-component';

function MyComponent() {
  return (
    <MonetumoAdSlot
      prefix="23169492389/DK"
      adUnit="mpu_atf_listings"
      refreshInterval={30000}
      onLoad={() => console.log('Ad loaded')}
      onError={(error) => console.error('Ad error:', error)}
    />
  );
}

Advanced Usage

import { MonetumoAdSlot } from '@monetumo/react-ad-component';

function MyComponent() {
  return (
    <MonetumoAdSlot
      prefix="23169492389/DK"
      adUnit="banner_top"
      sizes={[[728, 90], [970, 250]]} // Optional size override
      label="Advertisement"
      className="my-custom-ad-class"
      refreshInterval={60000}
      onLoad={() => console.log('Ad loaded successfully')}
      onError={(error) => console.error('Ad failed to load:', error)}
    />
  );
}

The package also includes a specialized sticky footer ad component:

import { StickyFooterAd } from '@monetumo/react-ad-component';

function App() {
  return (
    <div>
      {/* Your app content */}
      
      <StickyFooterAd
        prefix="23169492389/DK"
        adUnit="sticky_footer"
        disabledRoutes={['/privacy', '/terms']}
        autoHideAfter={30000} // Auto-hide after 30 seconds
        onClose={() => console.log('Sticky ad closed')}
      />
    </div>
  );
}

StickyFooterAd Props

Property	Type	Default	Description
`prefix`	`string`	`"23169492389/DK"`	Ad unit prefix
`adUnit`	`string`	`"sticky_footer"`	Ad unit identifier
`sizes`	`[number, number][]`	Optional	Ad size override
`disabledRoutes`	`string[]`	`[]`	Routes where the ad shouldn't appear
`onClose`	`() => void`	Optional	Callback when user closes the ad
`autoHideAfter`	`number`	Optional	Auto-hide after X milliseconds

Configuration Options

Property	Type	Default	Description
`prefix`	`string`	Required	The prefix for your ad unit path (e.g., "23169492389/DK")
`adUnit`	`string`	Required	The ad unit identifier
`sizes`	`[number, number][]`	Optional	Ad size override (uses remote config if not provided)
`label`	`string`	`"Advertisement"`	Label displayed above the ad
`className`	`string`	`""`	Additional CSS class names
`refreshInterval`	`number`	`30000`	Auto-refresh interval in milliseconds
`onLoad`	`() => void`	Optional	Callback when ad loads successfully
`onError`	`(error: Error) => void`	Optional	Callback when ad fails to load

Remote Configuration

The component primarily uses remote configuration for ad sizes and settings via window.monetumoRemoteSettings:

window.monetumoRemoteSettings = {
  slotSizes: {
    "banner_top": {
      "xs": [[320, 50]],
      "sm": [[728, 90]],
      "lg": [[970, 250]]
    }
  },
  tealPlacementPrefix: "your-prefix-"
};

Prerequisites

Ensure that Google Publisher Tags (GPT) and Prebid.js are loaded in your application before using this component. These should typically be loaded in your application's head section.

TypeScript Support

The component includes full TypeScript definitions. Import types as needed:

import { MonetumoAdSlot } from '@monetumo/react-ad-component';

type AdSize = [number, number];

interface MyAdProps {
  adUnit: string;
  customSizes?: AdSize[];
}

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Publish to npm
npm publish

License

MIT