Banner Ads

Banner ads are image-based ads and are the most commonly used ad format on websites. The AdStage SDK supports automatic resizing, slide functionality, and background loading for banner ads.

🎯 Basic Usage

// HTML에 컨테이너 준비
// <div id="banner-container"></div>
 
// SDK 초기화 (한 번만)
AdStage.init({
  apiKey: process.env.NEXT_PUBLIC_ADSTAGE_API_KEY
});
 
// 기본 배너 광고 생성
AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 250
});

Handling Click Events

AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 250,
  onClick: (adData) => {
    console.log('배너 광고 클릭됨:', adData);
    // 사용자 정의 로직 추가 가능
  }
});

⚙️ Configuration Options

Basic Options

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

Advanced Options

Option	Type	Default	Description
`autoSlide`	`boolean`	`false`	Auto-slide when multiple ads are present
`slideInterval`	`number`	`5000`	Slide interval (milliseconds)
`adId`	`string`	`undefined`	Specify a particular ad ID

Filtering Options

Option	Type	Default	Description
`language`	`'ko' \| 'en' \| 'ja' \| 'zh'`	`undefined`	Filter by language
`deviceType`	`'MOBILE' \| 'DESKTOP'`	`undefined`	Filter by device
`country`	`'KR' \| 'US' \| 'JP' \| 'CN' \| 'DE'`	`undefined`	Filter by country

💡 Real-World Implementation Examples

The simplest CDN approach lets you use it directly in HTML.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>배너 광고 예제</title>
</head>
<body>
  <h1>내 웹사이트</h1>
  
  <!-- 배너 광고 컨테이너 -->
  <div id="banner-container" style="width: 100%; height: 250px; border: 1px solid #ddd;">
    로딩 중...
  </div>
 
  <!-- AdStage SDK 로드 -->
  <script src="https://unpkg.com/@adstage/web-sdk/dist/index.umd.js"></script>
  <script>
    // SDK 초기화
    AdStage.init({
      apiKey: 'your-api-key'
    });
 
    // 배너 광고 생성
    AdStage.ads.banner('banner-container', {
      width: '100%',
      height: 250
    });
  </script>
</body>
</html>

🚀 Advanced Features

Auto-Slide

A feature that automatically slides through banner ads when multiple are present.

AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 250,
  autoSlide: true,        // 자동 슬라이드 활성화
  slideInterval: 3000     // 3초마다 슬라이드
});

How to adjust the banner size according to the screen size.

// 미디어 쿼리를 활용한 반응형 구현
const getResponsiveHeight = () => {
  if (window.innerWidth <= 768) {
    return 100;  // 모바일: 높이 100px
  } else if (window.innerWidth <= 1024) {
    return 200;  // 태블릿: 높이 200px
  } else {
    return 250;  // 데스크톱: 높이 250px
  }
};
 
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'
  });
});

Specifying a Particular Ad ID

Use this when you want to display only a specific banner ad.

AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 250,
  adId: 'banner-ad-123'  // 특정 광고 ID
});

🔧 Optimization Tips

1. Leverage Dynamic Resizing

The SDK automatically optimizes the container to fit the image size.

// 이미지 크기에 맞춰 자동 조정
AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 'auto'  // 이미지 비율에 맞춰 자동 조정
});

2. Background Loading

Ads load in the background, so you can receive the slot ID immediately.

// 즉시 슬롯 ID 반환
const slotId = AdStage.ads.banner('banner-container');
console.log('슬롯 생성됨:', slotId);  // 즉시 실행
 
// 실제 광고는 비동기로 로드됨

3. Leverage Automatic Cleanup

When the container is removed from the DOM, the ad is also cleaned up automatically.

const slotId = AdStage.ads.banner('banner-container');
 
// DOM에서 컨테이너 제거 시 자동 정리됨
document.getElementById('banner-container').remove();
// 수동으로 destroy() 호출할 필요 없음

🎨 Styling

Leveraging CSS Classes

You can apply styling using the CSS classes that the SDK adds automatically.

/* 광고 컨테이너 기본 스타일 */
.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;
}

Checking Slot Status

// 모든 슬롯 확인
const allSlots = AdStage.ads.getAllSlots();
console.log('전체 광고 슬롯:', allSlots);
 
// 특정 슬롯 확인
const slot = AdStage.ads.getSlotById(slotId);
console.log('슬롯 정보:', slot);