인스턴트 게임의 앱 내 광고

게이머에게 광고를 표시해서 게임을 수익화할 수 있습니다. 현재 인스턴트 게임에는 두 가지 형식의 Audience Network 광고(보상형 동영상 광고 및 전면 광고)가 있습니다. 이 섹션에서는 인스턴트 게임으로 광고 수익화를 통합하는 과정을 설명합니다.

형식 가용성

필수 조건

• 수익 관리자에서 게임과 연결된 자산 내에 광고 노출 위치를 1개 이상 생성해야 합니다.
• 모바일 기기나 Facebook.com에서 빌드를 테스트할 수 있습니다.

참고: 현재 Audience Network는 일부 지역에서 제한됩니다. Audience Network 온보딩 플로에서 자격 요건을 확인하세요.

자세한 내용은 인스턴트 게임 수익화를 위한 Audience Network 5단계 가이드를 참조하세요.

샘플 다운로드

수익 관리자로 앱을 이미 구성하였고 광고 노출 위치를 생성했다면 데모를 다운로드하여 아래의 샘플 코드를 확인할 수 있습니다.

전면 광고 표시

아래의 코드 조각은 전면 광고를 표시하는 방법의 예를 보여줍니다.

이 코드가 작동하려면 먼저 전면 광고 표시 형식의 광고 노출 위치를 생성해야 합니다. 앱 내 광고 유닛마다 다른 노출 위치를 사용해야 합니다.

광고 사전 로드

var preloadedInterstitial = null;

FBInstant.getInterstitialAdAsync(
  '123123123123_123123123123' // Your Ad Placement Id
).then(function(interstitial) {
  // Load the Ad asynchronously
  preloadedInterstitial = interstitial;
  return preloadedInterstitial.loadAsync();
}).then(function() {
  console.log('Interstitial preloaded');
}).catch(function(err){
  console.error('Interstitial failed to preload: ' + err.message);
});

광고 표시

preloadedInterstitial.showAsync()
.then(function() {
  // Perform post-ad success operation
  console.log('Interstitial ad finished successfully');        
})
.catch(function(e) {
  console.error(e.message);
});

보상형 전면 광고 표시

아래의 코드 조각은 보상형 전면 광고를 표시하는 방법의 예를 보여줍니다.

이 코드가 작동하려면 먼저 보상형 전면 광고 표시 형식으로 광고 노출 위치를 생성해야 합니다. 보상형 전면 광고는 Facebook Gaming, 모바일 웹 및 데스크톱 웹 앱에서만 사용할 수 있습니다. 앱 내 광고 유닛마다 다른 노출 위치를 사용해야 합니다.

광고 사전 로드

var preloadedRewardedInterstitial = null;

FBInstant.getRewardedInterstitialAsync(
  '123123123123_123123123123' // Your Ad Placement Id
).then(function(rewarded) {
  // Load the Ad asynchronously
  preloadedRewardedInterstitial = rewarded;
  return preloadedRewardedInterstitial.loadAsync();
}).then(function() {
  console.log('Rewarded interstitial preloaded');
}).catch(function(err){
  console.error('Rewarded interstitial failed to preload: ' + err.message);
});

광고 표시

preloadedRewardedInterstitial.showAsync()
.then(function() {
  // Perform post-ad success operation
  console.log('Rewarded interstitial watched successfully');        
})
.catch(function(e) {
  console.error(e.message);
});

보상형 동영상 광고 표시

아래의 코드 조각은 보상형 동영상 광고를 표시하는 방법의 예를 보여줍니다.

이 코드가 작동하려면 먼저 보상형 동영상 광고 표시 형식으로 광고 노출 위치를 생성해야 합니다. 앱 내 광고 유닛마다 다른 노출 위치를 사용해야 합니다.

광고 사전 로드

var preloadedRewardedVideo = null;

FBInstant.getRewardedVideoAsync(
  '456456456456_456456456456' // Your Ad Placement Id
).then(function(rewarded) {
  // Load the Ad asynchronously
  preloadedRewardedVideo = rewarded;
  return preloadedRewardedVideo.loadAsync();
}).then(function() {
  console.log('Rewarded video preloaded');
}).catch(function(err){
  console.error('Rewarded video failed to preload: ' + err.message);
});

광고 표시

preloadedRewardedVideo.showAsync()
.then(function() {
  // Perform post-ad success operation
  console.log('Rewarded video watched successfully');        
})
.catch(function(e) {
  console.error(e.message);
});

광고 인스턴스의 수명 주기

같은 유형의 광고 인스턴스 세 개를 표시하지 않고 사전 로드하면 새 광고를 생성하려고 시도할 때 실패합니다. 광고를 성공적으로 읽어들이면 광고는 60분간 유효합니다.

