자세한 구현 사항은 샘플 코드에서 확인할 수 있습니다.

<script src="https://buzz-js.buzzvil.com/buzzad-benefit-sdk/1.3.1/buzzad-benefit-sdk.js">
</script>

(function() {
  if (window.BuzzAdBenefit) {
    // SDK 설정
  }
})();

function getAppId() {
  var ANDROID_APP_ID = '0123456789';
  var IOS_APP_ID = '9876543210';
  
  switch(BuzzAdBenefit.platform) {
    case 'android':
      return ANDROID_APP_ID;
    case 'ios':
      return IOS_APP_ID;
    default:
      // not supported platform
  }
}
BuzzAdBenefit.init({
  appId: getAppId()
});

<ul>
  <li>
    <!-- post 1 -->
  </li>
  <li class="post native-ad" id="placement1" style="display: none">
   <!-- 광고 지면. 내부는 추후 단계에서 구현 -->
  </li>
  <li>
    <!-- post 2 -->
  </li>
  <li>
    <!-- post 3 -->
  </li>
</ul>

BuzzAdBenefit.ensureAuthenticated
  .then(function() => {
    // Benefit 로그인 완료. 광고 요청 가능
  }).catch(function(e) => {
    // 에러 발생. 광고 요청 불가능
  });

BuzzAdBenefit.ensureAuthenticated
.then(() => {
	return BuzzAdBenefit.loadAd({
		unitId: {
	      android: 'YOUR_ANDROID_UNIT_ID', // 안드로이드 앱에서는 광고를 요청하지 않는 경우 생략 가능
	      ios: 'YOUR_IOS_UNIT_ID', // 아이폰 앱에서는 광고를 요청하지 않는 경우 생략 가능
		}
	});
}).then((nativeAd) => {
	console.log('An ad is loaded!');
	populateAd(nativeAd); // 광고 표시			
}).catch((e) => {
	if (e.message === 'EMPTY_RESPONSE') {
      console.log('NO FILL');
    } else {
      console.error('An error is detected while loading ad: ' + e.message);
    }
	hideAd();
});

BuzzAdBenefit.registerNativeAd(nativeAd, placementView, adListener);

function populateAd(nativeAd) {
  const adListener = {
    onImpressed: function(placementView, nativeAd) {
      console.log('ON IMPRESSED: The ad is impressed.');
    },
    onClicked: function(placementView, nativeAd) {
      console.log('ON CLICKED: The ad is clicked.');
    },
    onRewardRequested: function(placementView, nativeAd) {
      console.log('ON REWARD REQUESTED: Reward is requested.');
    },
    onRewarded: function(placementView, nativeAd, result) {
      console.log('ON REWARDED: The result of Reward: ' + result);
    },
    onParticipated: function(placementView, nativeAd) {
      console.log('ON PARTICIPATED: The ad is set to particiated.');
      updateCtaView(element.getElementsByClassName('cta')[0], nativeAd);  // 아래에서 설명
    },
    onVideoError: function(placementView, nativeAd, errorCode, errorMessage) {
      console.error('ON VIDEO ERROR: An error is detected: ' + errorCode + '\n' + errorMessage);
    },
  };
  
  const placementView = document.getElementById('placement1');
  BuzzAdBenefit.registerNativeAd(nativeAd, placementView, adListener);
  renderAd(placementView, nativeAd);  // 광고 구성요소를 DOM에 추가하여 화면에 표시
}

• PlacementView의 자식 중에 clickable 클래스를 가진 모든 문서 객체 모델은 클릭 시 랜딩 페이지를 열도록 설정됩니다.

• PlacementView의 자식 중에 buzz-mediaview 클래스를 가진 첫 번째 문서 객체 모델은 이미지와 비디오 플레이어를 표시하는 영역인 MediaView로 설정됩니다.

• registerNativeAd()에 넘긴 PlacementView가 이미 광고를 표시하고 있었던 경우에는 이전의 설정을 모두 초기화하고 새로운 광고에 맞도록 설정됩니다.

<li class="post native-ad" id="placement1" style="display: none">
  <div class="buzz-mediaview clickable">
  </div>
  <div class="info">
    <div class="icon-wrapper clickable">
      <img class="icon">
    </div>
    <h5 class="title clickable"></h5>
  </div>
  <div class="description">
  </div>
  <div class="button-wrapper">
    <button class="cta clickable"></button>
  </div>
