웹 앱 네이티브광고 노출하기 (Dprecated)

네이티브 광고는 앱 서비스와 동일한 컨텐츠로 광고를 노출할 수 있는 광고 형식입니다. 그래서 앱 사용자들에게 거부감을 주지않아 효율이 좋은 장점이 있습니다.

별도의 업데이트 없이 최신 버전의 SDK 를 사용하실 수 있는 API 연동 방식을 사용해 주세요.

1. 네이티브 광고 레이아웃 만들기

네이티브 광고를 요청하게 되면 아래의 데이터들이 제공됩니다.

• ad : 이미지 소재 (innerHTML)

• headline : 제목

• body : 내용

• profile

  • displayLogo : 광고주 로고

  • displayName : 광고주 이름

• destinationURL : 링크

• extra

  • id : 커스텀 필드 아이디

  • text : 커스텀 필드의 광고주가 입력한 컨텐츠

• 참고

  • 콘솔에서 행동 유도 버튼 CTA 을 활성화 하시면, ad 에 CTA 버튼이 포함됩니다.

2. 네이티브 광고 노출하기

React

const NativeAd : React.FC = () => {
  const [adData, setAdData] = useState({
    ad: '',
    headline: '',
    body: '',
    profile: {
      displayName: '',
      displayLogo: '',
    },
    destinationURL: '',
  });

  useEffect(() => {
    adrop.initialize('YOUR_APP_KEY');
    // If you add onClick function, destination URL will not be opened, and you must handle it.
    // onClick 핸들러를 자유롭게 핸들링 하기 위한 코드입니다.
    // 콘솔에서 지정된 destinationURL 을 사용하시려면, 해당 필드는 사용하지 말아주세요.
    // onClick 핸들러를 정의하시면, 콘솔에서 지정된 destinationURL 오픈이 되지 않고, 별도로 구현해 주셔야 합니다.
    
    // adrop.onClick = (unitId: string, link: string) => {
    //    console.log('click callback', unitId, link)
    // }
  }, [])

  const request = useCallback(
    async () => {
        const resp = await adrop.request('YOUR_UNIT_ID or PUBLIC_TEST_UNIT_ID_375_80');
        setAdData({
          ad: resp.ad,
          headline: resp.headline,
          body: resp.body,
          profile: {
            displayName: resp.profile.displayName,
            displayLogo: resp.profile.displayName,
          },
          destinationURL: resp.destinationURL,
        });
    }, []);

  const {ad, headline, body, profile} = adData;
  
  return (  
    <div>
      <button onClick={request}>
        Request Native Ad (375_80)
      </button>

      <div className="row">
        <img src={profile.displayLogo} alt="advertiser Logo" className="logo" />
        <p className="advertiser">{profile.displayName}</p>
      </div>
      <div dangerouslySetInnerHTML={{ __html: ad }} />
      <div className="row">
        <div className="headline">{headline}</div>
        <div className="body">{body}</div>
      </div>
    </div>
  )
};

Vue

<script lang='ts'>
  export default {
    data() {
      return {
        headline: '',
        body: '',
        profile: {
          displayName: '',
          displayLogo: '',
        },
        ad: '',
        destinationURL: '',
      }
    },
    async mounted() {
      // Assuming adrop is imported and available
      // If you add onClick function, destination URL will not be opened, and you must handle it.
      // onClick 핸들러를 자유롭게 핸들링 하기 위한 코드입니다.
      // 콘솔에서 지정된 destinationURL 을 사용하시려면, 해당 필드는 사용하지 말아주세요.
      // onClick 핸들러를 정의하시면, 콘솔에서 지정된 destinationURL 오픈이 되지 않고, 별도로 구현해 주셔야 합니다.
      adrop.onClick = (unitId, link) => {
        console.log('Ad clicked', unitId, link)
      }
  
      const res = await adrop.request('PUBLIC_TEST_UNIT_ID_NATIVE')
  
      this.ad = res.ad ?? '' // Set ad
      this.profile = res.profile ?? { displayName: '', displayLogo: '' } // Set profile or default if not available
      this.headline = res.headline ?? '' // Set headline or default if not available
      this.body = res.body ?? '' // Set body or default if not available
      this.destinationURL = res.destinationURL ?? '' // Set destination URL or default if not available
    }
  }
</script>

<template>
  <div>
    <h1>Adrop Example</h1>
    <div class='row'>
      <img class='logo' :src='profile.displayLogo' alt='Adrop profile logo' />
      <div class='text'>{{ profile.displayName }}</div>
    </div>

    <div class='row'>
      <div class='text'>{{ headline }}</div>
      <div class='text'>{{ body }}</div>
    </div>
    <div v-html='ad' class='creative' />
  </div>
</template>

<style scoped>
  .row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  
  .logo {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
  
  .text {
    font-weight: 500;
    font-size: 1.2rem;
  }
  
  .creative {
    width: 150px;
    height: 150px;
  }

</style>

3. 커스텀 필드 구현하기

예를들어, 광고주에게 컨텐츠, 날짜, 좋아요 숫자 등 커스텀한 필드도 요청하고 싶은 경우 해당 기능을 활용하시면 됩니다.

1. 애드컨트롤 콘솔에서 커스텀 필드 데이터를 자유롭게 추가해 주세요.

1. 코드를 업데이트 해주세요.

const resp = adrop.request('YOUR_UNIT_ID or PUBLIC_TEST_UNIT_ID_375_80');
// resp.extra.id, resp.extra.text 데이터를 활용해 주시면 됩니다.

자세한 내용은 하기 레포지토리의 예시를 확인해 주세요.

GitHub - OpenRhapsody/adrop-ads-example-webGitHub