uwp html5,HTML 5 和 JavaScript 中的 AdControl

HTML 5 和 JavaScript 中的 AdControl

02/18/2020

本文内容

警告

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

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

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

先决条件

使用 Visual Studio 2015 或更高版本的 Visual Studio 安装 Microsoft 广告 SDK。 有关安装说明，请参阅此文章。

备注

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

在应用中集成横幅广告

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

备注

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

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

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

在解决方案资源管理器窗口中，右键单击引用，然后选择添加引用...

在引用管理器中，展开通用 Windows、单击扩展，然后选中适用于 JavaScript 的 Microsoft 广告 SDK(版本 10.0)旁边的复选框。

在引用管理器中，单击“确定”。

打开 index.html 文件(或其他适用于你项目的 html 文件)。

在** < head > **部分，在项目的 JavaScript 引用 main.js css 和后，将引用添加到 ad.js。

备注

此行必须位于 main.js 的包含之后的** < head > **部分中; 否则，生成项目时将遇到错误。

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

备注

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

data-win-control="MicrosoftNSJS.Advertising.AdControl"

data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">

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

以下示例所示为简单应用的完整 index.html。

AdControlExampleApp

data-win-control="MicrosoftNSJS.Advertising.AdControl"

data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">

Content goes here

使用 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 值是测试模式值。 提交要提交的应用之前，必须将 这些值替换为 合作伙伴中心的实时值。

发布包含实时广告的应用

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

在 "合作伙伴中心"，中转到 " 应用内广告 " 页并 创建一个 ad 单位。 对于广告单元类型，请指定横幅。 记下广告单元 ID 和应用程序 ID。

备注

测试广告单元和实时 UWP 广告单元的应用程序 ID 值采用不同的格式。 测试应用程序 ID 值为 GUID。 当你在合作伙伴中心创建实时 UWP ad 单元时，ad 单位的应用程序 ID 值始终与你的应用的应用商店 ID 相匹配 (示例存储 ID 值如 9NBLGGH4R315) 。

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

在代码中，将测试 ad 单位值 (applicationId 和 AdUnitId) 替换为你在合作伙伴中心内生成的实时值。

使用合作伙伴中心将应用提交到应用商店。

查看合作伙伴中心的 广告性能报告 。

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

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

重要

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

相关主题