이미지 배너 광고

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

기본 요건

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

테스트 광고 게재위치

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 으로 정의해줍니다. 3. 참고
해당 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 정의
        // .defineSlot("SAMPLE_IMAGE_BANNER/300/250", "FLUID", "banner-ad") // 2-1. 변동 사이즈로 정의 가능
        .addService(nestads.pubAds()); // 3. 광고 서비스 설정
        .setTargeting("age", "20") // 4. 타겟팅 및 표시 설정
        .setConfig({
          banner: {
            backgroundType: "CUSTOM",
            backgroundColor: "#ff0000",
            backgroundOpacity: 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>

광고 이벤트 리스너

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

공통 이벤트

Previous광고 종류 Next팝업 배너 광고

Last updated 7 days ago