HTML 및 JavaScript 문제 해결 가이드

아티클
03/13/2024

경고

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

이 항목에는 JavaScript/HTML 앱의 Microsoft Advertising 라이브러리와 관련된 일반적인 개발 문제에 대한 솔루션이 포함되어 있습니다.

HTML
JavaScript

HTML

AdControl이 표시되지 않음

Package.appxmanifest에서 인터넷(클라이언트) 기능이 선택되어 있는지 확인합니다.
JavaScript 참조가 있는지 확인합니다. (default.js 참조 뒤의) <head> 섹션에 ad.js 참조가 없으면 AdControl을 표시할 수 없으며 빌드 중에 오류가 발생합니다.
```
<head>
    ...
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
    ...
</head>
```

애플리케이션 ID 및 광고 단위 ID를 확인합니다. 이러한 ID는 파트너 센터에서 얻은 애플리케이션 ID 및 광고 단위 ID와 일치해야 합니다. 자세한 정보는 앱에서 광고 단위 설정하기를 참조하세요.

<div id="myAd" style="position: absolute; top: 50px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

height 및 width 속성을 확인합니다. 배너 광고에 지원되는 광고 크기 중 하나로 설정해야 합니다.

<div id="myAd" style="position: absolute; top: 50px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

요소 위치 지정을 확인합니다. AdControl은 볼 수 있는 영역 내에 있어야 합니다.

visibility 속성을 확인합니다. 이 속성을 축소 또는 숨김으로 설정하지 않아야 합니다. 이 속성은 아래와 같이 인라인 또는 외부 스타일시트에서 설정할 수 있습니다.

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

position 속성을 확인합니다. 위치 속성은 요소의 다른 속성(예: 부모 요소 및 z-인덱스의 여백)에 따라 적절한 값으로 설정해야 합니다. 이 속성은 아래와 같이 인라인 또는 외부 스타일시트에서 설정할 수 있습니다.

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

z-index 속성을 확인합니다. AdControl이 항상 다른 요소 위에 표시되도록 z-index 속성을 충분히 높게 설정해야 합니다. 이 속성은 아래와 같이 인라인 또는 외부 스타일시트에서 설정할 수 있습니다.

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

외부 스타일시트를 확인합니다. 외부 스타일시트를 통해 AdControl 요소에 속성이 설정된 경우, 위의 모든 속성이 올바르게 설정되었는지 확인합니다.

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

AdControl의 부모를 확인합니다. AdControl이 부모 요소에 있는 경우, 부모는 활성 상태로 표시되어야 합니다.

<div style="position: absolute; width: 500px; height: 500px;">
    <div id="myAd" style="position: relative; top: 0px; left: 100px;
                          width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID'}">
    </div>
</div>

AdControl이 뷰포트에서 숨겨지지 않았는지 확인합니다. 광고가 제대로 표시되려면 AdControl이 표시되어야 합니다.
ApplicationId 및 AdUnitId의 라이브 값은 에뮬레이터에서 테스트하면 안 됩니다. AdControl이 예상대로 작동하는지 확인하려면 ApplicationId 및 AdUnitId에 대한 테스트 값을 모두 사용합니다.

블랙 박스가 깜박거리다가 사라짐

이전의 AdControl이 표시되지 않음 섹션의 모든 단계를 다시 확인합니다.

onErrorOccurred 이벤트를 처리하고, 이벤트 처리기에 전달된 메시지를 사용하여 오류가 발생했는지 여부 및 발생한 오류 유형을 확인합니다. 세부 정보는 JavaScript 연습의 오류 처리하기에서 찾을 수 있습니다.

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 728px; height: 90px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID',
                        onErrorOccurred: errorLogger}">
</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>

블랙 박스를 유발하는 가장 일반적인 오류는 "사용할 수 있는 광고 없음"입니다. 이 오류는 요청에서 반환할 수 있는 광고가 없음을 의미합니다.

AdControl은 정상적으로 동작합니다. 기본적으로 AdControl은 광고를 표시할 수 없을 때 축소됩니다. 다른 요소가 동일한 부모의 자식인 경우 축소된 AdControl의 간격을 채우기 위해 이동하고 다음 요청이 있을 때 확장될 수 있습니다.

광고가 새로 고쳐지지 않음

isAutoRefreshEnabled 속성을 확인합니다. 기본적으로 이 선택적 속성은 true로 설정됩니다. false로 설정하면 refresh 메서드를 사용하여 다른 광고를 검색해야 합니다.

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{ applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID',
                        onErrorOccurred: errorLogger,
                        isAutoRefreshEnabled: true}">
</div>

refresh 메서드에 대한 호출을 확인합니다. 자동 새로 고침을 사용하는 경우, refresh를 사용하여 다른 광고를 검색할 수 없습니다. 수동 새로 고침을 사용하는 경우, 디바이스의 현재 데이터 연결에 따라 최소 30~60초 후에만 refresh를 호출해야 합니다.

이 예시는 refresh 메서드를 사용하는 방법을 보여 줍니다. 다음의 HTML 코드는 isAutoRefreshEnabled를 false로 설정하여 AdControl을 인스턴스화하는 방법의 예시를 보여줍니다.

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{ applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID',
                        onErrorOccurred: errorLogger,
                        isAutoRefreshEnabled: false}">
</div>

이 예시는 refresh 함수를 사용하는 방법을 보여줍니다.

args.setPromise(WinJS.UI.processAll()
    .then(function (args) {
        window.setInterval(function()
        {
            document.getElementById("myAd").winControl.refresh();
        }, 60000)
    })
);

