메인 콘텐츠로 건너뛰기

​
구현 방법

네이티브 광고는 앱의 디자인에 맞게 커스텀 UI로 광고를 표시할 수 있습니다.
방식설명추천
기본 템플릿SDK 제공 템플릿 사용빠른 구현
커스텀 UI직접 UI 구성디자인 맞춤 필요 시
개발 환경에서는 테스트 유닛 ID를 사용하세요: PUBLIC_TEST_UNIT_ID_NATIVE

​
기본 템플릿

배너 광고와 동일한 방식으로 기본 템플릿을 사용할 수 있습니다. SDK가 제공하는 템플릿에 이미지, 텍스트가 자동으로 렌더링됩니다. 
<div data-adrop-unit="YOUR_NATIVE_UNIT_ID"></div>
기본 템플릿은 광고주 프로필 섹션을 지원하지 않습니다. 광고주 프로필을 표시하려면 커스텀 UI를 사용하세요.

​
커스텀 UI

​
Data Attributes 방식

data-adrop-render="custom" 속성을 추가하고, 내부 요소에 data-adrop-native 속성으로 필드를 바인딩합니다. 
<div
  data-adrop-unit="YOUR_NATIVE_UNIT_ID"
  data-adrop-render="custom"
  data-adrop-entire-click="true"
  class="native-ad">

  <!-- 광고주 프로필 -->
  <div class="ad-profile">
    <img data-adrop-native="profile.displayLogo" alt="광고주">
    <span data-adrop-native="profile.displayName"></span>
  </div>

  <!-- 광고 콘텐츠 -->
  <h3 data-adrop-native="headline"></h3>
  <img data-adrop-native="asset" alt="광고">
  <p data-adrop-native="body"></p>

  <!-- 추가 텍스트 항목 -->
  <span data-adrop-native="extra.price"></span>

  <!-- CTA 버튼 -->
  <button data-adrop-native="callToAction"></button>
</div>

​
Data Attributes

​
data-adrop-unit
string
required
애드컨트롤 콘솔에서 생성한 유닛 ID
​
data-adrop-render
string
required
커스텀 UI 사용 시 custom으로 설정
​
data-adrop-context-id
string
문맥 타겟팅용 Context ID
​
data-adrop-theme
string
default:"light"
테마 설정 (light 또는 dark)
​
data-adrop-entire-click
boolean
default:false
전체 영역 클릭 활성화
  • false: 텍스트/이미지만 클릭 가능, 광고주 프로필 클릭 시 프로필 링크로 이동
  • true: 컨테이너 전체 클릭 가능, 모든 클릭이 광고 목적지로 이동

​
renderAd 방식

광고 로드 타이밍을 직접 제어하고 싶을 때 사용합니다. 
<div id="native-ad-container" class="native-ad">
  <div class="ad-profile">
    <img data-adrop-native="profile.displayLogo" alt="광고주">
    <span data-adrop-native="profile.displayName"></span>
  </div>
  <h3 data-adrop-native="headline"></h3>
  <img data-adrop-native="asset" alt="광고">
  <p data-adrop-native="body"></p>
  <button data-adrop-native="callToAction"></button>
</div>

<script>
  const container = document.getElementById('native-ad-container');
  const adrop = Adrop.instance();

  adrop.renderAd(container, {
    unit: 'YOUR_NATIVE_UNIT_ID',
    contextId: 'YOUR_CONTEXT_ID',
    theme: 'light',
    trackMode: 1,        // 커스텀 UI 사용 시 필수
    isEntireClick: true  // 전체 영역 클릭 활성화
  });
</script>

​
renderAd 옵션

​
unit
string
required
애드컨트롤 콘솔에서 생성한 유닛 ID
​
uid
string
사용자 식별자 (SDK 설정 값을 개별 지면에서 오버라이드할 때 사용)
​
contextId
string
문맥 타겟팅용 Context ID
​
trackMode
number
required
커스텀 UI 사용 시 1로 설정
​
isEntireClick
boolean
default:false
전체 영역 클릭 활성화
​
theme
string
default:"light"
테마 설정 (light 또는 dark)

​
필드 바인딩

data-adrop-native 속성으로 광고 데이터를 UI 요소에 바인딩합니다.
필드설명요소 타입
profile.displayLogo광고주 로고 URL<img>
profile.displayName광고주 이름텍스트
headline광고 제목텍스트
body광고 설명텍스트
asset메인 이미지 URL<img>
callToActionCTA 버튼 텍스트텍스트
extra.{key}추가 텍스트 항목텍스트
extra.{key}는 애드컨트롤 콘솔에서 설정한 추가 텍스트 항목의 ID입니다. 필수로 설정하지 않았다면 비어있을 수 있습니다.
광고주 프로필(profile.displayLogo, profile.displayName)을 표시하려면 애드컨트롤 콘솔에서 해당 광고 유닛의 광고주 프로필 표시를 활성화해야 합니다.

