次の方法で共有

JavaScript ウォークスルーでのエラー処理

  • [アーティクル]

警告

2020 年 6 月 1 日以降、Windows UWP アプリ用の Microsoft の広告の収益化プラットフォームはシャットダウンされます。 詳細情報

このチュートリアルでは、JavaScript アプリで広告関連のエラーをキャッチする方法について説明します。 このチュートリアルでは、AdControl を使用してバナー広告を表示していますが、その中の一般的な概念はスポット広告やネイティブ広告にも適用されます。

これらの例では、 AdControl を含む JavaScript アプリがあることを前提としています。 アプリに AdControl を追加する方法を示す詳細な手順については、「HTML 5 と JavaScript の AdControl」を参照してください。 JavaScript/HTML アプリにバナー広告を追加する方法を示す完全なサンプル プロジェクトについては、GitHub の サンプルを参照してください。

  1. default.html ファイルで、AdControl の div で 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: '00001111-aaaa-2222-bbbb-3333cccc4444', 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: '00001111-aaaa-2222-bbbb-3333cccc4444', adUnitId: 'test', onErrorOccurred: errorLogger}">
```

  1. 生成されているメッセージを確認できるようにテキストを表示する 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>

  2. エラー イベントをトリガーする AdControl を作成します。 アプリ内のすべての AdControl オブジェクトに対して使用できるアプリケーション ID は 1 つだけです。 そのため、別のアプリケーション 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>

  3. プロジェクトの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");
});

  4. ファイルをビルドして実行します。 前に作成したサンプル アプリの元の広告と、その広告の下にエラーを説明するテキストが表示されます。 id が liveAd の広告は表示されません。