HTML 5 および JavaScript の AdControl

[アーティクル]
07/05/2024

警告

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

このチュートリアルでは、AdControl クラスを使用して、Windows 10 および Windows 11 用のユニバーサル Windows プラットフォーム (UWP) JavaScript/HTML アプリにバナー広告を表示する方法について説明します。

JavaScript/HTML アプリにバナー広告を追加する方法を示す完全なサンプルプロジェクトについては、GitHub のサンプルを参照してください。

前提条件

Visual Studio 2015 以降のリリースの Visual Studio でMicrosoft Advertising SDK をインストールします。インストール手順については、この記事参照してください。

Note

Windows 10 SDK バージョン 10.0.14393 (Anniversary Update) または Windows SDK のそれ以降のバージョンをインストールしている場合、WinJS ライブラリもインストールする必要があります。このライブラリは以前のバージョンの Windows SDK for Windows 10 に含まれていましたが、Windows 10 SDK バージョン 10.0.14393 (Anniversary Update) 以降では、このライブラリを個別にインストールする必要があります。

Visual Studio でプロジェクトを開くか、新しいプロジェクトを作ります。

Note

既存のプロジェクトを使用している場合は、プロジェクトで Package.appxmanifest ファイルを開き、 Internet (クライアント) 機能が選択されていることを確認します。アプリでは、テスト広告とライブ広告を受け取るためにこの機能が必要です。
プロジェクトのターゲットが [Any CPU] (任意の CPU) になっている場合は、アーキテクチャ固有のビルド出力 (たとえば、[x86]) を使うようにプロジェクトを更新します。プロジェクトのターゲットが [Any CPU] (任意の CPU) になっていると、次の手順で Microsoft Advertising ライブラリへの参照を正常に追加できません。詳しくは、「プロジェクトのターゲットを "Any CPU" に設定すると参照エラーが発生する」をご覧ください。
プロジェクトで Microsoft Advertising SDK への参照を追加します。
1. [ソリューションエクスプローラー] ウィンドウで、[参照設定] を右クリックし、[参照の追加] を選択します。
2. [参照マネージャー] で、[ユニバーサル Windows] を展開し、[拡張] をクリックして、[Microsoft Advertising SDK for JavaScript] (バージョン 10.0) の横にあるチェックボックスをオンにします。
3. [参照マネージャー] で、[OK] をクリックします。
index.html ファイル (またはプロジェクトに対応するその他の html ファイル) を開きます。
<head>セクションで、default.cssとmain.jsのプロジェクトの JavaScript 参照の後に、ad.jsへの参照を追加します。
```

<script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
```
Note

この行は、main.jsを含める後に <head> セクションに配置する必要があります。それ以外の場合は、プロジェクトのビルド時にエラーが発生します。
default.html ファイル (またはプロジェクトに適したその他の html ファイル) の <body> セクションを変更して、AdControl のdivを含めます。 AdControlの applicationId プロパティと adUnitId プロパティを、テスト広告ユニットの値に割り当てます。また、 height と width を調整して、バナー広告のサポートされている広告サイズの 1 つになるようにします。

Note

すべての AdControl には対応する adユニットがあり 当社のサービスがコントロールに広告を配信するために使用され、すべての広告ユニットは adユニットID と アプリケーションIDで構成されています。これらの手順では、テスト広告ユニット ID とアプリケーション ID の値をコントロールに割り当てます。これらのテスト値は、テストバージョンのアプリでのみ使用できます。ストアにアプリを公開する前に、これらのテスト値をパートナーセンターから取得した実際の値に置き換える必要があります。
```
<div id="myAd" style="position: absolute; top: 50px; 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>
```
アプリをコンパイルして実行し、広告で表示します。

次の例は、単純なアプリの完全なindex.htmlを示しています。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AdControlExampleApp</title>
    <!-- WinJS references -->
    <link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" />
    <script src="lib/winjs-4.0.1/js/base.js"></script>
    <script src="lib/winjs-4.0.1/js/ui.js"></script>
    <!-- AdControlExampleApp references -->
    <link href="css/default.css" rel="stylesheet" />
    <script src="js/main.js"></script>
    <!-- Required reference for AdControl -->
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
</head>
<body>
    <div id="myAd" style="position: absolute; top: 50px; 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>
    <p>Content goes here</p>