모든 것(예: 유효한 광고 노출 위치 ID 등)이 정상적으로 구성되었고 네트워크 문제가 없다고 가정했을 때 광고의 작동 방법을 이해하는 데 도움이 되는 샘플 코드는 다음과 같습니다.

var preloadedInterstitial1 = null;
var preloadedInterstitial2 = null;
var preloadedInterstitial3 = null;
var preloadedRewardedVideo = null;

// PRELOAD PHASE
FBInstant.getInterstitialAdAsync(
  '123123123123_123123123123'
).then(function(interstitial) {
  // This should get called, meaning you now have 1 ad instance.
  preloadedInterstitial1 = interstitial;
  return preloadedInterstitial1.loadAsync();
}).then(function() {
  // This should get called unless we do not have ads to serve.
  console.log('Interstitial 1 preloaded')
}).catch(function(err){
  // This would be called only if we do not have ads to serve.
  // The error would then be ADS_NO_FILL.
  // You can try to reload the ad after some time (ideally over 30 seconds).
  // If you get ADS_NO_FILL 3 times in a row, the instance will be disabled.
  console.error('Interstitial 1 failed to preload: ' + err.message);
  // You can try to reload after 30 seconds (2nd attempt)
  setTimeout(function () { handleAdsNoFill(preloadedInterstitial1, 2); }, 30 * 1000);
});

// Here is how the function to handle ADS_NO_FILL would look like
function handleAdsNoFill (adInstance, attemptNumber) {
  if (attemptNumber > 3) {
    // You can assume we will not have to serve in the current session, no need to try
    // to load another ad.
    return;
  } else {
    adInstance.loadAsync().then(function() {
      // This should get called if we finally have ads to serve.
      console.log('Interstitial preloaded')
    }).catch(function(err){
      console.error('Interstitial failed to preload: ' + err.message);
      // You can try to reload after 30 seconds
      setTimeout(function () {
        handleAdsNoFill(adInstance, attemptNumber+1);
      }, 30 * 1000);
    });
  }
}

// As we covered ADS_NO_FILL, from now on let's assume we have ads to serve.
FBInstant.getInterstitialAdAsync(
  // You can re-use the same Ad Placement Id as long as it is of the valid type:
  // interstitial or rewarded video (here, it has to be interstitial)
  '123123123123_123123123123'
).then(function(interstitial) {
  // This should get called, meaning you now have 2 ad instances.
  preloadedInterstitial2 = interstitial;
  return preloadedInterstitial2.loadAsync();
}).then(function() {
  console.log('Interstitial 2 preloaded')
});

FBInstant.getRewardedVideoAsync(
  '456456456456_456456456456'
).then(function(rewarded) {
  // This should get called, meaning you now have 3 ad instances.
  preloadedRewardedVideo = rewarded;
  return preloadedRewardedVideo.loadAsync();
}).then(function() {
  console.log('Rewarded video preloaded')
});

FBInstant.getInterstitialAdAsync(
  '123123123123_123123123123'
).catch(function(err){
  // This should be called now because you already have 3 ad instances.
  // The error would then be ADS_TOO_MANY_INSTANCES.
  console.error('Interstitial 3 failed to preload: ' + err.message);
});

// SHOWING ADS (at a timing that makes sense in the workflow of your game)
preloadedInterstitial1.showAsync()
.then(function() {
  // This should get called, meaning you now have 2 ad instances.
  console.log('Interstitial ad 1 finished successfully');        
});

// A bit later, assuming you did not preload a new instance yet.
preloadedInterstitial2.showAsync()
.then(function() {
  // This should get called, meaning you now have 1 ad instance.
  console.log('Interstitial ad finished successfully');        
});

// A bit later, assuming you did not preload a new instance yet.
preloadedRewardedVideo.showAsync()
.then(function() {
  // This should get called, meaning you now have no ad instance.
  console.log('Rewarded video watched successfully');        
});

모범 사례 및 문제 해결

아래의 정보는 인스턴트 게임에 적용됩니다. Audience Network 인사이트도 참조하세요.

추가 정보

• Audience Network 시작하기
• 수익 관리자로 업그레이드
• 광고 공간 정보
• 광고 공간과 노출 위치 만들기
• 앱과 속성을 수익 관리자에 추가
• 게임 내 광고 경험을 개선하는 5가지 필수 팁
• 더욱 효과적인 전면 광고 노출 위치 구현
• 더욱 효과적인 보상형 동영상 구현
• 보상형 동영상 광고 노출 위치 모범 사례
• 6가지 일반적인 보상형 동영상 통합을 구현하기 위한 모범 사례