</li>

function renderAd(placementView, nativeAd) {
  placementView.style.display = '';
  placementView.getElementsByClassName('icon')[0].setAttribute('src', nativeAd.iconUrl);
  placementView.getElementsByClassName('title')[0].innerHTML = nativeAd.title;
  placementView.getElementsByClassName('description')[0].innerHTML = nativeAd.description;
 
  updateCtaView(placementView.getElementsByClassName('cta')[0], nativeAd);
}

function hideAd() {
  const placementView = document.getElementById('placement1');
  placementView.style.display = 'none';
}

• 1번, 2번의 경우, 광고를 처음 화면에 표시할 때 nativeAd.reward > 0인지 확인하여 표시합니다.

• 3번의 경우 onParticipated 이벤트를 받았을 때 nativeAd.particiated가 참인지 여부를 체크하여 CtaView를 업데이트 해야 합니다. (아래 샘플 코드의 updateCtaView라는 함수의 구현을 참고) 이 함수는 처음 광고를 보여줄 때, 그리고 onParticipated 이벤트를 받았을 때 실행됩니다.

function updateCtaView(ctaView, nativeAd) {
  var ctaTextHeader = '';
  if (nativeAd.reward) {
    if (nativeAd.participated) {
      // CtaView의 디자인을 '이미 참여하여 리워드 지급 불가능 상태'로 표시
    } else {
      // CtaView의 디자인을 '참여 시 리워드 지급 가능 상태'로 표시
      ctaTextHeader = '+' + nativeAd.reward + ' ';
    }
  } else {
    // CtaView의 디자인을 '지급 가능한 리워드 없음' 상태로 표시
  }
  ctaView.innerText = ctaTextHeader + nativeAd.callToAction;
}

User ID와 타게팅 정보 (성별, 연령)는 원활한 서비스 운영을 위해 제공해야 할 필수 항목입니다. 해당 값을 입력하는 setUserProfile 함수를 호출하지 않으면 광고가 제공되지 않습니다.

동일 유저에 대해 복수개의 User ID를 연동하거나 혹은 User ID 값이 변경될 가능성이 있을 경우, 버즈빌 담당 운영 매니저와 논의해야 합니다.

• 예시: 매체사 앱 삭제 후 재설치 시 User ID 값이 변경되는 경우

BuzzAdBenefit.init(config);  // setUserProfile보다 먼저 호출되어야 함

BuzzAdBenefit.setUserProfile({
  userId: 'Your_Service_User_ID',
  gender: BuzzAdBenefit.Gender.FEMALE,
  birthYear: 1980
});

BuzzAdBenefit.ensureAuthenticated
.then(() => {
	return BuzzAdBenefit.loadAds({
		unitId: {
	      android: 'YOUR_UNIT_ID_ANDROID', // 안드로이드 앱에서는 광고를 요청하지 않는 경우 생략 가능
	      ios: 'YOUR_UNIT_ID_IOS', // 아이폰 앱에서는 광고를 요청하지 않는 경우 생략 가능
		},
		count: 3
	});
}).then((nativeAds) => {
	console.log(nativeAds.length + ' ads are loaded!');			
}).catch((e) => {
	if (e.message === 'EMPTY_RESPONSE') {
      console.log('NO FILL');
    } else {
      console.error('An error is detected while loading ad: ' + e.message);
    }
});

switch(BuzzAdBenefit.platform) {
  case BuzzAdBenefit.Platform.android:
    // 안드로이드 관련 설정
    break;
  case BuzzAdBenefit.Platform.ios:
    // 아이폰 관련 설정
    break;
  case BuzzAdBenefit.Platform.web:
    // 웹 관련 설정
    break;
  default:
    break;
}

BuzzAdBenefit.unregisterNativeAd(placementView);

BuzzAdBenefit.unregisterNativeAd(nativeAd);

BuzzAdBenefit.init({
  appId: 'YOUR_APP_ID',
  clickableClass: 'YOUR_CLICKABLE_CLASS_NAME'
});

BuzzAdBenefit.init({
  appId: 'YOUR_APP_ID',
  mediaViewClass: 'YOUR_MEDIAVIEW_CLASS_NAME'
});