onReady로 게임 로딩을 수동으로 시퀀싱

게임이 포함된 페이지가 처음 로드되면 여러 가지 비동기 이벤트가 발생합니다.

게임 로직과 광고 태그가 로드되고, Ad Placement API가 초기화되기 시작하며, 광고가 미리 로드됩니다. 따라서 페이지 로드 직후에 adBreak()를 호출하면 API가 초기화되지 않았거나 광고가 미리 로드 완료되지 않았을 수 있습니다. API가 초기화되지 않았다면 호출이 실패하고 adBreakDone() 콜백을 등록한 경우 breakStatus가 notReady로 설정됩니다.

게임 로직을 Ad Placement API의 초기화와 동기화해야 하는 경우 adConfig()에 onReady() 콜백을 사용할 수 있습니다.

onReady()는 다음과 같은 경우 Ad Placement API에서 호출합니다.

• 광고 태그가 로드된 경우
• Ad Placement API가 로드되고 초기화된 경우 및
• adConfig()를 사용하여 광고 미리 로드를 요청하고 완료한 경우

이 시점에서 Ad Placement API는 완전히 초기화됩니다. adBreak()을 호출할 수 있으며 notReady 상태를 반환하지 않습니다. 하지만 항상 그렇듯이 adBreak()를 통해 광고가 게재되지 않을 수도 있습니다(예: 게재할 수 있는 광고가 없음).

다음은 onReady()의 사용을 보여주는 예입니다.

...
<script>
    window.adsbygoogle = window.adsbygoogle || [];
    var adBreak = adConfig = function(o) {adsbygoogle.push(o);}
    ...
    function init() {
      // Game start logic, show loading screen
      adConfig({
        preloadAdBreaks: 'on',
        onReady: showAd
      });
      // Don't start the gameplay just yet, keep loading.
    }

    function showAd() {
      // Show an ad
      adBreak({
        type: 'start',
        adBreakDone: startGame,  // always called, unblocks the game logic
        ...
      });
    }
    ...
</script>

참고: 페이지 로드 직후에 adBreak()을 호출하는 가장 일반적인 사용 사례는 프리롤을 구현하는 것입니다. 여기에 설명된 방법으로 직접 만드는 대신 preroll 게재위치 유형을 꼭 사용하시기 바랍니다.

preroll는 필요한 모든 미리 로드 및 제한 시간 로직을 자동으로 구현합니다. 게임에 프리롤을 사용하는 경우 onReady()를 사용할 필요가 없습니다. 프리롤에 대해 자세히 알아보기

제한 시간

Ad Placement API 초기화가 지연되거나 완전히 로드되지 않는 경우 onReady()가 호출되지 않을 수 있습니다. 게임이 제시간에 시작되도록 하려면 제한 시간을 설정하는 것이 좋습니다. onReady() 콜백을 수신한 경우 adBreak()를 호출하여 광고를 게재할 수 있습니다. 또는 광고 호출을 건너뛰고 게임을 로드해도 됩니다.

다음 예에는 제한 시간이 포함되며 이는 프리롤 배치로 구현된 로직과 유사합니다.

...
<script>
    window.adsbygoogle = window.adsbygoogle || [];
    var adBreak = adConfig = function(o) {adsbygoogle.push(o);}
    ...
    function init() {
        // Game start logic
        let adConfigPromise =
            new Promise((resolve, reject) => adConfig({
                preloadAdBreaks: 'on',
                onReady: () => resolve(true)
            }));
        let timeoutPromise =
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(false);
                }, 2000);
            });
        // Whatever happens first resolves this promise.
        Promise.race([
            adConfigPromise,
            timeoutPromise
        ]).then((shouldShowPreRoll) => {
            if (shouldShowPreRoll) {
                showPreRoll();
            } else {
                startGame();
            }
        });
    }

    function showPreRoll() {
      // Show ad
      adBreak({
          type: 'start',
          adBreakDone: startGame, // always called, unblocks the game logic
          ...
      });
    }
    ...
</script>