네이티브 광고

<div data-adrop-unit="YOUR_NATIVE_UNIT_ID"></div>

<div
  data-adrop-unit="YOUR_NATIVE_UNIT_ID"
  data-adrop-render="custom"
  data-adrop-entire-click="true"
  data-adrop-custom-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>

<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, // 전체 영역 클릭 활성화
    useCustomClick: true // 커스텀 클릭 처리 활성화
  });
</script>

<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>

<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, adData) {
    console.log('광고 노출:', unit);
  }

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

  // 동영상 재생 시작
  function handleVideoStart(unit, adData) {
    console.log('동영상 시작:', unit);
  }

  // 동영상 재생 완료
  function handleVideoEnd(unit, adData) {
    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);
  adrop.on(Adrop.Events.AD_VIDEO_START, handleVideoStart, filter);
  adrop.on(Adrop.Events.AD_VIDEO_END, handleVideoEnd, filter);
</script>

<script>
  const adrop = Adrop.instance();
  
  // 커스텀 동작으로 광고 클릭 처리
  function handleCustomClick(unit, adData) {
    console.log('광고 클릭:', unit);
    console.log('목적지 URL:', adData.destinationURL);
    
    // 커스텀 클릭 동작 구현
    // 예시: SPA 내 네비게이션, 모달 표시, 분석 추적 등
    if (adData.destinationURL) {
      // 커스텀 네비게이션 로직
      window.location.href = adData.destinationURL;
    }
  }
  
  // 클릭 핸들러 등록
  const filter = { unit: 'YOUR_NATIVE_UNIT_ID' };
  adrop.on(Adrop.Events.AD_CLICKED, handleCustomClick, filter);
  
  // 커스텀 클릭 활성화하여 광고 렌더링
  const container = document.getElementById('native-ad-container');
  adrop.renderAd(container, {
    unit: 'YOUR_NATIVE_UNIT_ID',
    trackMode: 1,
    isEntireClick: true,
    useCustomClick: true
  });
</script>