HTML 和 JavaScript 疑難排解指南

發行項
03/24/2024

警告

自 2020 年 6 月 1 日起，Windows UWP 應用程式的 Microsoft 廣告收益平台將會關閉。深入了解

本主題包含 JavaScript/HTML 應用程式中 Microsoft Advertising 程式庫常見開發問題的解決方案。

HTML
JavaScript

HTML

AdControl 未出現

確定 Package.appxmanifest 中已選取 [網際網路 (用戶端] 功能。
確定 JavaScript 參考存在。如果 <head> 區段中沒有 ad.js 參考 (在 default.js 參考之後)，AdControl 將無法顯示，而且建置期間會發生錯誤。
```
<head>
    ...
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
    ...
</head>
```

檢查應用程式識別碼和廣告單元識別碼。這些識別碼必須符合您在合作夥伴中心取得的應用程式識別碼和廣告單位識別碼。如需詳細資訊，請參閱「在您的應用程式中設定廣告單元」。

<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 屬性。 position 屬性必須根據元素的其他屬性設定為適當的值 (例如，父元素中的邊界和 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>

檢查 z-index 屬性。 z-index 屬性必須設定得夠高，使 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 元素上設定屬性，請確定已正確設定上述所有屬性。

<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}"
});

檢查應用程式識別碼和廣告單元識別碼。這些識別碼必須符合您在合作夥伴中心取得的應用程式識別碼和廣告單位識別碼。如需詳細資訊，請參閱在您的應用程式中設定廣告單元。
```
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});  
```
檢查 AdControl 的父元素。父系必須處於作用中且可見。
模擬器中不應測試 ApplicationId 和 AdUnitId 的即時值。若要確保 AdControl 如預期般運作，請使用 ApplicationId 和 AdUnitId 的測試值。

黑箱閃爍又消失

請仔細檢查 AdControl 未出現部分中的所有步驟。

此範例示範如何實作報告錯誤訊息的錯誤處理常式。此 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 未出現

黑箱閃爍又消失

廣告未重新整理

意見反應

其他資源