</body>
</html>

JavaScript でプログラムによって AdControl を作成する

前の手順では、HTML マークアップで AdControl を宣言する方法を示します。または、JavaScript を使用して AdControl をプログラムで作成することもできます。この例では、ID myAd で HTML 内の既存の div を使用していることを前提としています。

var adDiv = document.getElementById("myAd");
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
    applicationId: "3f83fe91-d6be-434d-a0ae-7351c5a997f1",
    adUnitId: "test",
});

myAdControl.isAutoRefreshEnabled = false;
myAdControl.onErrorOccurred = myAdError;
myAdControl.onAdRefreshed = myAdRefreshed;
myAdControl.onEngagedChanged = myAdEngagedChanged;

この例では、 myAdError、 myAdRefreshed、および myAdEngagedChanged という名前のイベントハンドラーメソッドを既に宣言していることを前提としています。

このコードを使用して広告が表示されない場合は、AdControlを含むdivにposition:relativeの属性を挿入してみてください。これにより、 IFrame の既定の設定がオーバーライドされます。この属性の値が原因で広告が表示されない限り、広告は正しく表示されます。新しい広告ユニットは、最大 30 分間利用できない場合があることに注意してください。

Note

この例に示す applicationId と adUnitId の値は、テストモードの値です。申請のためにアプリを提出する前に、パートナーセンターから実際の値にこれらの値を置き換える必要があります。

ライブ広告でアプリをリリースする

アプリでのバナー広告の使用は、バナー広告のガイドラインに従ってください。
パートナーセンターで [アプリ内広告] に進み、広告ユニットを作成します。広告ユニットの種類として、 Banner を指定します。広告ユニット ID とアプリケーション ID の両方をメモしておきます。

Note

テスト広告ユニットとライブ UWP 広告ユニットでは、アプリケーション ID の値の形式が異なります。テストアプリケーション ID の値は GUID です。パートナーセンターでライブ UWP 広告ユニットを作成する場合、広告ユニットのアプリケーション ID の値は、アプリのストア ID と常に一致します (9NBLGGH4R315 はストア ID の例です)。
必要に応じて、AdControl の広告仲介を有効にするには、[In-app ads] ページの [Mediation settings] セクションで設定を構成します。広告仲介を使用すると、複数の広告ネットワークからの広告を表示することで、広告の収益とアプリのプロモーション機能を最大化できます。これには、タブーラや Smaato などの他の有料広告ネットワークからの広告や、Microsoft アプリプロモーションキャンペーン用の広告が含まれます。
コードで、広告ユニットのテスト値 (applicationId と adUnitId) を、パートナーセンターで生成した実際の値に置き換えます。
パートナーセンターを使用してストアにアプリを申請します。
パートナーセンターで広告パフォーマンスレポートを確認します。

アプリで複数の広告コントロールの広告ユニットを管理する

1 つのアプリで複数の AdControl オブジェクトを使用できます (たとえば、アプリ内の各ページで異なる AdControl オブジェクトをホストする場合があります)。このシナリオでは、各コントロールに異なる広告ユニットを割り当てることをお勧めします。各コントロールに異なる広告ユニットを使用することで、別々に仲介の設定を構成して、個別の報告データを取得することが可能です。また、これにより、Microsoft のサービスはアプリに提供する広告を最適化できます。

重要

各広告ユニットは 1 つのアプリのみで使用できます。同じ広告ユニットを複数のアプリで使うと、その広告ユニットには広告が配信されません。

次の方法で共有

HTML 5 および JavaScript の AdControl

前提条件

バナー広告をアプリに統合する

JavaScript でプログラムによって AdControl を作成する

ライブ広告でアプリをリリースする

アプリで複数の広告コントロールの広告ユニットを管理する

フィードバック

その他のリソース

次の方法で共有

HTML 5 および JavaScript の AdControl

前提条件

バナー広告をアプリに統合する

JavaScript でプログラムによって AdControl を作成する

ライブ広告でアプリをリリースする

アプリで複数の広告コントロールの広告ユニットを管理する

関連トピック

フィードバック

その他のリソース