​
광고 크기

커스텀 UI의 크기는 자유롭게 설정할 수 있습니다.
구분크기 설정정렬
직광고반응형 지원가로/세로 가운데
백필 광고초기 너비 맞춤, 높이 필수가로 가운데
백필 광고는 컨테이너 크기에 맞는 소재를 요청합니다. 적절한 크기를 지정하세요.

​
requestAd로 데이터만 가져오기

UI를 완전히 직접 제어하고 싶다면 requestAd로 광고 데이터만 가져올 수 있습니다. 
<div id="native-ad-container"></div>

<script>
  async function loadNativeAd() {
    const adrop = Adrop.instance();

    const response = await adrop.requestAd({
      unit: 'YOUR_NATIVE_UNIT_ID',
      trackMode: 1
    });

    if (response.code === 0 && response.result) {
      const ad = response.result;
      const container = document.getElementById('native-ad-container');

      container.innerHTML =
        '<div class="native-ad">' +
          '<div class="ad-header">' +
            '<img src="' + (ad.profile?.displayLogo || '') + '" alt="로고">' +
            '<span>' + (ad.profile?.displayName || '') + '</span>' +
          '</div>' +
          '<h3>' + (ad.headline || '') + '</h3>' +
          '<img src="' + (ad.asset || '') + '" alt="광고">' +
          '<p>' + (ad.body || '') + '</p>' +
          '<a href="' + ad.destinationURL + '" target="_blank">' + ad.callToAction + '</a>' +
        '</div>';
    }
  }

  loadNativeAd();
</script>
requestAd 사용 시 노출/클릭 추적을 직접 구현해야 합니다. 또한 이 방식에서는 백필 광고가 지원되지 않습니다. 특별한 경우가 아니라면 renderAd를 권장합니다.

​
AdropAdResponse

requestAd()의 반환값입니다.
필드타입설명
codenumber응답 코드 (0: 성공, 4000-4003: 에러)
msgstring응답 메시지
resultAdData광고 데이터 (성공 시에만 존재)

​
AdData

광고 데이터 객체입니다. 이벤트 핸들러에서도 동일한 구조로 전달됩니다. 전체 인터페이스 정의는 레퍼런스 > AdData에서 확인하세요.
필드타입설명
formatstring광고 포맷 (banner, nativeAd, backfill)
unitstring유닛 ID
headlinestring광고 제목
bodystring광고 설명
callToActionstringCTA 버튼 텍스트
assetstring메인 이미지 URL
destinationURLstring클릭 시 이동할 URL
profile.displayLogostring광고주 로고 URL
profile.displayNamestring광고주 이름
profile.linkstring광고주 프로필 링크
extraRecord<string, string>추가 텍스트 항목

​
이벤트 처리

<script>
  const adrop = Adrop.instance();
  const filter = { unit: 'YOUR_NATIVE_UNIT_ID' };

  function handleReceived(unit, adData) {
    console.log('광고 수신:', adData);
  }

  function handleNoFill(unit) {
    console.warn('광고 없음:', unit);
  }

  function handleFailed(unit) {
    console.error('광고 실패:', unit);
  }

  function handleImpression(unit) {
    console.log('광고 노출:', unit);
  }

  function handleClicked(unit) {
    console.log('광고 클릭:', unit);
  }

  adrop.on(Adrop.Events.AD_RECEIVED, handleReceived, filter);
  adrop.on(Adrop.Events.AD_NO_FILL, handleNoFill, filter);
  adrop.on(Adrop.Events.AD_FAILED, handleFailed, filter);
  adrop.on(Adrop.Events.AD_IMPRESSION, handleImpression, filter);
  adrop.on(Adrop.Events.AD_CLICKED, handleClicked, filter);
</script>

​
지원 이벤트

이벤트상수설명
광고 수신AD_RECEIVED광고 요청 성공
광고 없음AD_NO_FILL송출 가능한 직광고 없음
요청 실패AD_FAILED광고 요청 실패
노출AD_IMPRESSION광고 노출 기록됨
클릭AD_CLICKED사용자가 광고 클릭
백필 없음AD_BACKFILL_NO_FILL백필 광고 없음