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)}
    />
  );
}

Sticky Footer Ad

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