Banner Ads

Banner ads are image‑based and the most common format on the web. The AdStage SDK provides automatic sizing, optional slide rotation, and background loading for performance.

🎯 Basic Usage

// Prepare container in HTML
// <div id="banner-container"></div>
 
// Create a basic banner ad
AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 250
});

Click Event Handling

AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 250,
  onClick: (adData) => {
    console.log('Banner ad clicked:', adData);
    // Add custom logic
  }
});

⚙️ Configuration Options

Core Options

Option	Type	Default	Description
`width`	`string	number`	`'100%'`
`height`	`number`	`250`	Banner height (px)
`onClick`	`function`	`undefined`	Callback executed on click

Advanced Options

Option	Type	Default	Description
`autoSlide`	`boolean`	`false`	Auto slide when multiple ads
`slideInterval`	`number`	`5000`	Slide interval (ms)
`adId`	`string`	`undefined`	Force specific ad ID

Filtering Options

Option	Type	Default	Description
`language`	`'ko'	'en'	'ja'
`deviceType`	`'MOBILE'	'DESKTOP'`	`undefined`
`country`	`'KR'	'US'	'JP'

💡 Practical Examples

Use the simplest CDN approach directly in HTML.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Banner Ad Example</title>
</head>
<body>
  <h1>My Website</h1>
  
  <!-- Banner Ad Container -->
  <div id="banner-container" style="width: 100%; height: 250px; border: 1px solid #ddd;">
    Loading...
  </div>
 
  <!-- AdStage SDK -->
  <script src="https://unpkg.com/@adstage/web-sdk/dist/index.umd.js"></script>
  <script>
    AdStage.init({
      apiKey: 'your-api-key'
    });
 
    AdStage.ads.banner('banner-container', {
      width: '100%',
      height: 250
    });
  </script>
</body>
</html>

🚀 Advanced Features

Auto Slide

Automatically rotate through multiple banner creatives.

AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 250,
  autoSlide: true,        // enable rotation
  slideInterval: 3000     // 3s interval
});

Adjust banner size based on viewport.

const getResponsiveHeight = () => {
  if (window.innerWidth <= 768) return 100;   // Mobile
  if (window.innerWidth <= 1024) return 200;  // Tablet
  return 250;                                 // Desktop
};
 
AdStage.ads.banner('banner-container', {
  width: '100%',
  height: getResponsiveHeight(),
  deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
});
 
window.addEventListener('resize', () => {
  AdStage.ads.destroy(slotId);
  slotId = AdStage.ads.banner('banner-container', {
    width: '100%',
    height: getResponsiveHeight(),
    deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
  });
});

Force Specific Ad ID

AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 250,
  adId: 'banner-ad-123'
});

🔧 Optimization Tips

1. Dynamic Size Adaptation

AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 'auto'  // auto adjust to image aspect
});

2. Background Loading

const slotId = AdStage.ads.banner('banner-container');
console.log('Slot created:', slotId); // immediate

3. Automatic Cleanup

const slotId = AdStage.ads.banner('banner-container');
document.getElementById('banner-container').remove(); // auto cleanup

🎨 Styling

SDK CSS Classes

.adstage-ad {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
 
.adstage-loading {
  opacity: 0.7;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}
 
@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
 
.adstage-loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}
 
.adstage-error {
  border: 1px solid #ff6b6b;
  background-color: #ffe0e0;
}

Slot State Inspection

const allSlots = AdStage.ads.getAllSlots();
console.log('All ad slots:', allSlots);
 
const slot = AdStage.ads.getSlotById(slotId);
console.log('Slot info:', slot);