HTML と JavaScript のトラブルシューティングガイド

[アーティクル]
07/05/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>
```
アプリケーション 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 は表示可能領域の内部にある必要があります。

非表示プロパティを確認します。このプロパティは、折りたたまれたり非表示に設定したりすることはできません。 (次のように) インラインで設定できるほか、外部スタイルシートで設定できます。

<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 インデックスなど) に応じて適切な値に設定する必要があります。 (次のように) インラインで設定できるほか、外部スタイルシートで設定できます。
```
<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>

ブラックボックスの原因となる最も一般的なエラーは、"No ad available" です。このエラーは、要求から復帰する利用可能な広告がないことを意味します。

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 を使用して別の広告を取得することはできません。手動更新を使用する場合、 refresh は、デバイスの現在のデータ接続に応じて、少なくとも 30 ~ 60 秒後にのみ呼び出す必要があります。

この例では、 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;
    }
);
```
ブラックボックスの原因となる最も一般的なエラーは、"No ad available" です。このエラーは、要求から復帰する利用可能な広告がないことを意味します。
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 が表示されない

ブラックボックスが点滅し、表示されなくなる

広告が更新されない

フィードバック

その他のリソース

次の方法で共有

HTML と JavaScript のトラブルシューティング ガイド

HTML

AdControl が表示されない

ブラック ボックスが点滅し、表示されなくなる

広告が更新されない

JavaScript

AdControl が表示されない

ブラック ボックスが点滅し、表示されなくなる

広告が更新されない

フィードバック

その他のリソース

HTML と JavaScript のトラブルシューティングガイド

ブラックボックスが点滅し、表示されなくなる

ブラックボックスが点滅し、表示されなくなる