광고 응답 기반 설정

아래 가이드에서는 한 게재위치에 여러 광고 형식을 설정하고, 광고 응답에 따라 자동으로 적절한 광고 형식을 표시하는 방법을 설명합니다.

개요

한 게재위치에 여러 광고 형식(예: 이미지 배너 광고, 프리미엄 배너 광고)을 동시에 설정하면, SDK가 광고 응답을 받은 후 응답에 포함된 광고 형식에 맞춰 자동으로 적절한 광고를 표시합니다.

이 방식을 사용하면:

하나의 게재위치에서 여러 광고 형식을 지원할 수 있습니다
광고 서버에서 반환하는 광고 형식에 따라 자동으로 적절한 UI가 렌더링됩니다
코드를 단순화하고 유지보수를 쉽게 할 수 있습니다

기본 요건

시작 가이드에 따라 필요한 과정을 완료합니다.

예시: 이미지 배너 + 프리미엄 배너 광고

한 게재위치에 이미지 배너 광고와 프리미엄 배너 광고를 동시에 설정하는 예시입니다.

설정 방법

배너 광고를 표시할 영역을 <div>로 생성합니다.
해당 <div>를 slot으로 정의합니다.
setConfig() 메서드에서 banner와 premiumBannerVideo (또는 premiumBannerImage) 설정을 모두 추가합니다.
해당 slot에 광고 서비스를 붙입니다.
필요한 경우 타겟팅 및 기타 설정을 추가합니다.
광고 서비스를 활성화합니다.
광고를 게재합니다.

코드 예시

<head>
  <script async src="nestads-sdk.js"></script>
  <script>
    // nestads 명령어 큐 생성
    window.nestads = window.nestads || { cmd: [] };

    window.nestads.cmd.push(() => {
      window.nestads
        .defineSlot("YOUR_PLACEMENT_CODE", [640, 148], "banner-ad") // 2. slot 정의
        .setConfig({
          // 3. 이미지 배너 광고 설정
          banner: {
            radius: 10,
          },
          // 3. 프리미엄 배너 동영상 광고 설정
          premiumBannerVideo: {
            expandedBannerSize: [640, 360],
            hintAssetSize: "md",
            radius: 10,
          },
        })
        .addService(nestads.pubAds()); // 4. 광고 서비스 설정

      window.nestads.enableServices(); // 6. 광고 서비스 활성화
      window.nestads.display("banner-ad"); // 7. 광고 게재
    });
  </script>
</head>
<body>
  <!-- 1. 배너 광고 표시할 영역에 div 생성 -->
  <div id="banner-ad"></div>
</body>

동작 방식

광고 요청 시 SDK는 서버에 광고를 요청합니다.
서버 응답에 이미지 배너 광고가 포함된 경우:
- banner 설정에 따라 이미지 배너 광고가 표시됩니다.
서버 응답에 프리미엄 배너 광고가 포함된 경우:
- premiumBannerVideo (또는 premiumBannerImage) 설정에 따라 프리미엄 배너 광고가 표시됩니다.
SDK가 응답에 포함된 광고 형식을 자동으로 감지하여 적절한 UI를 렌더링합니다.

프리미엄 배너 이미지형 사용 예시

프리미엄 배너 이미지형을 사용하는 경우:

<head>
  <script async src="nestads-sdk.js"></script>
  <script>
    window.nestads = window.nestads || { cmd: [] };

    window.nestads.cmd.push(() => {
      window.nestads
        .defineSlot("YOUR_PLACEMENT_CODE", [640, 148], "banner-ad")
        .setConfig({
          banner: {
            radius: 10,
          },
          // 프리미엄 배너 이미지형 설정
          premiumBannerImage: {
            expandedBannerSize: [640, 360],
            expandedPosition: "LEFT_TOP",
            radius: 10,
          },
        })
        .addService(nestads.pubAds());

      window.nestads.enableServices();
      window.nestads.display("banner-ad");
    });
  </script>
</head>
<body>
  <div id="banner-ad"></div>
</body>

주의사항

게재위치 설정: 어드민에서 해당 게재위치가 이미지 배너 광고와 프리미엄 배너 광고를 모두 지원하도록 설정되어 있어야 합니다.
설정 옵션: 각 광고 형식에 필요한 설정 옵션을 모두 제공해야 합니다. 예를 들어, 프리미엄 배너 광고의 경우 expandedBannerSize는 필수 옵션입니다.
사이즈 일관성: slot의 사이즈와 각 광고 형식의 사이즈 설정이 일관성 있게 구성되어야 합니다.

참고 자료

Previous커스텀형 광고 NextReference

Last updated 11 days ago