프리미엄 배너 광고

아래 가이드에서는 프리미엄 배너 광고를 로드하고, 표시하는 방법을 설명합니다.

기본 요건

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

테스트 광고 게재위치

Placement Code(게재위치 코드)는 어드민의 인벤토리 > 게재위치 메뉴에서 게재위치를 등록 시 시스템을 통해 자동으로 생성됩니다.

테스트 게재위치 목록

placementCode

설명

SAMPLE_EXPANDABLE_BANNER_IMAGE_WEB

PC 화면을 위한 확장형 이미지 광고

확장형 형태: 가로형
확장형 표시 방법: 배너 덮음
확장형 위치: 배너 하단
레이아웃: 3

SAMPLE_EXPANDABLE_BANNER_VIDEO_WEB

PC 화면을 위한 확장형 동영상 광고

확장형 형태: 가로형
확장형 표시 방법: 배너 덮음
확장형 위치: 배너 하단
레이아웃: 3

SAMPLE_EXPANDABLE_BANNER_IMAGE_APP

Mobile 화면을 위한 확장형 이미지 광고

확장형 형태: 가로형
확장형 표시 방법: 배너 덮음
확장형 위치: 배너 하단
레이아웃: 3

SAMPLE_EXPANDABLE_BANNER_VIDEO_APP

Mobile 화면을 위한 확장형 동영상 광고

확장형 형태: 가로형
확장형 표시 방법: 배너 덮음
확장형 위치: 배너 하단
레이아웃: 3

광고 상품 설정하기

어드민의 인벤토리 > 광고상품 메뉴에서 프리미엄 배너 광고 설정을 할 수 있습니다.

광고 구성 정보 섹션에서 광고 종류 > 프리미엄 배너 광고 > 확장형 배너 동영상형 / 확장형 배너 이미지형을 선택합니다.
각 미디어 스펙의 미디어 표시명 및 옵션들을 선택합니다.

게재위치 및 사이즈 섹션에서 레이아웃을 선택할 수 있습니다.

이 부분에서 모바일용/PC용 레이아웃이 나누어지며 설정한 용도가 아닌 다른 플랫폼에서 해당 광고상품에 대한 광고 요청을 할 시 (ex.PC에서 모바일용 레이아웃이 설정된 게재위치를 요청할 경우) 동작이 어색할 수 있습니다.

모바일 웹 환경인 경우 "모바일용" 으로 설정해야 합니다.

광고 표시하기

확장 전 이미지 배너를 표시할 영역을 <div>로 생성합니다.
해당 <div> 를 slot 으로 정의해줍니다.
해당 slot 에 광고 서비스를 붙입니다.
광고 표시 설정 중 확장 후 이미지 혹은 동영상 소재에 대한 사이즈 설정이 필수로 필요합니다.
광고 서비스를 활성화 합니다.
광고를 게재합니다.

아래 섹션에서 예시 코드로 자세히 설명하겠습니다.

프리미엄 배너 광고 종류

프리미엄 배너 광고는 배너 소재가 표시되고, 배너 소재 위 힌트 에셋에 마우스를 올리거나 클릭하게 되면 확장 후 소재가 나타나는 특징이 있습니다.

크게 PC 전용 확장형 배너 이미지형, PC 전용 확장형 배너 동영상형, Mobile 전용 확장형 배너 이미지형, Mobile 전용 확장형 배너 동영상형으로 나누어집니다.

아래 예시는 공통적으로 들어가는 코드이며, 2. slot 정의, 4. 광고 표시 설정 에서 종류별로 들어가는 코드가 다릅니다.

