이미지 배너 광고

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

Previous광고 종류 Next팝업 배너 광고(준비중)

Last updated 11 days ago

이미지 배너 광고

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

기본 요건

에 따라 필요한 과정을 완료합니다.

테스트 광고 게재위치

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

테스트 게재위치 목록

placementCode

설명

SAMPLE_IMAGE_BANNER/200/200

200x200 이미지 + 애드뱃지

SAMPLE_IMAGE_BANNER_NO_ADBADGE/200/200

200x200 이미지 + 애드뱃지없음

SAMPLE_IMAGE_BANNER/300/250

300x250 이미지 + 애드뱃지

SAMPLE_IMAGE_BANNER/320/50

320x50 이미지 + 애드뱃지

SAMPLE_IMAGE_BANNER/320/100

320x100 이미지 + 애드뱃지

SAMPLE_IMAGE_BANNER/640/960

640x960 이미지 + 애드뱃지

광고 표시하기

배너 광고를 표시할 영역을 <div>로 생성합니다.
해당 <div> 를 slot 으로 정의해줍니다.
해당 slot 에 광고 서비스를 붙입니다.
필요한 경우 해당 slot 에 및 광고 표시 을 합니다.
광고 서비스를 활성화 합니다.
광고를 게재합니다.

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

    window.nestads.cmd.push(() => {
      window.nestads
        .defineSlot("SAMPLE_IMAGE_BANNER/300/250", [300, 250], "banner-ad") // 2. slot 정의
        .addService(nestads.pubAds()); // 3. 광고 서비스 설정
        .setTargeting("age", "20") // 4. 타겟팅 및 표시 설정
        .setConfig({
          image: {
            backgroundType: "CUSTOM",
            backgroundColor: "#ff0000",
            backgroundTransparency: 0.5,
          },
        });

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

광고 이벤트 리스너

배너 광고에서 지원하는 이벤트 리스너는 다음을 참고하세요.