HTML 5 和 JavaScript 中的 AdControl

  • 项目

警告

自 2020 年 6 月 1 日起，适用于 Windows UWP 应用的 Microsoft 广告盈利平台将关闭。 了解详细信息

本演练演示如何使用 AdControl 类在用于Windows 10和Windows 11的通用 Windows 平台 (UWP) JavaScript/HTML 应用中显示横幅广告。

有关演示如何将横幅广告添加到 JavaScript/HTML 应用的完整示例项目，请参阅 GitHub 上的广告示例。

先决条件

注意

如果已安装 Windows 10 SDK 版本 10.0.14393（周年更新）或更高版本的 Windows SDK，那么还必须安装 WinJS 库。 此库过去包含在以前版本的 Windows SDK（适用于 Windows 10）中，但从 Windows 10 SDK 版本 10.0.14393（周年更新）开始，此库必须单独安装。

在应用中集成横幅广告

  1. 在 Visual Studio 中，打开项目或创建新项目。

    注意

    如果你使用现有项目，请打开项目中的 Package.appxmanifest 文件并确保已选择 Internet（客户端）功能。 应用需要使用此功能接收测试广告和实时广告。

  2. 如果你的项目面向任何 CPU，请更新你的项目以使用特定于体系结构的生成输出（例如，x86）。 如果你的项目面向任何 CPU，你将无法在以下步骤中成功添加对 Microsoft Advertising 库的引用。 有关详细信息，请参阅项目中由面向任何 CPU 引起的引用错误。

  3. 在你的项目中添加对 Microsoft 广告 SDK 的引用：

    1. 在解决方案资源管理器窗口中，右键单击引用，然后选择添加引用...
    2. 在引用管理器中，展开通用 Windows、单击扩展，然后选中适用于 JavaScript 的 Microsoft 广告 SDK（版本 10.0）旁边的复选框。
    3. 在引用管理器中，单击“确定”。

  4. 打开 index.html 文件（或其他适用于你项目的 html 文件）。

  5. 在<标题>部分中，在项目的 JavaScript 引用 default.css 和 main.js 之后，添加对 ad.js 的引用。

    <!-- Advertising required references -->
<script src="//Microsoft.Advertising.JavaScript/ad.js"></script>

    注意

    此行必须放在 <包含 main.js 之后的 head> 节中;否则，在生成项目时会遇到错误。

  6. 根据项目) 修改default.html文件 (或其他 html 文件中的正文>部分，以包含 AdControl 的< div。 将 AdControl 的 applicationId 和 adUnitId 属性分配至测试广告单元值。 另外还要调整控件的高度和宽度，以使其适应横幅广告支持的广告大小。

    注意

    每个 AdControl 都有一个对应的广告单元，我们的服务使用该广告单元来为控件提供广告，每个广告单元都包含单元 ID 和应用程序 ID。 在这些步骤中，你将为控件分配测试广告单元 ID 和应用程序 ID 值。 这些测试值只能在应用的测试版本中使用。 在将应用发布到 Microsoft Store 之前，必须在合作伙伴中心将这些测试值替换为实时值。

    <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>

  7. 编译并运行应用以查看是否带有广告。

以下示例所示为简单应用的完整 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 的事件处理程序方法。

如果你使用此代码，并且没有看到广告，则可以尝试将 position:relative 的属性插入包含 AdControl 的 div 中。 这将替代 IFrame 的默认设置。 广告将正确显示，除非它们由于此属性的值而没有显示。 请注意，新的广告单元可能在长达 30 分钟内不可用。

注意

此示例中显示的 applicationId 和 adUnitId 值是测试模式值。 在提交应用之前，必须通过合作伙伴中心将测试值替换为实时值。

发布包含实时广告的应用

  1. 确保在应用中对横幅广告的使用遵循我们的横幅广告指南。

  2. 在合作伙伴中心中，转到应用内广告页，然后创建广告单元。 对于广告单元类型，请指定横幅。 记下广告单元 ID 和应用程序 ID。

    注意

    测试广告单元和实时 UWP 广告单元的应用程序 ID 值采用不同的格式。 测试应用程序 ID 值为 GUID。 在合作伙伴中心中创建实时 UWP 广告单元时，该广告单元的应用程序 ID 值始终与应用的 Store ID（例如 Store ID 值类似于 9NBLGGH4R315）匹配。

  3. 你可以选择通过配置中介设置部分（位于应用内广告页面上）的设置为 AdControl 启用广告中介。 广告中介显示来自多个广告网络（包括其他付费广告网络，如 Taboola 和 Smaato）的广告及 Microsoft 应用促销活动的广告，从而使你能够最大化你的广告收益和应用促销能力。

  4. 在你的代码中，将测试广告单元值（ApplicationId 和 AdUnitId）替换为你在合作伙伴中心生成的实时值。

  5. 使用合作伙伴中心提交应用至 Microsoft Store。

  6. 在合作伙伴中心中查看广告性能报告。

在应用中管理多个广告控件的广告单元

可在一个应用中使用多个 AdControl 对象（例如，应用中的每页可以托管不同的 AdControl 对象）。 在此情况下，我们建议你为每个控件分配不同的广告单元。 对每个控件使用不同的广告单元使你可以分别配置中介设置并获取每个控件的独立报告数据。 这还使我们的服务能够更好地优化我们为应用提供的广告。

重要

每个广告单元都只能在一个应用中使用。 如果在多个应用中使用某个广告单元，将不为该广告单元提供广告。