<head>
  <script>
    // nestads 명령어 큐 생성
    window.nestads = window.nestads || { cmd: [] };

    window.nestads.cmd.push(() => {
      window.nestads
        .defineSlot(${placementCode}, ${size}, "banner-ad") // 2. slot 정의
        .addService(nestads.pubAds()); // 3. 광고 서비스 설정
        .setConfig({
          ...// 4. 종류별로 설정이 나누어지는 부분
        })
        .setTargeting("age", "20"); // 5. 타겟팅 설정 (옵션)


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

PC 전용 확장형 배너 이미지형

PC 전용 확장형 배너 이미지형 광고는 확장 후 소재가 이미지형일 때 사용합니다.

해당 광고를 불러올 때는 slot의 사이즈와 확장 후 이미지의 사이즈를 고정으로 불러와야 합니다. 설정한 사이즈가 소재의 비율보다 크다면 여백이 생긴 채로 그려집니다.

또한 확장 후 이미지가 확장 전 소재를 기준으로 어느 위치에서부터 나타날 지 설정할 수 있습니다.

// nestads 명령어 큐 생성
  window.nestads
    .defineSlot("SAMPLE_EXPANDABLE_BANNER_IMAGE_WEB", [700, 97], "banner-ad") // 2. 고정 사이즈로 slot 정의
    .setConfig({ // 4. 광고 표시 설정
      premiumBannerImage: {
        expandedBannerSize: [700, 266], // 확장 후 이미지의 사이즈 옵션 필수
        expandedPosition : "LEFT_TOP", // 왼쪽 위부터 그려짐
      },
    });

PC 전용 확장형 배너 동영상형

PC 전용 확장형 배너 동영상형 광고는 확장 후 소재가 동영상형일 때 사용합니다.

해당 광고를 불러올 때는 slot의 사이즈와 확장 후 동영상의 사이즈를 고정으로 불러와야 합니다. 설정한 사이즈가 소재의 비율보다 크다면 여백이 생긴 채로 그려집니다.

또한 확장 후 동영상이 확장 전 소재를 기준으로 어느 위치에서 부터 나타날 지 설정할 수 있습니다.

// nestads 명령어 큐 생성
  window.nestads
    .defineSlot("SAMPLE_EXPANDABLE_BANNER_VIDEO_WEB", [700, 97], "banner-ad") // 2. 고정 사이즈로 slot 정의
    .setConfig({ // 4. 광고 표시 설정
      premiumBannerVideo: {
        expandedBannerSize: [1280, 720], // 확장 후 동영상의 사이즈 옵션 필수
        expandedPosition : "RIGHT_CENTER", // 오른쪽 가운데에 맞춰서 그려짐
      },
    });

Mobile 전용 확장형 배너 이미지형

Mobile 전용 확장형 배너 이미지형 광고는 확장 후 소재가 이미지형일 때 사용합니다.

해당 광고를 불러올 때는 다양한 모바일 환경을 맞추기 위해 변동 사이즈(FLUID)를 지원합니다.

사이즈 옵션을 FLUID 로 넣으면, 부모 요소의 가로 길이 100% 에 광고의 가로 길이를 맞추고, 소재의 사이즈 비율에 맞게 그려줍니다.

// nestads 명령어 큐 생성
  window.nestads
    .defineSlot("SAMPLE_EXPANDABLE_BANNER_IMAGE_APP", "FLUID", "banner-ad") // 2. 변동 사이즈로 slot 정의
    .setConfig({ // 4. 광고 표시 설정
      premiumBannerImage: {
        expandedBannerSize: "FLUID", // 확장 후 이미지의 사이즈 옵션 필수
      },
    });

Mobile 환경에서는 변동 사이즈를 넣는 걸 권장하며, 고정 사이즈를 넣을 땐 확장 전,후의 가로 사이즈를 똑같이 설정하는 것을 권장합니다.

Mobile 전용 확장형 배너 동영상형

Mobile 전용 확장형 배너 동영상형 광고는 확장 후 소재가 동영상형일 때 사용합니다.

해당 광고를 불러올 때는 다양한 모바일 환경을 맞추기 위해 변동 사이즈(FLUID)를 지원합니다.

사이즈 옵션을 FLUID 로 넣으면, 부모 요소의 가로 길이 100% 에 광고의 가로 길이를 맞추고, 소재의 사이즈 비율에 맞게 그려줍니다.

// nestads 명령어 큐 생성
  window.nestads
    .defineSlot("SAMPLE_EXPANDABLE_BANNER_VIDEO_APP", "FLUID", "banner-ad") // 2. 변동 사이즈로 slot 정의
    .setConfig({ // 4. 광고 표시 설정
      premiumBannerImage: {
        expandedBannerSize: "FLUID", // 확장 후 동영상의 사이즈 옵션 필수
      },
    });