JavaScript에서 오류 처리 연습하기

경고

2020년 6월 1일부로 Windows UWP 앱용 Microsoft 광고 수익 창출 플랫폼이 종료됩니다. 더 알아보기

이 연습은 JavaScript 앱에서 광고 관련 오류를 검색하는 방법을 보여 줍니다. 이 연습은 AdControl을 사용하여 배너를 표시하는 것을 안내하지만, 이 연습에 적용되는 일반적인 개념은 중간 광고 및 기본 광고에도 적용됩니다.

이러한 예제는 AdControl이 포함된 JavaScript 앱이 있다고 가정합니다. 앱에 AdControl을 추가하는 방법을 보여 주는 단계별 지침은 HTML 5 및 JavaScript의 AdControl을 참조하세요. JavaScript/HTML 앱에 배너 광고를 추가하는 방법을 보여 주는 전체 샘플 프로젝트는 [GitHub의 광고 샘플]을 참조하세요https://github.com/microsoft/Windows-universal-samples/tree/b1cb20f191d3fd99ce89df50c5b7d1a6e2382c01/archived/Advertising).

1. default.html 파일의 div에서 AdControl에 대한 data-win-options를 정의하는 onErrorOccurred 이벤트에 대한 값을 추가합니다. 다음의 코드를 default.html 파일에서 찾습니다.

   <div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 300px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">
   </div>
   

   다음의 adUnitId 특성에 따라 onErrorOccurred 이벤트에 대한 값을 추가합니다.

   <div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 300px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test', onErrorOccurred: errorLogger}">
   

```

2. 생성되는 메시지를 볼 수 있도록 텍스트를 표시하는 div를 만듭니다. 이렇게 하려면 다음의 코드를 myAd에 대한 div 뒤에 추가합니다.

   <div style="position:absolute; width:100%; height:130px; top:300px; left:0px">
       <b>Ad Events</b><br />
       <div id="adEvents" style="width:100%; height:110px; overflow:auto"></div>
   </div>
   

3. 오류 이벤트를 트리거하는 AdControl을 만듭니다. 앱의 모든 AdControl 개체에 대한 애플리케이션 ID는 하나만 있을 수 있습니다. 따라서 다른 애플리케이션 ID를 사용하여 추가적인 ID를 만들면 런타임에 오류가 트리거됩니다. 이렇게 하려면 이전에 추가한 div 섹션 뒤에 다음의 코드를 default.html 페이지의 본문에 추가합니다.

   <!-- Because only one applicationId can be used, the following ad control will fire an error event. -->
   <div id="liveAd" style="position: absolute; top:500px; left:0px; width:480px; height:80px"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: '00000000-0000-0000-0000-000000000000', adUnitId: 'test', onErrorOccurred: errorLogger }" >
   </div>
   

4. 프로젝트의 default.js 파일에서 기본 초기화 함수 뒤에 errorLogger에 대한 이벤트 처리기를 추가합니다. 파일의 끝으로 스크롤하고 다음의 코드를 마지막 세미콜론 뒤에 입력합니다.

   WinJS.Utilities.markSupportedForProcessing(
   window.errorLogger = function (sender, evt) {
       adEvents.innerHTML = (new Date()).toLocaleTimeString() + ": " +
       sender.element.id + " error: " + evt.errorMessage + " error code: " +
       evt.errorCode + "<br>" + adEvents.innerHTML;
       console.log("errorhandler hit. \n");
   });
   

5. 파일을 빌드하고 실행합니다. 이전에 빌드한 샘플 앱의 원래 광고와 해당 광고 아래에 오류를 설명하는 텍스트가 표시됩니다. liveAd의 ID가 있는 광고는 표시되지 않습니다.

관련 항목

• GitHub의 광고 샘플