AdControl은 정상적으로 동작합니다. 경우에 따라 동일한 광고가 연속으로 두 번 이상 표시되어 광고가 새로 고쳐지지 않는 것처럼 보일 수 있습니다.

JavaScript

AdControl이 표시되지 않음

Package.appxmanifest에서 인터넷(클라이언트) 기능이 선택되어 있는지 확인합니다.

AdControl이 인스턴스화되었는지 확인합니다. AdControl이 인스턴스화되지 않은 경우. 사용할 수 없습니다.

다음의 코드 조각은 AdControl을 인스턴스화하는 예시를 보여 줍니다. 이 HTML 코드는 AdControl에 대한 UI를 설정하는 예시를 보여 줍니다

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl">
</div>

다음의 JavaScript 코드는 AdControl을 인스턴스화하는 예시를 보여 줍니다.

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !==
                activation.ApplicationExecutionState.terminated)
        {
            var adDiv = document.getElementById("myAd");
            var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
            {
                applicationId: "{ApplicationID}",
                adUnitId: "{AdUnitID}"
             });                
             myAdControl.onErrorOccurred = myAdError;
        } else {
            ...
        }
    }
}

부모 요소를 확인합니다. 부모 <div>를 올바르게 할당하고, 활성화하고, 표시해야 합니다.

var adDiv = document.getElementById("myAd");
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});

애플리케이션 ID 및 광고 단위 ID를 확인합니다. 이러한 ID는 파트너 센터에서 얻은 애플리케이션 ID 및 광고 단위 ID와 일치해야 합니다. 자세한 정보는 앱에서 광고 단위 설정하기를 참조하세요.
```
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});  
```
AdControl의 부모 요소를 확인합니다. 부모는 활성 상태로 표시되어야 합니다.
ApplicationId 및 AdUnitId의 라이브 값은 에뮬레이터에서 테스트하면 안 됩니다. AdControl이 예상대로 작동하는지 확인하려면 ApplicationId 및 AdUnitId에 대한 테스트 값을 모두 사용합니다.

블랙 박스가 깜박거리다가 사라짐

AdControl 표시되지 않음 섹션의 모든 단계를 다시 확인합니다.
onErrorOccurred 이벤트를 처리하고, 이벤트 처리기에 전달된 메시지를 사용하여 오류가 발생했는지 여부 및 발생한 오류 유형을 확인합니다. 세부 정보는 JavaScript 연습의 오류 처리하기에서 찾을 수 있습니다.

이 예시는 오류 메시지를 보고하는 오류 처리기를 구현하는 방법을 보여 줍니다. 이 HTML 코드 조각은 오류 메시지를 표시하도록 UI를 설정하는 방법의 예시를 제공합니다.
```
<div style="position:absolute; width:100%; height:130px; top:300px">
    <b>Ad Events</b><br />
    <div id="adEvents" style="width:100%; height:110px; overflow:auto"></div>
</div>
```
이 예시는 AdControl을 인스턴스화하는 방법을 보여 줍니다. 이 함수는 app.onactivated 파일에 삽입됩니다.
```
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});                
myAdControl.onErrorOccurred = myAdError;
```
이 예시는 오류를 보고하는 방법을 보여 줍니다. 이 함수는 default.js 파일의 자체 실행 함수 아래에 삽입됩니다.
```
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;
    }
);
```
블랙 박스를 유발하는 가장 일반적인 오류는 "사용할 수 있는 광고 없음"입니다. 이 오류는 요청에서 반환할 수 있는 광고가 없음을 의미합니다.
AdControl은 정상적으로 동작합니다. 경우에 따라 동일한 광고가 연속으로 두 번 이상 표시되어 광고가 새로 고쳐지지 않는 것처럼 보일 수 있습니다.

광고가 새로 고쳐지지 않음

AdControl의 IsAutoRefreshEnabled 속성이 false로 설정되어 있는지 확인합니다. 기본적으로 이 선택적 속성은 true로 설정됩니다. false로 설정하면 Refresh 메서드를 사용하여 다른 광고를 검색해야 합니다.

Refresh 메서드에 대한 호출을 확인합니다. 자동 새로 고침(IsAutoRefreshEnabled가 true)을 사용하는 경우 Refresh를 사용하여 다른 광고 검색을 수행할 수 없습니다. 수동 새로 고침(IsAutoRefreshEnabled가 false)을 사용하는 경우 디바이스의 현재 데이터 연결에 따라 최소 30~60초 후에만 Refresh를 호출해야 합니다.

이 예시는 AdControl에 대한 div를 만드는 방법을 보여 줍니다.

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl">
</div>

이 예시는 Refresh 함수를 사용하는 방법을 보여 줍니다.

var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
  applicationId: "{ApplicationID}",
  adUnitId: "{AdUnitID}",
  isAutoRefreshEnabled: false
});
...
args.setPromise(WinJS.UI.processAll()
    .then(function (args) {
        window.setInterval(function()
        {
            document.getElementById("myAd").winControl.refresh();
        }, 60000)
    })
);

AdControl은 정상적으로 동작합니다. 경우에 따라 동일한 광고가 연속으로 두 번 이상 표시되어 광고가 새로 고쳐지지 않는 것처럼 보일 수 있습니다.

다음을 통해 공유

HTML 및 JavaScript 문제 해결 가이드

HTML

AdControl이 표시되지 않음

블랙 박스가 깜박거리다가 사라짐

광고가 새로 고쳐지지 않음

JavaScript

AdControl이 표시되지 않음

블랙 박스가 깜박거리다가 사라짐

광고가 새로 고쳐지지 않음

피드백

추가 리소스